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


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 相关文章推荐
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
js实现鼠标切换图片(无定时器)
Jan 27 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 安全检测代码片段(分享)
2013/07/05 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
一个javascript参数的小问题
2008/03/02 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
python聊天程序实例代码分享
2013/11/18 Python
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
Python3实现飞机大战游戏
2020/04/24 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
小学生获奖感言范文
2014/02/02 职场文书
考核评语大全
2014/04/29 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
Python实现仓库管理系统
2022/05/30 Python