蓝狮注册开户uniapp监听网络状态_是否断网判断

uniapp 本身是跟网络状态相关的api有两个:
getNetworkType

uni.getNetworkType({
success: function (res) {
console.log(res.networkType);
}
});
onNetworkStatusChange

uni.onNetworkStatusChange(function (res) {
console.log(res.isConnected);
console.log(res.networkType);
});
进行网络监听的话 自然是使用到onNetworkStatusChange 这个api的,蓝狮注册开户但是这个网络监听它是全局的监听的,比较珍贵,因此需要进行事件的分发。
这里使用分发事件的:

eventEmitter.js

function EventEmitter() {
this.listeners = {};
this.maxListener = 10;
}

EventEmitter.prototype.on = function (event, cb) {
let listeners = this.listeners;
if (listeners[event] && listeners[event].length >= this.maxListener) {
console.error(‘监听器的最大数量是%d,您已超出限制’, this.maxListener)
}

if (listeners[event] instanceof Array) {
    if (listeners[event].indexOf(cb) === -1) {
        listeners[event].push(cb);
    }
} else {
    listeners[event] = [].concat(cb);
}

}

EventEmitter.prototype.addListener = EventEmitter.prototype.on;
EventEmitter.prototype.emit = function (event) {
let args = Array.prototype.slice.call(arguments);
args.shift();
this.listeners[event].forEach(cb => {
cb.apply(null, args);
});
}

EventEmitter.prototype.removeListener = 蓝狮注册function (event, listener) {
let listeners = this.listeners;
let arr = listeners[event] || [];
let i = arr.indexOf(listener);
if (i >= 0) {
listeners[event].splice(i, 1);
}
}

EventEmitter.prototype.once = function (event, listener) {
var self = this;
function fn() {
var args = Array.prototype.slice.call(arguments);
listener.apply(null, args);
self.removeListener(event, fn);
}
this.on(event, fn)
}

EventEmitter.prototype.removeAllListener = function (event) {
this.listeners[event] = [];
}

EventEmitter.prototype.listeners = function (event) {
return this.listeners[event];
}

EventEmitter.prototype.setMaxListeners = function (num) {
this.maxListener = num;
}
export default EventEmitter

我希望的是在指定的组件中:可以监测网络状态,当发现断网,做一些事情,当发现网络恢复做另一些事情。

在main.js中引入 并绑定在原型上

import { networkStatusChangeEmitter } from ‘@/utils/onNetworkStatusChange.js’

vue.prototype.$networkStatusChangeEmitter = networkStatusChangeEmitter // 进行网络状态的监听
在组件里 在组件销毁时需要将事件注销 为了更方便的使用 这里进行了一层封装:

import EventEmitter from ‘./eventEmitter.js’
const networkStatusChangeEmitter = new EventEmitter()
uni.onNetworkStatusChange(function (res) {
networkStatusChangeEmitter.emit(‘networkStatusChange’,res)
});

// 组件生命周期内的网络状态监听
function onLiveNetWorkStatusChange(context,cb){
const listener = (res)=>{
cb(res)
}
context.$on(‘hook:mounted’,()=>{
context.$networkStatusChangeEmitter.addListener(‘networkStatusChange’,listener)
})

context.$on(‘hook:beforeDestroy’,()=>{
context.$networkStatusChangeEmitter.removeListener(‘networkStatusChange’,listener)
})
}
export { onLiveNetWorkStatusChange, networkStatusChangeEmitter }
使用姿势:

mounted(){
onLiveNetWorkStatusChange(this,(res)=>{
console.log(res)
})
}

0 Comments
Leave a Reply