微信小程序判断是否联网 重新连网的状态下自动刷新(两种实现方法)

你好！
你好！ 闲扯两句哈，今天突然碰见了这个需求，然后查了一下发现还没有类似的博客，所以写一篇大家可以参考一下

思路

首先，用微信的getNetworkType来获取当前网络的状态，然后看参数里的networkType（或者isConnected也行，直接是个boolean更简单），如果是none则证明没有网络连接，然后递归此函数。插一句getNetworkType和onNetworkStatusChange的区别，getNetworkType是获取当前网络状态，而onNetworkStatusChange则是监听网络状态发生变化，显而易见，此处应该用getNetworkType

代码

哪里需要监听网络状态，就在哪里:

	netUtils.judgeNetworkStatus(function (res) {

      if ("1" == res) {
        //有网了，干你要干的事儿吧
		
      } else {
        return;
      }
    })

netUtils.js:

function judgeNetworkStatus(callback) {
  wx.getNetworkType({
    success(res) {
      const networkType = res.networkType
      console.log(res);
      if ("none" == networkType) {
        wx.showLoading({
          title: '网络连接失败',
          mask: true
        })
        judgeNetworkStatus(callback);
      } else {
        wx.hideLoading()
        callback(networkType)
      }
    },
    fail(err) {
      console.log(err)
    }
    ,
    complete(cpe) {
      console.log(cpe)
    }
  })
}

module.exports = {
  judgeNetworkStatus: judgeNetworkStatus
};

index.js：

//index.js
var _this 
const netUtils = require('../../netWork/NetUtils.js');

Page({
  data: {
    netWorkType:'监听中~'
  },
  onLoad: function () {
    _this = this
    netUtils.judgeNetworkStatus(function (res) {
      //none 是无网络状态下，networkType 的值
      if ("none" != res) {
        //有网了，干你要干的事儿吧
        _this.setData({
          netWorkType:'有网了,网是'+res
        });
      } else {
        return;
      }
    })
  }
})

index.wxml：

<view class="objectView">
  <view class="tvNetWorkType">{{netWorkType}}</view>
</view>

index.wxss:

page {
  width: 100%;
  height: 100%;
}

.objectView {
  width: 100%;
  height: 100%;
}    

.tvNetWorkType {
  color: #000;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

demo地址

https://github.com/897589417/weChatSappJudgeNetworkStatus

另一种实现方法

//在需要判断网络的地方首先调用getNetWorkType，获取网络状态，
//然后接着调用onNetworkStatusChange来监听网络状态变化就行来了，
//没网的时候存个标识，然后在他调用网络请求的时候让给他弹个loading框啥的，
//有网自动加载就行
  wx.getNetworkType({
      success: function(res) {
        const networkType = res.networkType
        if ('none' != networkType) {
        //有网，该干嘛干嘛，然后接着监听网络状态
          _this.setData({
            netWorkType22: '有网,网是' + res.networkType
          })
          wx.onNetworkStatusChange(function(res) {
            if (res.isConnected) {
            //有网了以后，清空没网标识，进行页面刷新数据请求等...
              _this.setData({
                netWorkType22: '有网了,网是' + res.networkType
              })
            } else {
             //没网了，存个没网标识，然后需要请求的地方加个loding框
              _this.setData({
                netWorkType22: '没网了'
              })
            }

          })
        } else {
        //没网，存个没网标识，监听网络状态
          wx.onNetworkStatusChange(function(res) {
            if (res.isConnected) {
            	//有网了以后，清空没网标识，进行页面刷新数据请求等...
              _this.setData({
                netWorkType22: '有网了,网是' + res.networkType
              })
            } else {
            //没网了，存个没网标识，然后需要请求的地方加个loding框
              _this.setData({
                netWorkType22: '没网了'
              })
            }

          })
        }
      },
    })

我是入梦，谢谢你的观看我的博客，如果有什么错误，请随时联系我，QQ：897589417

本文地址：https://blog.csdn.net/chaseDreamer_/article/details/107367506