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


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 相关文章推荐
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
Javascript base64编码实现代码
Dec 02 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
js实现简单的日历显示效果函数示例
Nov 25 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中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
PHP中的integer类型使用分析
2010/07/27 PHP
PHP读取XML值的代码(推荐)
2011/01/01 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
php简单smarty入门程序实例
2015/06/11 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
vue实现分页组件
2020/06/16 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
python 测试实现方法
2008/12/24 Python
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
Python中functools模块函数解析
2017/03/12 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
Python中常见的异常总结
2018/02/20 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
在C#中如何实现多态
2014/07/02 面试题
大一学生假期实习的自我评价
2013/10/12 职场文书
小学教师办公室制度
2014/02/03 职场文书
元旦活动感言
2014/03/08 职场文书
保护环境的建议书
2014/03/12 职场文书
五五普法心得体会
2014/09/04 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
工作经验交流材料
2014/12/30 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android