<!DOCTYPE html> <html> <head lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="false" name="twcClient" id="twcClient"> <meta content="no-cache,must-revalidate" http-equiv="Cache-Control"> <meta content="no-cache" http-equiv="pragma"> <meta content="0" http-equiv="expires"> <!--允許全屏模式--> <meta content="yes" name="apple-mobile-web-app-capable" /> <!--指定sari的樣式--> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta content="telephone=no" name="format-detection" /> <title>掃一掃</title> <!-- <link href="../css/mui.min.css" rel="stylesheet" />--> <link rel="stylesheet" href="../css/default.css"> <style> .mui-bar-nav { top: 0; -webkit-box-shadow: 0 1px 6px #ccc; box-shadow: 0 1px 6px #ccc; } .mui-bar { position: fixed; z-index: 999; right: 0; left: 0; height: 44px; padding-right: 10px; padding-left: 10px; border-bottom: 0; background-color: #f7f7f7; -webkit-box-shadow: 0 0 1px rgba(0,0,0,.85); box-shadow: 0 0 1px rgba(0,0,0,.85); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .mui-pull-right { float: right; } .mui-bar-footer { bottom: 0; } #bcid{ width: 100%; height: 80%; position: absolute; top:1rem; z-index: 1; } .fbt{ color: #0E76E1; width: 50%; background-color: #ffffff; float: left; line-height: 44px; text-align: center; } </style> </head> <body> <header class="mui-bar mui-bar-nav" style="background-color: #ffffff;"> <span class="mui-pull-right" style="padding:.5rem 0;" id="turnTheLight">開燈</span> </header> <div> <div id="bcid"> <!--盛放掃描控件的div--> </div> </div> <div class="mui-bar mui-bar-footer" style="padding: 0px;"> <div class="fbt" onclick="scanPicture();">從相冊選擇二維碼</div> <div class="fbt" onclick="scanClose();">取 消</div> </div> </body> <script src="../js/mui.min.js"></script> <script type="text/javascript" > scan = null;//掃描對象 mui.plusReady(function () { //通過mui初始化掃描 mui.init(); startRecognize();//開始掃描 }); function startRecognize(){ //開啟掃描方法 try{ var filter; //自定義的掃描控件樣式 var styles = {frameColor: "#29E52C",scanbarColor: "#29E52C",background: ""} //掃描控件構造 scan = new plus.barcode.Barcode('bcid',filter,styles); scan.onmarked = onmarked;////掃描完畢后的回調 scan.onerror = onerror; //掃描錯誤 scan.start(); }catch(e){ alert("出現錯誤啦:\n"+e); } }; //打開關閉閃光燈處理 var flag = false; document.getElementById("turnTheLight").addEventListener('tap',function(){ if(flag == false){ scan.setFlash(true); flag = true; }else{ scan.setFlash(false); flag = false; } }); // 從相冊中選擇二維碼圖片 function scanPicture() { //可以直接識別二維碼圖片 plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert( "無法識別此圖片" ); }); },function(err){ plus.nativeUI.alert("Failed: "+err.message); }); } //這個是掃描二維碼的回調函數，type是掃描二維碼回調的類型 function onmarked( type, result ) { var text = ''; switch(type){ //QR,EAN13,EAN8都是二維碼的一種編碼格式,result是返回的結果 case plus.barcode.QR: text = 'QR: '; break; case plus.barcode.EAN13: text = 'EAN13: '; break; case plus.barcode.EAN8: text = 'EAN8: '; break; } scan.close(); javascript:window.history.back(-1); localStorage.value = [result]; /* window.location.href = "single_code.html?id="+result; */ /* alert( text + " : "+ result+'111' );//掃描完畢后的回調 */ }; //關閉控件 function scanClose(){ scan.close(); javascript:window.history.back(-1); } </script> </html>
1：必須在app里運行（可以使用hbuilder真機測試）；
2：頁面的樣式特別不好調；
3：可以參考h5+的文檔