mui 掃一掃識別二維碼 以及多次掃碼后從結果頁返回時黑屏問題解決
掃一掃頁面全部代碼
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/index.css" />
<style type="text/css">
.mui-bar {
height: 3rem;
line-height: 2.8rem;
color: #fff;
background: #000;
}
.mui-bar h1 {
color: #fff;
}
.code {
position: absolute;
top:3rem;
left: 0;
width: 100%;
height: 100%;
background: #000000;
}
</style>
</head>
<body>
<header class="mui-bar">
<a class="mui-pull-left" onclick="goReturn()">返回</a>
<h1 class="mui-title">二維碼掃描</h1>
<span class="mui-spin mui-pull-right" onclick="scanPicture();">相冊</span>
</header>
<div id="code" class="code" style="">
<!--盛放掃描控件的div-->
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
scan = null; //掃描對象
mui.plusReady(function() {
mui.init();
startRecognize();
});
function startRecognize() {
try {
var filters;
//自定義的掃描控件樣式
var styles = {
frameColor: "#0000FF",
scanbarColor: "#0000FF"
};
//掃描控件構造
scan = new plus.barcode.Barcode('code', filters, styles);
scan.onmarked = onmarked;
scan.onerror = onerror;
scan.start();
} catch(e) {
mui.alert("出現錯誤啦:\n" + e);
}
};
function onerror(e) {
miu.alert(e);
};
function onmarked(type, result) {
var text = '';
switch(type) {
case plus.barcode.QR:
text = 'QR: ';
break;
case plus.barcode.EAN13:
text = 'EAN13: ';
break;
case plus.barcode.EAN8:
text = 'EAN8: ';
break;
}
// plus.runtime.openURL(result);
scan.cancel();//結束條碼識別
scan.close(); //關閉條碼識別控件
plus.runtime.openURL("add.html?"+"giveId="+ result);
};
// 從相冊中選擇二維碼圖片
function scanPicture() {
plus.gallery.pick(function(path) {
plus.barcode.scan(path, onmarked, function(error) {
plus.nativeUI.alert("無法識別此圖片");
});
});
}
//返回關閉條碼識別控件不然識別控件會一直顯示
function goReturn() {
scan.cancel();//結束條碼識別
scan.close(); //關閉條碼識別控件
mui.back();
}
//子頁面按鍵返回
document.addEventListener('plusready', function() {
var webview = plus.webview.currentWebview();
plus.key.addEventListener('backbutton', function() {
scan.close(); //關閉掃碼條件
webview.canBack(function(e) {
if(e.canBack) {
webview.back();
} else {
webview.close();
}
})
});
});
</script>
</body>
</html>
黑屏的原因是打開的不是一個新頁面是之前緩存的頁面，mui.openWindow里面的createNew默認為false，因為一直使用同一個頁面這個帶有緩存頁面所以會出現黑屏bug
這個createNew默認為false有時候還會導致同一個頁面第二次點擊時沒有反應 解決方法把它變為true即可。
以下代碼意思是打開一個新頁面
mui.openWindow({ url: "wd.html", createNew:true });
createNew:false //是否重復創建同樣id的webview，默認為false:不重復創建，直接顯示 這里設為true表示每次都創建一個新頁面。