mui 二维码扫描功能
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表示每次都创建一个新页面。
