H5+ 二維碼掃描功能
二維碼在生活中的使用越來越廣泛,APP開發中,也越來越多的需求需要用到二維碼的掃描功能,以下就針對h5+的二維碼掃描功能做一些簡單的介紹;
1. var bc = new plus.barcode.Barcode( id, filters, styles ); 建立二維碼掃描物件
id: 條碼識別控制元件在Webview視窗的DOM節點的id值
filters: 要識別的條碼型別過濾器,為條碼型別常量陣列,條碼識別引擎可支援多種二維碼及一維碼型別,預設情況支援QR、EAN13、EAN8三種類型。
styles :
- frameColor: )掃描框顏色
- scanbarColor:掃描條顏色
- background: (String 型別 )條碼識別控制元件背景顏色
2. bc.start( options ); 開始條碼識別
options:條碼識別控制元件掃描條碼的引數
- conserve: 是否儲存成功掃描到的條碼資料時的截圖
- filename: 儲存成功掃描到的條碼資料時的圖片路徑
- vibrate:成功掃描到條碼資料時是否需要震動提醒
- sound:成功掃描到條碼資料時播放的提示音型別 可取值: “none” - 不播放提示音; “default” 播放預設提示音(5+引擎內建)
3. bc.cancel(); 結束條碼識別
- bc.close(); 關閉條碼識別控制元件,釋放控制元件佔用系統資源,呼叫close方法後控制元件物件將不可使用。
- bc.setFlash( true); 是否開啟閃光燈
- 條碼識別成功回撥
bc.onmarked = function ( type, code, file ) {
}
- type:識別到的條碼型別 Number型別的值
- code:識別到的條碼資料 從條碼圖片中掃描出的資料內容,字串採用UTF8編碼格式。
- file:識別到的條碼圖片檔案路徑
7. 條碼識別失敗 回撥函式
bt.onerror = function ( error ) {
}
常見問題:
1.二維碼掃描成功之後,當再次返回到掃描介面的時候,不能重新進行掃描;
原因:掃描成功之後,掃描介面已經變成了掃描成功的狀態,當你再次但回到這個介面的時候,依然記錄的是之前掃描成功的狀態,所以不能再次進行掃描;
解決辦法:在掃描成功之後強制重新整理介面;
var bc = new plus.barcode.Barcode('barcode');
bc.setFlash(false);
bc.onmarked=function(type, result){//掃描成功
plus.webview.show('barcodeSucceed','pop-in',100);
mui.fire(plus.webview.getWebviewById('barcodeSucceed'),'showResult'{result:result});
window.setTimeout(function(){
plus.webview.currentWebview().reload();
},1000);
}
bc.start();