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


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 相关文章推荐
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
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
建立文件交换功能的脚本(一)
2006/10/09 PHP
PHP中的cookie
2006/11/26 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
koa-router源码学习小结
2018/09/07 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
实例介绍Python中整型
2019/02/11 Python
python变量的存储原理详解
2019/07/10 Python
对Python函数设计规范详解
2019/07/19 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
Python单元测试与测试用例简析
2019/11/09 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
给水工程专业毕业生自荐信
2014/01/28 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
网络研修随笔感言
2015/11/18 职场文书
golang 实现Location跳转方式
2021/05/02 Golang