mui实现扫一扫二维码功能(必须用hbulider打包)

<!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">
.mask {
	height: 90%;
	width: 100%;
	position: absolute;
	top: 0;
	background: #000000;
}

.mask2 {
	height: 55px;
	width: 100%;
	position: fixed;
	bottom: 0;
	background: #000000;
}

body {
	margin: 0;
	background: #000000;
}

.scan {
	width: 50%;
	height: 55px;
	background: #000;
	float: left;
	text-align: center;
}

.scan img {
	width: 30px;
	height: 30px;
}

.scan span {
	display: block;
	color: #fff;
	font-size: 14px;
}
</style>
</head>

<body>
	<div class="mask" id="mask">
		<div class="title" style="width:100%;background:#ccc;">
			<div style="padding:.8rem 0;text-indent:1rem;" onclick="scanClose()">返回</div>
		</div>
	</div>
	<div class="mask2" id="mask2">
		<div id="scan1" class="scan">
			<img src="../image/click.png" /> <span id=""> 相册 </span>
		</div>
		<div id="scan2" class="scan">
			<img src="../image/scan_off.png" /> <span id=""> 手电筒 </span>
		</div>
	</div>
	<script src="../js/mui.js"></script>
	<script type="text/javascript">
			var scan;
						if(window.plus) {
				plusready();
				
			} else {
				document.addEventListener('plusready', plusready, false);
			}
			
			function onmarked(type, result) { //回调
                      plus.webview.currentWebview().close();//关闭当前页面
                        scan.close();//结束后关闭控件
                        //result是返回结果 } function plusready() { setTimeout(function() { scan = new plus.barcode.Barcode('mask'); scan.onmarked = onmarked; scan.start(); }, 200); //处理返回事件 /* plus.key.addEventListener('backbutton', function() { plus.webview.currentWebview().close(); }) */ } //闪光灯 document.querySelector('#scan2 img').addEventListener('click', function() { if(/scan_off.png/.test(this.src)) { this.src = "../image/scan_on.png"; scan.setFlash(true); } else { this.src = "../image/scan_off.png"; scan.setFlash(false); } }) //添加本地图片 document.querySelector('#scan1 img').addEventListener('click', function() { plus.gallery.pick(function(path) { console.log(path); console.log(JSON.stringify(path)); plus.barcode.scan(path, onmarked, function(error) { plus.nativeUI.alert(JSON.stringify(error)); }); }, function(err) { plus.nativeUI.alert('Failed: ' + err.message); }); }) //关闭窗口 function scanClose(){ plus.webview.currentWebview().close(); javascript:window.history.back(-1); } </script> </body> </html>

  1使用的话可以直接点击按钮跳转到这个页面;

  2如果需要将扫描结果显示到其他页面个人不建议传参,可以跟要显示的页面合并为一个页面;

  3plus对象只能使用hbuilder打包才可以使用;

  4公司有安卓,ios的话还是让他们做吧!!!!!!

posted @ 2018-09-11 16:28  前端凯凯  阅读(525)  评论(0编辑  收藏  举报