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


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之HTMLCollection接口代码
Apr 27 Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
vue实现分页加载效果
Dec 24 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 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 file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
JS backgroundImage控制
2009/05/19 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
node.js中的fs.chmod方法使用说明
2014/12/18 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
python绘制规则网络图形实例
2019/12/09 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
全球性的在线购物网站:Zapals
2017/03/22 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
播音主持女孩的自我评价分享
2013/11/20 职场文书
小学生元旦广播稿
2014/02/21 职场文书
党校学习自我鉴定
2014/02/24 职场文书
大气污染防治方案
2014/05/19 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
小学推普周活动总结
2015/05/07 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
Pillow图像处理库安装及使用
2022/04/12 Python
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js