首页 > 其他分享> 文章详细

mui技术点01.手机网络连接的判断

2021-12-30 16:05:34 阅读：230 来源： 互联网

标签：01 网络 plus str 刷新网络连接 mui types

# 问题说明

手机未连接网络，app访问后台接口时出现错误。

# 解决方案

每个画面初始时，判断网络是否连接，网络如果处于断网阶段，弹出窗口信息直接退出app，或者画面显示[未联网]消息提示，提示用户刷新网络（比如：点击刷新按钮，或者下拉等操作）。

# 详细代码

## 直接退出app

1. 检测是否连接网络

//mui检测是否连接网络
function getSysInfo() {
	//  var str = "";
	//  str += "名称：" + plus.os.name + "\n";
	//  str += "版本：" + plus.os.version + "\n";
	//  str += "语言：" + plus.os.language + "\n";
	//  str += "厂商：" + plus.os.vendor + "\n";
	//  str += "网络类型：";

	types = {};
	types[plus.networkinfo.CONNECTION_UNKNOW] = "未知";
	types[plus.networkinfo.CONNECTION_NONE] = "未连接网络";
	types[plus.networkinfo.CONNECTION_ETHERNET] = "有线网络";
	types[plus.networkinfo.CONNECTION_WIFI] = "WiFi网络";
	types[plus.networkinfo.CONNECTION_CELL2G] = "2G蜂窝网络";
	types[plus.networkinfo.CONNECTION_CELL3G] = "3G蜂窝网络";
	types[plus.networkinfo.CONNECTION_CELL4G] = "4G蜂窝网络";

	var str = types[plus.networkinfo.getCurrentType()];
	if (str == '未知' || str == '未连接网络') {
		return false;
	} else {
		return true;
	}

}

2. 调用及处理

mui.plusReady(function() {

	//如果未连接网络，退出app（针对mui框架）
	if (!(getSysInfo())) {
		alert('网络连接失败，请退出并重置网络！');
		plus.runtime.quit();//退出app（针对mui框架）
		return;
	}
});

## 画面显示提示按钮，让用户手动刷新

1. 点击按钮，进行画面刷新

详细代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>网络未连接</title>
	<link href="css/mui.min.css" rel="stylesheet" />
	<style>
		.mui-btn {
			display: block;
			width: 60px;
			margin: 10px auto;
		}

		#info {
			padding: 10px 5px;
		}
	</style>
</head>
<body>

	<header class="mui-bar mui-bar-nav">
		<h1 class="mui-title">按钮点击刷新</h1>
	</header>

	<div id="content" class="mui-content">
		<div class="mui-content-padded" style="margin: 50px;text-align: center;">
			<div id="info"></div>
			<button id="button" type="button" class="mui-btn mui-btn-outlined">刷新</button>
		</div>
	</div>

	<script src="js/mui.min.js"></script>
	<script type="text/javascript" charset="utf-8">
		mui.init();
		var info = document.getElementById("info");
		(function($) {
			mui.toast('画面初始化！');
			info.innerText = '网络未连接，请连接网络后刷新！';
		})(mui);

		document.getElementById("button").addEventListener('tap', function() {
			location.reload();
		});
	</script>
</body>
</html>

2. 下划画面刷新

详细代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>网络未连接</title>
	<link href="css/mui.min.css" rel="stylesheet" />
	<style>
		#info {
			padding: 10px 5px;
		}
	</style>
</head>
<body>

	<header class="mui-bar mui-bar-nav">
		<h1 class="mui-title">画面下拉刷新</h1>
	</header>

	<div id="content" class="mui-content">
		<div class="mui-content-padded" style="margin: 50px;text-align: center;">
			<div id="info"></div>
		</div>
	</div>

	<script src="js/mui.min.js"></script>
	<script type="text/javascript" charset="utf-8">
		var info = document.getElementById("info");
		mui.init({
		pullRefresh: {
				container: "#content", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
				down: { //下拉刷新
					style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
					height: 50, //可选,默认50.触发下拉刷新拖动距离,
					auto: false, //可选,默认false.首次加载自动下拉刷新一次
					contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
					contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
					contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
					callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
						//模拟向服务器获取数据的等待时间
						sleep(1000);
						location.reload();
					}
				}
			}
		});

		(function($) {
			info.innerText = '网络未连接，请网络连接后，下拉刷新进行页面刷新！';
			mui.toast('画面初始化！');
		})(mui);

		//模拟线程等待,ms:单位毫秒
		function sleep(ms) {
			return new Promise(resolve => setTimeout(resolve, ms));
		}
	</script>
</body>
</html>

## 注意

1. 内置浏览器技术实现，但手机上未必实现，调研的结果在手机上验证之后，在进行项目代码合并。

2. 关于下拉刷新详细的参数，请参照官网的文档说明：https://dev.dcloud.net.cn/mui/pulldown/

标签：01,网络,plus,str,刷新,网络连接,mui,types
来源： https://www.cnblogs.com/fnym/p/15749205.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

mui技术点01.手机网络连接的判断