uni-app 监听网络后卸载网络状态监听uni.offNetworkStatusChange不生效
uni-app 监听网络后卸载网络状态监听uni.offNetworkStatusChange不生效
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | win11 | HBuilderX |
产品分类：uniapp/App
PC开发环境操作系统：Windows
PC开发环境操作系统版本号：win11
HBuilderX类型：正式
HBuilderX版本号：3.4.7
手机系统：iOS
手机系统版本号：iOS 15
手机厂商：苹果
手机机型：iphon13
页面类型：vue
vue版本：vue2
打包方式：云端
项目创建方式：HBuilderX
示例代码：
onLoad() {
let self = this;
let i = 0;
console.log('index.vue--onLoad--'+self.connect);
// 判断网络状态
uni.onNetworkStatusChange(function (res) {
i = i+1
console.log('监听网络次数'+i);
console.log('res.networkType----'+res.networkType+'----res.isConnected----'+res.isConnected);
if(res.networkType==='none' && !res.isConnected){
self.connect = false;
let msg = '暂时无网络连接\r\n请您检查是否系统设置=>蜂窝移动网络中是否允许移动OA使用蜂窝移动网络的流量';
if(uni.getSystemInfoSync().platform === 'android'){
msg='当前网络不可用，请检查你得网络设置';
}
uni.showModal({
title: '提示',
content: msg,
//showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('刷新当前页');
}
}
});
}else {
self.connect = true;
console.log('--else--res.isConnected----'+res.isConnected);
uni.offNetworkStatusChange(function(){});
}
})
},操作步骤：
不断网络开关查看监听网络状态
预期结果：
调用uni.offNetworkStatusChange则会取消网络监听
实际结果：
调用uni.offNetworkStatusChange后，网络监听uni.onNetworkStatusChange回调仍然执行
bug描述：
首次进入onLoad监听网络状态uni.onNetworkStatusChange，当判断网络状态为连接后则卸载网络状态监听uni.offNetworkStatusChange不生效，每次切换网络后仍然进入监听网络状态判断
callback 不要用this.callback=function(){}
页面全局改用const networkchange=function(){}，这样可以off掉
在 uni-app 中，uni.offNetworkStatusChange 是用来卸载网络状态监听的函数。如果你发现 uni.offNetworkStatusChange 不生效，可能是以下几个原因导致的：
1. 监听函数不一致
uni.offNetworkStatusChange 需要传入与 uni.onNetworkStatusChange 相同的监听函数才能正确卸载。如果你传入的函数与之前绑定的函数不一致，卸载操作将不会生效。
// 正确的做法
const networkStatusChangeCallback = (res) => {
console.log('网络状态变化', res);
};
// 绑定监听
uni.onNetworkStatusChange(networkStatusChangeCallback);
// 卸载监听
uni.offNetworkStatusChange(networkStatusChangeCallback);2. 监听函数未正确绑定
如果你没有正确绑定监听函数，或者绑定的是一个匿名函数，那么卸载时也无法找到对应的监听函数。
// 错误的做法：使用匿名函数绑定监听
uni.onNetworkStatusChange((res) => {
console.log('网络状态变化', res);
});
// 无法卸载，因为匿名函数无法被引用
uni.offNetworkStatusChange(/* 无法传递匿名函数 */);3. 卸载时机不对
确保你在合适的时机调用 uni.offNetworkStatusChange。如果你在组件或页面销毁时卸载监听，需要在 onUnload 或 beforeDestroy 生命周期中进行。
export default {
onLoad() {
this.networkStatusChangeCallback = (res) => {
console.log('网络状态变化', res);
};
uni.onNetworkStatusChange(this.networkStatusChangeCallback);
},
onUnload() {
uni.offNetworkStatusChange(this.networkStatusChangeCallback);
}
};