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


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+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
在vue中实现echarts随窗体变化
Jul 27 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
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
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
php防止用户重复提交表单
2015/11/02 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
python使用生成器实现可迭代对象
2018/03/20 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
python 格式化输出百分号的方法
2019/01/20 Python
Pandas中resample方法详解
2019/07/02 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
python使用列表的最佳方案
2020/08/12 Python
商业计算机应用专业自荐书
2014/06/09 职场文书
停车位租赁协议书
2014/09/24 职场文书
升职自荐信怎么写
2015/03/05 职场文书
国际贸易实训总结
2015/08/03 职场文书
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
muduo TcpServer模块源码分析
2022/04/26 Redis