uniapp监听网络状态 - 判断是否有网络

更新日期: 2022-10-13阅读: 2.2k标签: 监听

由于新机首次安装app的时候会出现:请求网络权限“是否允许使用数据”,如果用户很长时间没点击允许,就会出现app内接口请求永远返回失败的情况,需要用户清掉APP重新打开才能正常请求使用。

为解决这类问题,我们就需要监听网络状态,这边文章主要介绍uniapp判断是否有网,监听网络状态的问题,fly63前端网为大家介绍3种实现方案。


方法一:uni.getNetworkType

该方法用于获取网络类型。

uni.getNetworkType({
success: res=> {
if(res.networkType === "none"){//网络类型 wifi、2g、3g、4g、ethernet、unknown、none
console.log("当前无网络"); return;
}
console.log("有网络");
}
});

在实际使用时候,我们就需要用到定时器或者递归的方式来判断是否有网,等有网就进行相应请求操作,比如:

getNetwork(cb,time=300){
uni.getNetworkType({
success: function (res) {
if(res.networkType === "none"){//当前无网络
setTimeout(()=>{
this.getNetwork(cb);
},time);
return;
}
typeof cb=="function" && cb()
}
});
}


方法二:plus.networkinfo

使用html5+的plus下networkinfo模块用于获取网络信息。其中getCurrentType用于获取设备当前连接的网络类型:

getNetworkType() {
let types = {};
types[plus.networkinfo.CONNECTION_UNKNOW] = "Unknown";
types[plus.networkinfo.CONNECTION_NONE] = "None";
types[plus.networkinfo.CONNECTION_ETHERNET] = "Ethernet";
types[plus.networkinfo.CONNECTION_WIFI] = "WiFi";
types[plus.networkinfo.CONNECTION_CELL2G] = "2G";
types[plus.networkinfo.CONNECTION_CELL3G] = "3G";
types[plus.networkinfo.CONNECTION_CELL4G] = "4G";
console.log("Network: " + types[plus.networkinfo.getCurrentType()]);
}


方法三:uni.onNetworkStatusChange

经测试发现:该方法是无法实现监听的,官网所说的监听是指网络变化的时候被调用,实现监听要配合两个api使用:

uni.onNetworkStatusChange(res=>{
if(res.networkType=='none'){//res.networkType网络类型 wifi、2g、3g、4g、ethernet、unknown、none
console.log("当前无网络")
return;
}
console.log("有网络")
});


链接: https://www.fly63.com/article/detial/12198

原生js监听浏览器后退按钮的事件方法

js监听浏览器后退按钮的事件首先我们要了解浏览器的history。可以使用pushState方法往history里增加url链接,并且提供popstate事件监测从history栈里弹出url。既然有提供popstate事件监测,那么我们就可以进行监听。

使用 vue 实例更好的监听事件

文章举例说明一下在 vue 中如何更好的监听浏览器事件。原文介绍了一种新增 vue 实例的方法,单独监听事件。这样代码书写较为简练,容易管理。

js 按键监听事件(keydown event)

监听全局键盘按下事件,例如监听全局回车事件;监听某个组件键盘按下事件,例如监听id为btn的button组件的回车按下事件;如果是要监听组合键,例如监听ctrl+c

Vue2.0解决watch对象属性变化监听不到问题

在项目中遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性的时候,发现子组件使用deep watch都不能监听到属性的变化。今天终于在网上找到了答案,在这里把方法记录下来

vue中的watch的用法

在vue中,使用watch来响应数据的变化。下面代码是watch简单的用法:监听值变化;监听处理函数,在所监听的数据后面直接加字符串形式的方法名;监听对象变化

jQuery常见事件的监听方式

在 Web 页面经常会有各种事件发生,事件发生后需要进行一些特定处理,即执行特定的函数或者语句。这就需要对事件进行监听,监听事件的常见方式有以下三种,本人将通过实例来具体介绍。

mutationobserver监听dom变化

Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动,比如节点的增减、属性的变动、文本内容的变动,这个 API 都可以得到通知。DOM 的变动会触发 Mutation Observer 事件,但与事件不同的是,Mutation Observer 是异步触发

Js如何移除事件监听器

在运行时清理你的代码是构建高效、可预测的应用程序,没有商量余地的部分。在JavaScript中,实现这一目标的方法之一是很好地管理事件监听器,尤其是当不再需要时移除它们。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!