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


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 相关文章推荐
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
jQuery对表单元素的取值和赋值操作代码
May 19 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
区分vue-router的hash和history模式
Oct 03 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
elgg 获取文件图标地址的方法
2010/03/20 PHP
深入php之规范编程命名小结
2013/05/15 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
php不写闭合标签的好处
2014/03/04 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
用C++封装MySQL的API的教程
2015/05/06 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
python 批量修改/替换数据的实例
2018/07/25 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
新闻编辑自荐信
2013/11/03 职场文书
工会换届选举方案
2014/05/21 职场文书
政治学求职信
2014/06/03 职场文书
工作证明格式及范本
2014/09/12 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers