方法封装在工具类里面,方便在各个页面和项目中使用:
utils.js:
async judgeNetWork () {
const commonCell = ['cellular', '2g', '3g', '4g', '5g', '3G/2G']
const userAgent = navigator.userAgent.toLowerCase()
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection || {type: 'unknown'}
let type
// 判断是否是微信内置浏览器
const isWeixin = /micromessenger/.test(userAgent)
return new Promise(async (resolve, reject) => {
if (isWeixin) {
await this.getwNetwork()
resolve()
} else {
let newType
type = (connection && connection.type) || 'unknown'
console.log('拿到网络状态----', type)
if (type && commonCell.indexOf(type) !== -1) {
newType = 'cellular'
} else if (type === 'wifi') {
newType = 'wifi'
} else {
newType = 'unknown'
}
localStorage.setItem('network', newType)
resolve()
}
})
}
getwNetwork () {
return new Promise((resolve) => {
wx.getNetworkType({
success: function (res) {
console.log('调用成功----', res)
let wType = 'wifi'
if (res.networkType !== 'wifi') {
wType = 'cellular'
}
localStorage.setItem('network', wType)
resolve()
},
fail: function (res) {
console.log('调用失败----', res)
localStorage.setItem('network', 'unknown')
resolve()
}
})
})
},
index.html:
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
async clickAction () {
let nettype
await this.$utils.judgeNetWork()
nettype = localStorage.getItem('network')
console.log('打印当前网络状态---',nettype)
}
网上的方法很难实现当网络状态发生改变后仍然能判断出新的状态,比如在同一页面,从wifi切到4G,或者从4G切到wifi。如果是在微信浏览器里面,微信会缓存userAgent ,导致切换后还是打印上一次的状态,除非退出页面重新进来。
所以得使用官方提供的wx.getNetworkType({})方法,除此之外,别无他法。
因为方法为异步,所以采用了Promise的方式,把网络状态储存在localStorage里面,取的话也是从localStorage里面取。
这个方法可以很准确的判断在微信内、安卓浏览器内的网络状态,会返回wifi、cellular(蜂窝流量)、unknown三种类型,2G/3G/4G/5G都属于cellular。
ios可能因为用户隐私问题,无论是自带浏览器还是UC等,只要不在微信内,都返回unknown。如果有人有办法解决这个问题,就请分享一下吧,三克油~
网友评论