最近在uniapp项目开发中,发现每当页面断开网络的的时候,loading模块也会中断无法关闭,然后如果没有及时的给出网络中断的提示的话,对客户来说就会非常的莫名其妙,使用体验大打折扣。下面我就来做一下网络监控的体验优化:
uniapp中,是直接有api来监控网络的断开与否的:像uni.getNetworkType可以直接获得当前的网络状态,可以在页面初始化时判断网络是否正常连接:

uni.getNetworkType({ //获取网络状态
				success: function(res) {
					Vue.prototype.networkType = res.networkType;
					uni.setStorageSync('networkType', res.networkType);
				}
			});

同时也有监控网络变化的api:uni.onNetworkStatusChange

	uni.onNetworkStatusChange(function(res) { //监听网络状态变化
				Vue.prototype.networkType = res.networkType;
				uni.setStorageSync('networkType', res.networkType);
				if (!res.isConnected) {
					let msg ='检查网络是否连接'
					this.modalcon(msg)
				}
			});

通过这两个api就可以非常轻松的给网络中断的体验问题做出优化啦!

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐