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


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 相关文章推荐
document.compatMode介绍
May 21 Javascript
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
解析javascript系统错误:-1072896658的解决办法
Jul 08 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
基于canvasJS在PHP中制作动态图表
May 30 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 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数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
python在每个字符后添加空格的实例
2018/05/07 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Python tornado上传文件的功能
2020/03/26 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
毕业生找工作的求职信范文
2013/12/24 职场文书
加拿大探亲邀请信
2014/01/28 职场文书
战略合作意向书范本
2014/04/01 职场文书
新闻编辑求职信
2014/04/09 职场文书
内勤岗位职责
2015/02/10 职场文书
资料员岗位职责范本
2015/04/13 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
Python django中如何使用restful框架
2021/06/23 Python
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫