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、获取网络状态

			uni.getNetworkType({
				success: function (res) {
					console.log("---res",res.networkType);
					if(res.networkType != 'wifi' && res.networkType != 'none') {
						uni.showToast({
							title: '正在使用流量播放',
							icon:'none',
							duration:3000
						})
					}else if(res.networkType == 'none') {
						console.log("无网络");
						uni.showToast({
							title: '网络异常，请稍后再试',
							icon:'none',
							duration:3000
						})
					}
				}
			});