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


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之通用简单的table选项卡实现(二)
May 09 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
Dec 04 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
js实现筛选功能
Nov 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实现的英文名字全拼随机排号脚本
2014/07/04 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
php无限极分类实现方法分析
2019/07/04 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
Javascript中replace()小结
2015/09/30 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
Vue单文件组件基础模板小结
2017/08/10 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
Python实现简单的可逆加密程序实例
2015/03/05 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
python @classmethod 的使用场合详解
2019/08/23 Python
Python 私有化操作实例分析
2019/11/21 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
总经理办公室主任岗位职责
2013/11/12 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
委托证明范本
2014/11/25 职场文书