前言
1、在实际项目开发中,难免涉及到监测网络,下面来具体了解下小程序两种监测网络的方法。
2、这里配置的是 uniapp,微信小程序把 uni. 换成 wx. 即可。
二、应用说明
2.1、uni. onNetworkStatusChange
触发时机:在网络切换的时候执行,切换2G,3G,WiFi的时候会执行。
应用时机:一般都会放在 onShow里面,实时监听网络的切换。当小程序关闭后台的时候在 onHide 生命周期函数中 执行 【uni.offNetworkStatusChange()】关闭监听网络。
小程序模拟器怎么进行切换网络呢?如下图:
2.2、uni.getNetworkType
触发时机:在页面初始化的时候,或者是在方法执行的时候执行。
应用时机:可以再onShow 、onLoad这样的生命周期里面来执行,也可以在点击事件中添加执行,属于即用即取的。
三、场景应用
可根据自己的项目需求,进行自行配置调整即可。uni.getNetworkType && uni.onNetworkStatusChange 使用区别见上方。
1、监听网络状态:
onShow: function() { /// 获取基本配置信息 this.iConfigDataOnShow(); }, onHide: function() { this.iConfigDataOnHide(e); }, methods: { /// 获取基本配置信息 iConfigDataOnShow() { let that = this; /// 获取网络类型 uni.getNetworkType(function(res) { that.iNetworkStatus(res) }); /// 监听网络状态变化 uni.onNetworkStatusChange(function(res) { that.iNetworkStatus(res) }); /// 获取当前的地理位置、速度。 uni.getLocation({ type: 'gcj02', success: function(res) { that.iLocation(res) }, }); }, /// 关闭基本配置信息监听 iConfigDataOnHide() { let that = this; /// 取消监听网络状态变化。 uni.offNetworkStatusChange(function(res) { that.iNetworkStatus(res) }); }, /// 获取网络状态 iNetworkStatus(res) { /* { "errMsg":"getNetworkType:ok", "networkType":"wifi" } */ var __netType = ''; //网络状态 1=wifi 2=蜂窝网络(2g) 3=3g 4=4g 5=5g 6=有线网络 7=unknown 0=无网络 switch (res.networkType) { case 'wifi': __netType = 1; break; case '2g': __netType = 2; break; case '3g': __netType = 3; break; case '4g': __netType = 4; break; case '5g': __netType = 5; break; case 'ethernet': __netType = 6; break; case 'unknown': __netType = 7; break; case 'none': __netType = 0; break; default: break; } this.$scope.globalData.logNet = __netType; console.log(res.networkType); }, /// 获取定位信息 iLocation(res) { /* { "latitude":24.44579, "longitude":118.08243, "speed":-1, "accuracy":65, "verticalAccuracy":65, "horizontalAccuracy":65, "errMsg":"getLocation:ok" } */ this.$scope.globalData.logLocate = res; }, }
2、获取网络状态
uni.getNetworkType({ success: function (res) { console.log("---res",res.networkType); if(res.networkType != 'wifi' && res.networkType != 'none') { uni.showToast({ title: '正在使用流量播放', icon:'none', duration:3000 }) }else if(res.networkType == 'none') { console.log("无网络"); uni.showToast({ title: '网络异常,请稍后再试', icon:'none', duration:3000 }) } } })