美文网首页
vue实时监听网络状态是wifi还是4G

vue实时监听网络状态是wifi还是4G

作者: 小小鱼yyds | 来源:发表于2021-04-16 10:23 被阅读0次

    方法封装在工具类里面,方便在各个页面和项目中使用:
    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。如果有人有办法解决这个问题,就请分享一下吧,三克油~

    相关文章

      网友评论

          本文标题:vue实时监听网络状态是wifi还是4G

          本文链接:https://www.haomeiwen.com/subject/wpnslltx.html