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


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 相关文章推荐
用户注册常用javascript代码
Aug 29 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
CI框架表单验证实例详解
2016/11/21 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
jquery的index方法实现tab效果
2011/02/16 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
浅谈js中的this问题
2017/08/31 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
利用Python抓取行政区划码的方法
2016/11/28 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
餐厅经理岗位职责范本
2014/02/17 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
PHP设计模式(观察者模式)
2021/07/07 PHP
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL