叶南淮
叶南淮
  • 发布:2019-07-10 08:54
  • 更新:2019-10-31 15:33
  • 阅读:2482

H5扫码多次后扫码界面黑屏卡死

分类:HTML5+

用的官方demo修改了下,从主界面到扫描界面再打开新界面。多次扫描之后扫描界面会卡死,后台显示扫描的url是识别出来的,也没有报错。 用的mui.openwindow,createNew:true加上了,scan.close也写了。

以下是扫码界面

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="utf-8"/>  
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
		<meta name="HandheldFriendly" content="true"/>  
		<meta name="MobileOptimized" content="320"/>  
		<title>Hello H5+</title>  
		<script type="text/javascript" src="../js/common.js"></script>  
		<script src="../js/mui.min.js"></script>  
		<script type="text/javascript">  
			  
var ws=null,wo=null;  
var scan=null,domready=false;  
// H5 plus事件处理  
function plusReady(){  
	if(ws||!window.plus||!domready){  
		return;  
	}  
	// 获取窗口对象  
	ws=plus.webview.currentWebview();  
	wo=ws.opener();  
	// 开始扫描  
	startRecognize();  
//	ws.addEventListener('show', function(){  
//		scan=new plus.barcode.Barcode('bcid');  
//	    scan.onmarked=onmarked;  
//	    scan.start({conserve:true,filename:'_doc/barcode/'});  
//	}, false);  
//	// 显示页面并关闭等待框  
//  ws.show('pop-in');  
    //wo.evalJS('closeWaiting()');  
}  
if(window.plus){  
	plusReady();  
}else{  
	document.addEventListener('plusready', plusReady, false);  
}  
  
function startRecognize() {    
    scan = new plus.barcode.Barcode('bcid');    
    scan.onmarked = onmarked;     
    scan.start();    
}    
// 监听DOMContentLoaded事件  
document.addEventListener('DOMContentLoaded', function(){  
	domready=true;  
	plusReady();  
}, false);  
// 二维码扫描成功  
function onmarked(type, result, file){  
    
//  result = result.replace(/\r\n/g, '');  
//  wo.evalJS("scaned('"+ type +"','"+ result +"','"+ file +"');");  
//  back();  
     
   scan.close();	  
	mui.openWindow({ //这个执行不成功。但是有时候打开扫码功能不立刻扫码,等一会再扫码的话就可以跳转。。。  
								url: 'C.html',  
								createNew:true,  
								id: 'info',  
								extras: {  
									result: result  
								},  
								styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置  
									titleNView: { // 窗口的标题栏控件  
										buttons: [{  
											text: '\ue63c',  
											float: 'left',  
											onclick: clickButton,  
											fontSrc:'_www/iconfont/iconfont.ttf'  
										}],  
										  
										titleText: "标题栏", // 标题栏文字,当不设置此属性时,默认加载当前页面的标题,并自动更新页面的标题  
										titleColor: "#000000", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"  
										titleSize: "17px", // 字体大小,默认17px  
										backgroundColor: "#43cda9", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"  
										progress: { // 标题栏控件的进度条样式  
											color: "#00FF00", // 进度条颜色,默认值为"#00FF00"    
											height: "2px" // 进度条高度,默认值为"2px"           
										},  
										splitLine: { // 标题栏控件的底部分割线,类似borderBottom  
											color: "#CCCCCC", // 分割线颜色,默认值为"#CCCCCC"    
											height: "1px" // 分割线高度,默认值为"2px"  
										}  
									}  
								}  
							});  
							  
					scan.close();		  
							  
						   
}  
// 从相册中选择二维码图片   
function scanPicture(){  
    plus.gallery.pick(function(path){  
	    plus.barcode.scan(path,onmarked,function(error){  
			plus.nativeUI.alert('无法识别此图片');  
		});  
    }, function(err){  
        console.log('Failed: '+err.message);  
    });  
}  
  
function clickButton() {  
				mui.back();  
			};  
  
		</script>  
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>  
		<style type="text/css">  
#bcid {  
	width: 100%;  
	position: absolute;  
	top: 0px;  
	bottom: 44px;  
	text-align: center;  
}  
.tip {  
	color: #FFFFFF;  
	font-weight: bold;  
	text-shadow: 0px -1px #103E5C;  
}  
footer {  
	width: 100%;  
	height: 44px;  
	position: absolute;  
	bottom: 0px;  
	line-height: 44px;  
	text-align: center;  
	color: #FFF;  
}  
.fbt {  
	width: 50%;  
	height: 100%;  
	background-color: #FFCC33;  
	float: left;  
}  
.fbt:active {  
  	-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);  
	box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);  
}  
		</style>  
	</head>  
	<body style="background-color: #000000;">  
		<div id="bcid">  
			<div style="height:40%"></div>  
			<p class="tip">...载入中...</p>  
		</div>  
		<footer>  
			<!--<div class="fbt" onclick="back()">取  消</div>  
			<div class="fbt" onclick="scanPicture()">从相册选择二维码</div>-->  
		</footer>  
	</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>  
		<style type="text/css">  
  
		</style>  
	</head>  
  
	<body>  
		<p id="data"></p>  
		<script src="../js/mui.min.js"></script>  
  
		<script type="text/javascript" src="../js/custom/ajax.js"></script>  
		<script type="text/javascript" src="../js/custom/md5.js"></script>  
		<script type="text/javascript" src="../js/custom/tripledes.js"></script>  
		<script type="text/javascript" src="../js/custom/mode-ecb.js"></script>  
		<script type="text/javascript">  
			var key = "6Ta4OaHZdpA=";  
			if(window.plus) {  
				plusready();  
			} else {  
				document.addEventListener('plusready', plusready, false);  
			}  
  
			function plusready() {  
				var w = plus.webview.currentWebview();  
				var data = w.result;  
				//处理返回事件  
				var data_jmh = decryptByDES(data, key); //解密  
  
				var data_fg = data_jmh.split("***"); //解密分割  
				var data_g = data.split("***"); //没加密解密的分割  
				if(data_fg.length < 5) {  
					alert("无法识别");  
  
				} else {  
  
					var d1 = data_fg[2].split('=');  
					d1.shift();  
					var str = d1.join('='); //拿到链接  
					console.log("结果" + str);  
					var date = data_fg[4].split('='); //endtime  
  
					var day = date[1]; //具体时间  
					var date_ = new Date(day);  
					var today = new Date();  
					if(date_ > today) {  
						window.location.href = str;  
					} else {  
						alert("二维码已失效");  
					}  
  
					//处理返回事件  
					plus.key.addEventListener('backbutton', function() {  
						plus.webview.currentWebview().close();  
						  
					})  
				}  
  
			}  
		</script>  
	</body>  
  
</html>  
  

2019-07-10 08:54 负责人:无 分享
已邀请:
DCloud_App_Array

DCloud_App_Array

请说明在什么设备出现此问题?
提供复现问题的示例应用。

1***@qq.com

1***@qq.com

楼主解决没,我也是此问题。
如果扫码,可以多次用,不扫码后退会卡死
具体操作:打开扫一扫页,不扫码后退,再打开扫一扫页,再次后退。2次就卡死。

  • 叶南淮 (作者)

    没,我倒是不扫码就不会卡 扫了码才卡


    2019-08-15 16:29

  • 叶南淮 (作者)

    下面传了demo


    2019-10-31 15:34

c***@163.com

c***@163.com

哎,我这也是经常黑屏,这半个月了,楼主解决了没

  • 叶南淮 (作者)

    我下面传了demo


    2019-10-31 15:33

叶南淮

叶南淮 (作者)

已解决 最后还是百度到了一个示例,没有用官方的例子

function plusready() {
setTimeout(function() {
scan = new plus.barcode.Barcode('mask');
scan.start();
scan.onmarked = function(type, result) {
if(result) {
//alert(result);
scan.close();
var w = plus.webview.create('C.html', 'C.html', {
'titleNView': {
'backgroundColor': '#349eff',
'titleText': '',
'titleColor': '#FFFFFF',
autoBackButton: true,
progress: { // 标题栏控件的进度条样式
color: "#00FF00", // 进度条颜色,默认值为"#00FF00"
height: "2px" // 进度条高度,默认值为"2px"
}
}
}, {
barcode_data: result
});
w.show('pop-in', '300ms');
}
};
}, 200);

			//处理返回事件  
			plus.key.addEventListener('backbutton', function() {  
				plus.webview.currentWebview().close();  
			})  
		}
叶南淮

叶南淮 (作者)

以下为demo

该问题目前已经被锁定, 无法添加新回复