网络是当前信息时代的重要基石，无论是在移动设备还是桌面电脑上，任何一个应用程序的任何一个业务逻辑都需要依赖网络来进行通信。移动设备则更是如此，由于网络环境的多变性，往往会发现某些业务逻辑在网络条件不佳时无法正常工作。
因此，在小程序中实时监测网络状态变化，便成为了 resolver 优化或解决小程序中各种网络问题的必要手段。那么在小程序开发中，如何监听网络状态的变化，成为了一个需要解决的核心问题。
在接下来的内容，笔者将从以下几个问题出发，为开发者提供一些监测网络状态变化的技术方案和实践经验：
1.小程序中如何获取当前的网络状态？
2.监听网络状态变化有哪些方法？
3.如何在小程序中监测网络状态变化？
4.如何应用网络状态变化的信息？
1.小程序中如何获取当前的网络状态？
在介绍获取网络状态的方法之前，首先我们需要了解一下，当前可用的网络分类，它们分别是：
- WIFI
- 4G(LTE)
- 3G
- 2G
- 蜂窝移动
- 无网络
通常情况下，小程序需要判断的网络状态只有两种，即 “有网络” 和 “无网络”状态。
在小程序中获取当前的网络状态，我们可以使用小程序官方提供的 wx.getNetworkType() API 接口来实现，该接口返回的实时上网类型，可根据该值判断当前的网络情况。
wx.getNetworkType({
success: function(res) {
console.log(res.networkType) // 返回网络类型,如wifi、2g、3g、4g、unknown、none
}
})
此外，在 wx.getNetworkType() 中，我们还可以根据当前的实时上网类型，来确认当前网络的具体数据：（单位为kb/s）
- wifi：971，45.5，22.5
- 4g：418，10.8，3.2
- 3g：1.4，0.45，0.15
- 2g：0.23，0.05
2.监听网络状态变化有哪些方法？
接下来，我们需要进一步讲解，如何在小程序中监听网络状态的变化，以及监听网络状态变化的方法有哪些？
在小程序中监听网络状态的变化，我们通常使用 wx.onNetworkStatusChange() 这个接口，该接口的作用是当网络状态变化时，小程序会推送对应的事件信息。
基于该方法的监听，我们可以监听网络状态变化后，进行相关的操作，以及在小程序页面上做出用户友好的提示等等。
wx.onNetworkStatusChange(function(res) {
console.log(res.isConnected) // 返回boolen 值,有网络连接为true,否则为false
console.log(res.networkType) // 返回网络类型,如wifi、2g、3g、4g、unknown、none
})
不过需要注意的是，该方法只适用于小程序运行在前台的情况。如果小程序不能成功获取网络状态信息，建议考虑更换数据API、尝试重连操作或者引导用户检查网络设置以获取当前的网络状态。
除了上述方法，还可以创建一个网络请求封装类，监测每次网络请求的成功与失败，错误码等等，根据网络请求的情况来实现网络状态的监测。
3.如何在小程序中监测网络状态变化？
在小程序中监测网络状态变化，最好的实践方案是将网络状态应用注入到小程序的整个生命周期中。
在小程序的生命周期中，我们可以通过 app.js 来实现全局生命周期的监听，以便对网络状态进行实时监测：
1.在 app.js 中创建网络状态 function 作为全局变量，设置网络状态初始值为 false；
2.监听 wx.onNetworkStatusChange() 接口，并在该接口回调中，进行网络状态的更新；
3.由于小程序的开发往往是进行 tab 化开发的，因此需要为每个 tabbar 设置一个全局的网络状态变量来进行网络状态的更新；
4.当 tab 页面被展示时，监听当前 tab 对应的网络状态变量；
5.如果网络状态变化，更新网络状态变量并更新图标等提示信息。
以下是小程序全局变量的示例代码：
App({
globalData: {
isConnected: true
}
})
网络状态变化的示例代码如下：
wx.onNetworkStatusChange(function(res) {
this.globalData.isConnected = res.isConnected
})
更新网络状态变量的代码如下：
wx.switchTab({
url: '/pages/index/index',
success: function (e) {
var page = getCurrentPages().pop();
if (page == undefined || page == null) return;
page.onLoad();
}
})
4.如何应用网络状态变化的信息？
监听网络状态变化后，也需要对它进行进一步的应用操作。尤其是在网络状况不理想的情况下，如何在小程序中给用户做出积极的提示，是一个值得深思的问题。
在应用网络状态变化时，我们需要了解一些提示用户的方式：
1.遮罩提示或警告信息：当网络状态不佳或无网络连接时，我们需要有一种独特的方式来提示用户，这时候，遮罩提示或警告信息是很好的选择方式。
2.智能配适：当网络状态不同调，并且快速可变时，我们需要对不同的网络状态做出不同的响应拦截，通过智能配适解决不同网络环境下小程序速度慢的问题。
3.移动网络与 WiFi 的展现方式：一般而言，网络状态较佳时，小程序体验也会变得更好。但在不同网络环境下，不同的用户体验却不相同。这时候，我们可以通过一些图标、标志来提示当前的网络状态，让用户提高对不同网络状态的敏感性，更好的维护网络体验。
总结
在小程序中监听网络状态的变化，是小程序开发中非常重要的一点，也是解决小程序网络问题的有效手段之一。具体可以从四个问题入手考虑：
1.小程序中如何获取当前的网络状态？
2.监听网络状态变化有哪些方法？
3.如何在小程序中监测网络状态变化？
4.如何应用网络状态变化的信息？
如何使用上述方法，需要结合具体的小程序业务场景来进行实际应用。如果你还有其他的实践经验，欢迎在针对本文的评论栏中分享给我们。
