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


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 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
Vue实现双向数据绑定
May 03 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 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在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
jquery实现滑动特效代码
2015/08/10 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
Python验证码截取识别代码实例
2020/05/16 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
Django权限控制的使用
2021/01/07 Python
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
保洁公司服务承诺书
2014/05/28 职场文书
保护动物的标语
2014/06/11 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
医院见习总结
2015/06/24 职场文书
秋季运动会加油词
2015/07/18 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书