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


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 代码也可以变得优美的实现方法
Jun 22 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
javascript打开word文档的方法
Apr 16 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
微信小程序 接入腾讯地图的两种写法
Jan 12 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
PHP分页函数代码(简单实用型)
2010/12/02 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
js的写法基础分析
2011/01/17 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
python操作 hbase 数据的方法
2016/12/18 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
Django之模板层的实现代码
2019/09/09 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
努比亚手机官网:nubia
2016/10/06 全球购物
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
代收款委托书范本
2014/10/01 职场文书
vue3不同环境下实现配置代理
2022/05/25 Vue.js