uniapp监测网络uni.onNetworkStatusChange & uni.getNetworkType的使用区别
阐述:
- 在实际项目开发中,难免会监测网络,下面来具体详解下小程序这两种监测网络的方法,各有什么不同以及如何配合使用。
- 这里配置的是 uniapp,微信小程序把 uni. 换成 wx. 即可。
uni.onNetworkStatusChange和 uni.getNetworkType的区别如下:
1、uni.onNetworkStatusChange:
- uni.onNetworkStatusChange 这个API,是在切换网络的时候执行,切换2G,3G,WiFi的时候会执行,一般都会放在 onShow里面,实时监听网络的切换。当小程序关闭后台的时候在 onHide 生命周期函数中 执行 “uni.offNetworkStatusChange()” 关闭监听网络。
小程序模拟器怎么进行切换网络呢?如下图:
2、uni.getNetworkType:
- uni.getNetworkType 这个API,在页面初始化的时候,或者是在方法执行的时候执行。比如你可以放在:onShow 跟 onLoad这样的生命周期里面来执行。
uni.getNetworkType && uni.onNetworkStatusChange 使用方式如下:
- 可根据自己的项目需求,进行自行配置调整即可。uni.getNetworkType && uni.onNetworkStatusChange 使用区别见上方。
onShow(options) {
// 切换网络的时候执行,而不是进入页面就执行。
uni.onNetworkStatusChange(function (res) {
console.log("wdebug===res",res);
console.log(res.networkType);
});
uni.getNetworkType({
success: function (res) {
console.log("wdebug---res",res.networkType);
if(res.networkType != 'wifi' && res.networkType != 'none') {
uni.showToast({
title: '正在使用流量播放',
icon:'none',
duration:3000
})
}else if(res.networkType == 'none') {
console.log("wdebug--无网络测试");
uni.showToast({
title: '网络异常,请稍后再试',
icon:'none',
duration:3000
})
}
}
});
// 切换网络,可指定关闭哪个网络监听
let CALLBACK = function(res) {
// ...这里写你的业务逻辑
console.log("wdebug====", res);
}
uni.offNetworkStatusChange(CALLBACK)
uni.onNetworkStatusChange(CALLBACK);
},