mui掃描頁

做了一個簡單的二維碼通用頁面,

我也只在網上找的代碼,然後優化後,並且修改成 我項目需要用到的結構。

掃碼本來也很簡單。

在哪裏用到掃描,只需要設置跳轉頁面,就可以了,掃描到數據,可以直接返回本頁操作、分離數據。

只需要有setcard_number(res)函數 就可以獲得想要的數據。

<!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" type="text/css" href="../css/mui.css"/>
		<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" id="close">取  消</div>
			<div class="fbt" id="select" >從相冊選擇二維碼</div>
		</footer>
	</body>
	
   
    <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var scan = null;//掃描對象  
        mui.init();
		window.onload = function(){
			mui.init();
			 mui.plusReady(function () {  
			 	//掃描
				startRecognize(); 
	        }); 
	        //監聽取消
	         g("close").addEventListener("tap",function(e){
							mui.back();
			})
	         //監聽相冊選擇
			g("select").addEventListener("tap",function(e){
				scanPicture();
			})
			
		}
		function startRecognize(){  
           try{  
	            var filters;  
	            //自定義的掃描控件樣式  
	            var styles = {frameColor: "#0000FF",scanbarColor: "#0000FF"};
	            //掃描控件構造  
	            scan = new plus.barcode.Barcode('bcid',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 = '';  
            //獲取父類對象
            var ws=plus.webview.currentWebview().opener();
            //調用父類函數,只要父類有 這個函數
            ws.evalJS("setcard_number('"+ result +"');");
            //關閉
			mui.back();
        };    
        // 從相冊中選擇二維碼圖片   
        function scanPicture() {  
            plus.gallery.pick(function(path){  
                plus.barcode.scan(path,onmarked,function(error){  
                    plus.nativeUI.alert( "無法識別此圖片" );  
                });  
            });  
        }  
		</script>
</html>

如果感興趣,也可以關注我的微信公衆號,因爲剛起步,所以只有幾篇文章,之後會慢慢更新。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章