mui技術點01.手機網路連線的判斷
阿新 • • 發佈：2021-12-30
# 問題說明
手機未連線網路，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/