uni-app：网络状态监测之onNetworkStatusChange与getNetworkType的区别与应用

一、前言

=======================================================================

1、在实际项目开发中，难免涉及到监测网络，下面来具体了解下小程序两种监测网络的方法。

2、这里配置的是 uniapp，微信小程序把 uni. 换成 wx. 即可。

二、应用说明

=========================================================================

2.1、uni. onNetworkStatusChange

---

触发时机：在网络切换的时候执行，切换2G，3G，WiFi的时候会执行。

应用时机：一般都会放在 onShow里面，实时监听网络的切换。当小程序关闭后台的时候在 onHide 生命周期函数中 执行 【uni.offNetworkStatusChange()】关闭监听网络。

小程序模拟器怎么进行切换网络呢？如下图：

2.2、uni.getNetworkType

---

触发时机：在页面初始化的时候，或者是在方法执行的时候执行。

应用时机：可以再onShow 、onLoad这样的生命周期里面来执行，也可以在点击事件中添加执行，属于即用即取的。

三、场景应用

=========================================================================

可根据自己的项目需求，进行自行配置调整即可。uni.getNetworkType && uni.onNetworkStatusChange 使用区别见上方。

1、监听网络状态：

onShow: function() {

		/// 获取基本配置信息

		this.iConfigDataOnShow();

},

onHide: function() {

		this.iConfigDataOnHide(e);

},



methods: {

		/// 获取基本配置信息

		iConfigDataOnShow() {

			let that = this;

			/// 获取网络类型

			uni.getNetworkType(function(res) {

				that.iNetworkStatus(res)

			});



			/// 监听网络状态变化

			uni.onNetworkStatusChange(function(res) {

				that.iNetworkStatus(res)

			});



			/// 获取当前的地理位置、速度。

			uni.getLocation({

				type: 'gcj02',

				success: function(res) {

					that.iLocation(res)

				},

			});

		},



		/// 关闭基本配置信息监听

		iConfigDataOnHide() {

			let that = this;

			/// 取消监听网络状态变化。

			uni.offNetworkStatusChange(function(res) {

				that.iNetworkStatus(res)

			});

		},



		/// 获取网络状态

		iNetworkStatus(res) {

				/* {

				"errMsg":"getNetworkType:ok",

				"networkType":"wifi"

				 } */

			var __netType = '';

			//网络状态	1=wifi 2=蜂窝网络（2g) 3=3g 4=4g 5=5g 6=有线网络 7=unknown 0=无网络

			switch (res.networkType) {

					case 'wifi':

						__netType = 1;

						break;

					case '2g':

						__netType = 2;

						break;

					case '3g':

						__netType = 3;

						break;

					case '4g':

						__netType = 4;

						break;

					case '5g':

						__netType = 5;

						break;

					case 'ethernet':

						__netType = 6;

						break;

					case 'unknown':

						__netType = 7;

						break;

					case 'none':

						__netType = 0;

						break;

					default:

						break;

				}

				this.$scope.globalData.logNet = __netType;

				console.log(res.networkType);

			},



		/// 获取定位信息

		iLocation(res) {

				/* {

				"latitude":24.44579,

				"longitude":118.08243,

				"speed":-1,

				"accuracy":65,

				"verticalAccuracy":65,

				"horizontalAccuracy":65,

				"errMsg":"getLocation:ok"

				} */

			this.$scope.globalData.logLocate = res;

		},

	}

2、获取网络状态