问题说明
手机未连接网络，app访问后台接口时出现错误。
解决方案
每个画面初始时，判断网络是否连接，网络如果处于断网阶段，弹出窗口信息直接退出app，或者画面显示[未联网]消息提示，提示用户刷新网络（比如：点击刷新按钮，或者下拉等操作）。
详细代码
直接退出app
-
检测是否连接网络
//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; } } - 调用及处理
mui.plusReady(function() { //如果未连接网络，退出app（针对mui框架） if (!(getSysInfo())) { alert('网络连接失败，请退出并重置网络！'); plus.runtime.quit();//退出app（针对mui框架） return; } });
画面显示提示按钮，让用户手动刷新
-
点击按钮，进行画面刷新
<!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> - 下划画面刷新
<!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>注意
- 内置浏览器技术实现，但手机上未必实现，调研的结果在手机上验证之后，在进行项目代码合并。
- 关于下拉刷新详细的参数，请参照官网的文档说明：https://dev.dcloud.net.cn/mui/pulldown/
