视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
微信小程序 如何获取网络状态
2020-11-27 21:53:09 责编:小采
文档


前言

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

下载本文
显示全文
专题