描述一下我遇到的问题,首次打开二维码扫描页面正常显示,返回后扫描页面会覆盖到第一个页面上。再次打开二维码扫描页面,二维码扫描框在左上角出现,而且特别小。请问老铁如何解决该问题~~
首页代码如下:
<!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>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<div class="mui-content">
<ul id="list" class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="mian/erweima.html">
二维码
</a>
</li>
</ul>
</div>
</body>
</html>
二维码页面代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<script src="../js/mui.min.js"></script>
<title>二维码扫描</title>
<style>
html,
body {
background-color: #efeff4;
}
</style>
</head>
<body>
<div class="mui-content">
<!--<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>-->
<div id="bcid" style="width: 100%;position: absolute;top: 0;bottom: 0;text-align: center;">
<div style="height:40%"></div>
</div>
</div>
</body>
<script>
mui.init({
swipeBack: true, //启用右滑关闭功能
beforeback: function() {
console.log("beforeback");
startRecognize();
scan.cancel();
scan.close();
return true;
}
});
document.addEventListener("plusready", onPlusReady, false);
// 扩展API加载完毕,现在可以正常调用扩展API
function onPlusReady() {
console.log("onPlusReady");
}
mui.plusReady(function() {
startRecognize();
scan.start();
console.log("mui.plusReady");
});
var scan = null;
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
// 创建扫描控件
function startRecognize() {
scan = new plus.barcode.Barcode('bcid');
scan.onmarked = onmarked;
scan.onerror=onerroe;
}
// 条码识别成功事件
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;
}
console.log(result);
//var result_json=eval(result);
//console.log(result.videoid)
mui.openWindow({
id: 'zxjy_xq',
url: '../common/zxjy_xq.html',
extras: {
params_first: 1
}
});
}
function onerroe(error){
var code = error.code; // 错误编码
var message = error.message; // 错误描述信息
console.log("code="+code+";message="+message);
}
// 开始扫描
// document.getElementById("startScan").addEventListener('tap', function() {
// startRecognize();
// scan.start();
// })
// // 取消扫描
// document.getElementById("cancelScan").addEventListener('tap', function() {
// startRecognize();
// scan.cancel();
// })
// // 开启和关闭闪光灯
// document.getElementById("setFlash").addEventListener('tap', function() {
// startRecognize();
// isOpen = !isOpen;
// if(isOpen) {
// scan.setFlash(true);
// } else {
// scan.setFlash(false);
// }
// })
</script>
</html>
1***@qq.com
同遇
2019-03-01 16:25
1***@qq.com
我直接在本页面进行弹出一个层开启扫描二维码。并没有去跳转页面。在扫描完毕,关闭这个层的同时,关闭二维码,cancel,close都用了,都没用,尴尬
2019-03-01 16:27
1525941857QQ
我现在也没找到解决办法,去手机上安装了官方示例HelloH5,小米Redmi Note 7仍然有这个问题,看来官方的就没解决。。
2019-03-01 17:12