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


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 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
php入门学习知识点三 PHP上传
2011/07/14 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
python http接口自动化脚本详解
2018/01/02 Python
python获取代码运行时间的实例代码
2018/06/11 Python
pandas去除重复列的实现方法
2019/01/29 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
《小小竹排画中游》教学反思
2014/02/26 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP