基於MUI框架的使用HTML5+實現的二維碼掃描功能並且其結果在webview中的資訊的傳遞
阿新 • • 發佈：2019-01-26
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../../WEB-INF/plug/mui/css/mui.min.css" rel="stylesheet" /> <script src="../../WEB-INF/plug/mui/js/mui.min.js"></script> <style type="text/css"> #bcid { width: 100%; height: 100%; position: absolute; background: #000000; } html, body, div { height: 100%; width: 100%; } .fbt { color: #ffffff; width: 50%; float: left; line-height: 44px; text-align: center; } </style> </head> <body> <header class="mui-bar mui-bar-nav" style="background-color: rgba(221, 221, 221, 0);z-index: 999999;"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title" style="color: #ffffff;">H5webapp二維碼掃描</h1> <span class="mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right" id="turnTheLight"></span> </header> <div id="bcid"> <!--盛放掃描控制元件的div--> </div> <div style="background-color: rgba(221, 221, 221, 0);z-index: 999999" class="mui-bar mui-bar-footer" style="padding: 0px;"> <div class="fbt" onclick="scanPicture();">從相簿選擇二維碼</div> <div class="fbt mui-action-back">取 消</div> </div> <script type="text/javascript"> var height = window.innerHeight + 'px'; //獲取頁面實際高度 var width = window.innerWidth + 'px'; document.getElementById("bcid").style.height = height; document.getElementById("bcid").style.width = width; scan = null; //掃描物件 mui.plusReady(function() { //通過mui初始化掃描 mui.init(); setTimeout("startRecognize()", 300) }); function startRecognize() { //開啟掃描 try { var filter; //自定義的掃描控制元件樣式 var styles = { frameColor: "#29E52C", scanbarColor: "#29E52C", background: "rgba(255,255,255,-20)" } //掃描控制元件構造 scan = new plus.barcode.Barcode('bcid', filter, styles); scan.onmarked = onmarked; scan.onerror = onerror; //掃描錯誤 scan.start(); //開啟關閉閃光燈處理 var flag = false; document.getElementById("turnTheLight").addEventListener('tap', function() { if(flag == false) { scan.setFlash(true); flag = true; } else { scan.setFlash(false); flag = false; } }); } catch(e) { mui.toast("出現錯誤啦:\n" + e) } }; function onerror(e) { //錯誤彈框 alert(e); }; function onmarked(type, result) { //這個是掃描二維碼的回撥函式，type是掃描二維碼回撥的型別 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; } smresult(result); }; // 從相簿中選擇二維碼圖片 function scanPicture() { //可以直接識別二維碼圖片 plus.gallery.pick(function(path) { plus.barcode.scan(path, onmarked, function(error) { //plus.nativeUI.alert("無法識別此圖片"); mui.toast("無法識別此圖片"); }); }, function(err) { plus.nativeUI.alert("Failed: " + err.message); }); } //關閉掃碼頁面 function closeSm() { scan.close(); plus.webview.currentWebview().close('none'); } //結果處理 function smresult(result) { var type = localStorage.getItem("type"); if(type == "addfile") { //新增檔案掃碼處理 if(result) { var str = '<li><input class="file-num" value="' + result + '" type="text" /><i onclick="remove(this)">╳</i></li>' var wn = plus.webview.currentWebview(); //獲取當前視窗的WebviewObject物件，即B var wvA = wn.opener(); //獲取當前視窗的建立者，即A wvA.evalJS("addNew('" + str + "')"); //執行父視窗中的方法 A中的addNew方法 plus.webview.currentWebview().close(); //掃碼成功，關閉當前webview } else { scan.start(); } } else if(type == "getgezi") { //掃碼格子獲取格子資訊 alert("這是個格子掃碼"); localStorage.setItem("ifFrist", "none"); //設定不是首次呼叫 } else if(type == "sys") { alert("這是個查詢掃碼"); scan.start(); } } </script> </body> </html>