Barcode的一個實現案例
一、簡介Barcode模組管理條碼掃描，提供常見的條碼（二維碼及一維碼）的掃描辨識功能，可呼叫裝置的相機對條碼圖片掃描進行資料輸入。透過plus.barcode可取得條碼碼管理物件。
二、實現的效果三、實現程式碼<!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=css/mui.min.css rel=stylesheet /> <script src=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: #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;> <a class=mui-action-back mui-icon mui-icon-left-nav mui-pull-left></a> <h1 class=mui-title style=color: #0E76E1;>物品二維碼掃描</h1> <span class=mui-icon mui-icon-spinner-cycle mui- spin mui-pull-right id=turnTheLight></span> </header> <div id=bcid> <!--盛裝掃描控制項的div--> </div> <div 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> scan = null;//掃描物件mui.plusReady(function () { 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(); //開啟關閉閃光燈處理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){ alert(出現錯誤囉:/n+e); } }; function onerror(e){ alert(e); }; function onmarked( type, result ) { var text = ''; switch(type){ case plus.barcode.QR: text = 'QR: '; break; case plus.barcode.EAN13: text = 'EAN13: '; break; case plus.barcode.EAN8: text = 'EAN8: ' ; break; } alert( text + : + result ); }; // 從相簿中選擇二維碼圖片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); }); } </script> </body> </html>三、做的過程中遇見的問題a，div佔滿整個頁面
1，此div寬高皆為100%，父級元素的高度也為此(依次類別推直至根節點)，或此div的position為absolute;
2，可採用js動態設定頁面寬高
var height = window.innerHeight + 'px';//取得頁面實際高度var width = window.innerWidth + 'px'; document.getElementById(bcid).style.height= height; document.getElementById(bcid).style. width= width;
b,掃描控制有上下邊距
採用填充黑色來淡化視覺上面的差異，未實際解決，（如果你解決的話，歡迎留言，謝謝）
總結以上所述是小編給大家介紹的基於MUI框架使用HTML5實現的二維碼掃描功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持！