微信小程序 如何获取网络状态


Posted in Javascript onJuly 26, 2019

前言

手机连接到互联网有几种方式:Wifi、2G、3G、4G,包括很快到来的5G,每种方式的上传速度和下载速度差异很大,它们的计费方式的差异也导致用户在使用互联网服务的时候有不同的使用习惯。

Wifi相对于其他几种网络连接方式,其速度会更快。Wifi一般都是免费供用户使用,通过移动数据网络是需要根据使用流量进行计费的。我们考虑这样一个场景,小程序需要下载一些文档,然后通过小程序的能力去预览这个文档,这些文档可能文件体积比较大,对于某些用户来说,他们并不想耗费太多的数据流量去预览文档。考虑到这样的情况,我们可以通过小程序提供的获取网络状态的能力,做一些更友好的体验提示。

代码利用wx.getNetworkType获取网络状态

代码:

// 预览文档
 lookFile(){
  wx.getNetworkType({
   success: function (res) {
    // networkType字段的有效值:
    // wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
    if (res.networkType == 'wifi') {
     // 从网络上下载pdf文档
     wx.downloadFile({
      url: 'https://pic25.nipic.com/20121205/10197997_003647426000_2.jpg',
      success: function (res) {
       // 下载成功之后进行预览文档
       wx.openDocument({
        filePath: res.tempFilePath
       })
      }
     })
    } else {
     wx.showModal({
      title: '提示',
      content: '当前为非Wifi环境,确定下载吗?',
      confirmText: '确定',
      cancelText: '取消',
      success: function (res) {
       if (res.confirm) {
        console.log('确定操作')
        wx.downloadFile({
         url: 'https://pic25.nipic.com/20121205/10197997_003647426000_2.jpg',
         success: function (res) {
          // 下载成功之后进行预览文档
          wx.openDocument({
           filePath: res.tempFilePath
          })
         }
        })
       } else if (res.cancel) {
        console.log('取消操作')
        wx.showToast({
         title:'取消成功'
        })
       }
      }
     })
    }
   }
  })
 }

某些情况下,我们的手机连接到网络的方式会动态变化,例如手机设备连接到一个信号不稳定的Wifi热点,导致手机会经常从Wifi切换到移动数据网络。小程序宿主环境也提供了一个可以动态监听网络状态变化的接口wx.onNetworkStatusChange,让开发者可以及时根据网络状况去调整小程序的体验,wx.onNetworkStatusChange这个接口的使用场景留给读者来思考。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
大家未必知道的Js技巧收藏
Apr 07 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
xml转json的js代码
Aug 28 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
Vue.Draggable实现交换位置
Apr 07 Vue.js
layui使用数据表格实现购物车功能
Jul 26 #Javascript
layui实现数据表格点击搜索功能
Mar 26 #Javascript
vue eslint简要配置教程详解
Jul 26 #Javascript
vue移动端城市三级联动组件使用详解
Jul 26 #Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 #Javascript
layui实现下拉框三级联动
Jul 26 #Javascript
layui添加动态菜单与选项卡
Jul 26 #Javascript
You might like
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
PHP中的正规表达式(二)
2006/10/09 PHP
PHP进程同步代码实例
2015/02/12 PHP
php实现插入排序
2015/03/29 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
大整数数相乘的问题
2012/07/22 面试题
酒店管理失职检讨书
2014/09/16 职场文书
付款证明模板
2015/06/19 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技