微信小程序 - 断网提示

阅读提示：本文为个人总结类文章

网络断开或者由WIFI切换到流量提示用户，都需要监听一下用户改变网络的状态，这里使用的微信小程序官方API为（监听网络状态变化事件）：

wx.onNetworkStatusChange(function callback);
//官方示例代码
wx.onNetworkStatusChange(function (res) {
  console.log(res.isConnected)
  console.log(res.networkType)
})

另一个有必要使用的API是（获取网络类型）：

wx.getNetworkType(Object object)
//官方示例代码
wx.getNetworkType({
  success (res) {
    const networkType = res.networkType
  }
})

自己的解决方法是：

在app.js中加入获取网络类型的代码，将获取到的网络类型（wifi、2g、3g、4g、5..g、none）赋值到全局变量，（这里踩了1号坑）在要判断网络状态的js中根据全局变量的值初始化界面的网络状态变量，界面根据本页网络状态标志展示相应的组件（js也会做出相应的判断），js中也要加入网络状态变化监听代码，进而在变化之后刷新界面（这里是2号坑）。刷新界面的代码是this.onShow或者this.onLoad或者使用跳转界面也是ok的，但是跳转界面有点尴尬。

有获取手机号的按钮的时候会自动弹窗然后用户点击获取失败，有点不正常，解决方案是：在wxml中写了两遍button根据网络状态改变当前界面的data，button根据改变的data中的数据展示相应的按钮（有一个普通按钮button,还有一个是调用获取手机号具有open-type="..."的按钮）。

填坑经验：

1.一号坑：给全局变量赋值的时候要在app.js中的globalData中加入相应的属性才能进行this.globalData.属性名 = true。

2.二号坑：有两点注意（1）监听用户网络状态的代码是在用户改变网络状态之后才会调用；（2）刷新界面的问题。