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


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 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
javascript事件冒泡实例分析
May 13 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
vue使用video插件vue-video-player详解
Oct 23 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基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
通过Pandas读取大文件的实例
2018/06/07 Python
Python多继承原理与用法示例
2018/08/23 Python
python如何使用代码运行助手
2020/07/03 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
教导处工作制度
2014/01/18 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
2015年服务员工作总结
2015/04/08 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
个人催款函范文
2015/06/23 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书