1. 程式人生 > >H5+ 二維碼掃描功能

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();