6.二維碼掃描 · js常用代碼片段

~~~ <!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.min.css" type="text/css" charset="utf-8" /> <style type="text/css"> #bcid { width: 100%; position: absolute; top: 50px; 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: 100%; height: 100%; background-color: #F2F2F2; color: #000000; } .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="quit" onclick="back()">取消代付驗證</div> </footer> </body> <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var wo; document.addEventListener('DOMContentLoaded', function() { mui.plusReady(function() { plus.screen.lockOrientation("portrait-primary"); var ws = plus.webview.currentWebview(); wo = ws.opener(); ws.addEventListener('show', function() { scan = new plus.barcode.Barcode('bcid'); scan.onmarked = onmarked; scan.start({ conserve: true, }); }, false); }) }, false); // 二維碼掃描成功 function onmarked(type, result) { 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 + "');"); //父頁面定義函數 back(); } function back(){ mui.back(); } </script> </html> ~~~