混合APP 二维码扫描

最新推荐文章于 2019-11-08 15:30:16 发布

Hom_mi

最新推荐文章于 2019-11-08 15:30:16 发布

阅读量551

点赞数

本文链接：https://blog.csdn.net/qq_38921534/article/details/82383411

版权

<!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></title>
		<link rel="stylesheet" href="css/mui.css" />
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript" src="js/mui.min.js" ></script>
	   <link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8"/>
		<style type="text/css" media="screen">

.hdata {
	color: #e1673e;	
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.header{
	width:200px;
	
	text-align: center;
	margin-top:0px;
}
.h_ul {
	 margin-top:0px;
}
.btn1{
	margin-left:0px;
	margin-top:0;
	
	background: #FFB73d;display: inline-block;color: #fff;width:100px;height:45px;line-height:30px;text-align: center;border-radius:0.5em;margin-top:45px;
}

img {
    width: 50%;
    margin-left:-20px;
    margin-top: 33px;
    margin-bottom: 17px;
    position: relative;
    left: 84px;
    top: 0px;
    
}
.cont{
	text-align: center;
	color:white;
	margin-top:5px;
}
.cont {
	
	
}
.btn_t{
	background:black;
}
.submit{
	width:100%;
	margin-top:40px;
}
		</style>
	</head>
	</head>

	<body>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
			var img = null;

var blist = [];

 var godd = 0;
//扫一扫读取数据
function scaned(t, r, f){

	
	var d = new Date();
	var h=d.getHours(),m=d.getMinutes(),s=d.getSeconds(),ms=d.getMilliseconds();

	if(h < 10){ h='0'+h; }
	if(m < 10){ m='0'+m; }
	if(s < 10){ s='0'+s; }
	if(ms < 10){ ms='00'+ms; }
	else if(ms < 100){ ms='0'+ms; }
	var ts = '['+h+':'+m+':'+s+'.'+ms+']';
	var li=null,hl = document.getElementById('history');
	if(blist.length > 0){
		li = document.createElement('li');
		li.className = 'ditem';
		hl.insertBefore(li, hl.childNodes[0]);
	} else{
		li = document.getElementById('nohistory');
	}
	li.id = blist.length;

	var html = '<li class="div_data " id="zhi">条形码:';
    html +='<span class="li_array">'+r+'</span>';
	html += ',时间:'+h+':'+m;
	html += '</li>';
	li.innerHTML = html;

	li.setAttribute('onclick', 'selected(id)');
	blist[blist.length] = {type:t,result:r,file:f};

    document.getElementsByClassName('fuzhi').value=r;

}
function cleanHistroy(){
	if(blist.length > 0){
		var hl = document.getElementById('history');
		hl.innerHTML = '<li id="nohistory" class="ditem" onclick="onempty();">无历史记录	</li>';

	   
	}
	plus.io.resolveLocalFileSystemURL('_doc/barcode/', function(entry){
		entry.removeRecursively(function(){
			// Success
		}, function(e){
			//alert( "failed"+e.message );
		});
	});
}
		</script>
	    <header class="mui-bar mui-bar-nav">
	        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	        <h1 class="mui-title">扫描测试</h1>
	        
	    </header>
	  <div style="margin-top:50px;"></div>
	  <div class="button" onclick="clicked('barcode_scan2.html',true,true)" style="background:#4eb4fe;">点击扫描条形码</div>
		
			<ul id="history" class="dlist" style="text-align:left;">
				<li id="nohistory" class="ditem" onclick="onempty()">历史记录	</li>
			</ul>
<div class="button button-waring" onclick="cleanHistroy()" style="margin-top:px;">清空历史记录</div>
	</body>

</html>

打开摄像头页面：

<!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 type="text/javascript">
var ws=null,wo=null;
var scan=null,domready=false,bCancel=false;
// H5 plus事件处理
function plusReady(){
	if(ws||!window.plus||!domready){
		return;
	}
	// 获取窗口对象
	ws=plus.webview.currentWebview();
	wo=ws.opener();
	// 开始扫描
	ws.addEventListener('show',function(){
		scan=new plus.barcode.Barcode('bcid',[plus.barcode.QR,plus.barcode.EAN8,plus.barcode.EAN13],{frameColor:'#00FF00',scanbarColor:'#00FF00'});
	    scan.onmarked=onmarked;
	    scan.start({conserve:true,filename:'_doc/barcode/'});
	});
	// 显示页面并关闭等待框
    ws.show('pop-in');
    wo.evalJS('closeWaiting()');
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready', plusReady, false);
}
// 监听DOMContentLoaded事件
document.addEventListener('DOMContentLoaded', function(){
	domready=true;
	plusReady();
}, false);
// 二维码扫描成功
function onmarked(type, result, file){
    switch(type){
    	case plus.barcode.QR:
    	type = 'QR';
    	break;
    	case plus.barcode.EAN13:
    	type = 'EAN13';
    	break;
    	case plus.barcode.EAN8:
    	type = 'EAN8';
    	break;
    	default:
    	type = '其它'+type;
    	break;
    }
    result = result.replace(/\n/g, '');
    wo.evalJS("scaned('"+ type +"','"+ result +"','"+ file +"');");
    back();
}
// 从相册中选择二维码图片 
function scanSwitch() {
    if(bCancel){
    	scan.start({conserve:true,filename:'_doc/barcode/'});
    	btCancel&&(btCancel.innerText='暂　停');
    }else{
    	scan.cancel();
    	btCancel&&(btCancel.innerText='开　始');
    }
    bCancel=!bCancel;
}
		</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: #4eb4fe;
	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 id="btCancel" class="fbt" onclick="scanSwitch()">暂　停</div>
		</footer>
	</body>
</html>