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

所属分类: 网络编程 / JavaScript 阅读数: 638
收藏 0 赞 0 分享

前言

手机连接到互联网有几种方式: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这个接口的使用场景留给读者来思考。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

jQuery-1.9.1源码分析系列(十)事件系统之事件包装

这篇文章主要介绍了jQuery-1.9.1源码分析系列(十)事件系统之事件包装的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

javascript实现Email邮件显示与删除功能

这篇文章主要介绍了javascript实现Email邮件显示与删除功能,需要的朋友可以参考下
收藏 0 赞 0 分享

JavaScript实现自动生成网页元素功能(按钮、文本等)

这篇文章主要介绍了JavaScript实现自动生成网页元素功能,文章列出了三种可以进行增删改克隆按钮、文本等元素的方法,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

js实现索引图片切换效果

这篇文章主要介绍了js实现索引图片切换效果的代码,特别炫酷的效果,推荐给大家,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript实现动态统计图开发实例

这篇文章主要介绍了javascript实现动态统计图开发实例,需要的朋友可以参考下
收藏 0 赞 0 分享

超详细的javascript数组方法汇总

这篇文章主要对javascript的数组方法进行了详细的汇总,包括了最常用的的数组方法,还有扩展方法,很全面,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jQuery实现分隔条左右拖动功能

这篇文章主要介绍了jQuery实现分隔条左右拖动功能,需要的朋友可以参考下
收藏 0 赞 0 分享

分享经典的JavaScript开发技巧

这篇文章向大家分享了40多个经典的JavaScript开发技巧,相信读完这篇文章对大家开发javascript有很大的帮助作用,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jquery实现select选择框内容左右移动代码分享

这篇文章主要介绍了jquery实现select选择框内容左右移动代码,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

解决jquery插件:TypeError:$.browser is undefined报错的方法

这篇文章为大家分享了一个解决jquery插件:TypeError:$.browser is undefined报错的方法,解决报错问题的方法也很简单,需要解决此类问题的朋友不要错过这篇文章。
收藏 0 赞 0 分享
查看更多