摘要：需求明確開啟常見的條碼二維碼及一維碼的掃描識別功能，可調用設備的攝像頭對條碼圖片掃描進行數據輸入。通過可獲取條碼碼管理對象。知識點明確模塊提供開啟攝像頭掃描功能。載入中取消退出頁面從相冊選擇二維碼

需求明確

開啟常見的條碼（二維碼及一維碼）的掃描識別功能，可調用設備的攝像頭對條碼圖片掃描進行數據輸入。通過plus.barcode可獲取條碼碼管理對象。

知識點明確

Barcode模塊:plus.barcode,提供開啟攝像頭掃描功能。
Gallery模塊:plus.gallery，提供讀取相冊二維碼圖片功能。
效果展示：

實現步驟

創建條碼掃描識別控件實例對象,涉及到Barcode模塊,具體參數設置可參考5+ API Barcode
在plusReady事件觸發之后創建一個Barcode實例對象，此對象提供四個方法：
start: 開始條碼識別
cancel: 結束條碼識別
close: 關閉條碼識別控件
setFlash: 是否開啟閃光燈
和兩個事件：
onmarked: 條碼識別成功事件
onerror: 條碼識別錯誤事件

function plusReady() {
    if(ws || !window.plus || !domready) {
        return;
    }
    // 獲取窗口對象
    ws = plus.webview.currentWebview();
    // 開始掃描
    ws.addEventListener("show", function() {
        scan = new plus.barcode.Barcode("bcid");
        // 定義識別成功事件
        scan.onmarked = onmarked;
        // 定義開始條碼識別
        scan.start({
            conserve: true, // 是否保存成功掃描到的條碼數據時的截圖
            filename: "_doc/barcode/"  // 保存成功掃描到的條碼數據時的圖片路徑
        });
    }, false);
    // 顯示頁面并關閉等待框
    ws.show("pop-in");
}

// 二維碼掃描成功

function onmarked(type, result, file) {
    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(/
/g, "");
    plus.nativeUI.alert("掃描結果:" + JSON.stringify(result), function() {
        console.log("掃描成功")
    }, "helloW2A", "OK");
    back();
}

2.從相冊中選擇圖片識別,涉及到Gallery模塊，具體參數設置可參考5+ API：Gallery

// 從相冊中選擇二維碼圖片** 
function scanPicture() {
    plus.gallery.pick(function(path) {
        plus.barcode.scan(path, onmarked, function(error) {
            plus.nativeUI.alert("無法識別此圖片");
        });
    }, function(err) {
        console.log("Failed: " + err.message);
    });
}

3.DOM結構參考

    
    

        

        
...載入中...