html5+plus(5+app) 掃一掃(plus.barcode)

uniapp掃描二維碼：

　　官方API地址：https://uniapp.dcloud.io/api/system/barcode?id=scancode；

uni.scanCode({
    scanType: ['barCode'],
    success: function (res) {
        console.log('條碼類型：' + res.scanType);
        console.log('條碼內容：' + res.result);
    }
});

　　官方API解釋的很清楚，不再多記 (以上即可實現app掃碼) ；

5+app 掃碼：

　　官方API地址：http://www.html5plus.org/doc/zh_cn/barcode.html；

　　本人使用思路：創建一個空頁面當做掃描頁面載體 ---> 創建掃描框 ---> 正常掃描  ---> 掃描成功 ---> 處理邏輯
　　　　　　　　　　　　　　　　　　　　　　　　　　　    |　　　　　　  |
　　　　　　　　　　　　　　　　　　　　　　　　　　　　↓　　　　　　 ↓

　　　　　　　　　　　　　　　　　　　　　　　　　　非正常掃描         掃描失敗 ---> 處理邏輯
　　　　　　　　　　　　　　　　　　　　　　　　　　　　↓
　　　　　　　　　　　　　　　　　　　　　　　　　　 取消掃描

 

　　①：新建頁面

　　　　　……

　　②：創建webview承載掃描控件：

　　　　　　1.

//創建webview
var cw = plus.webview.currentWebview();    

　　　　　　2.創建掃描控件(我個人是直接在onload中實現所有內容，可拆分)：

· 正常掃描：

let _that = this;
this.barcode = null;
if (!_that.barcode) {
    // 創建掃描控件對象
    _that.barcode = plus.barcode.create('barcode',[plus.barcode.QR], 
    {
         scanbarColor: '#2E49C0',
     frameColor: '#2E49C0'
    });
    cw.append(_that.barcode)；
    // (以下可單獨拆分為方法)掃碼成功回調
    _that.barcode.onmarked = (type,result) => {
          // 此時已經可以直接獲取結果自行處理結果
          _that.result = 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;
      　　}
         //結束對攝像頭獲取圖片數據進行條碼識別操作，同時關閉攝像頭的視頻捕獲。 結束后可調用start方法重新開始識別。
         _that.barcode.cancel();
         //釋放控件占用系統資源，調用close方法后控件對象將不可使用。
         _that.barcode.close(); 
         // (自行處理邏輯)可以判斷是否是自己需要的二維碼(方法多變，)
　　　　　掃描成功……
　　　　　掃描失敗……
    }
}    

* 此時可能會出現不准備掃描，想要直接返回的情況。但是5+app的控件相當於在掃描二維碼的頁面創建了一個webview覆蓋了本頁面，所以物理按鍵返回是關閉不了掃碼界面的；

* 當掃碼界面覆蓋原頁面時，點擊掃碼按鈕的位置可以多次打開或創建多個掃碼控件(肯定還有其他解決方法)，我這邊直接在點擊掃碼按鈕跳轉到掃碼頁面時，隱藏掃碼按鈕，然后在正常掃描完成和非正常掃描后重新顯示按鈕。

·非正常掃描：

 

// 關閉當前webview
plus.key.addEventListener('backbutton', function() {
    cw.canBack(function(e) {
        if (e.canBack) {
            uni.$emit('scanShow','show')
            //關閉掃描
            _that.cancelScan()
            _that.barcode.close()
        }
    })
});
    

 　　　　掃描：

this.barcode.start();

 

注：本人以上代碼全部一體在onload()生命周期函數內部編寫。

擴展：

//開啟閃光燈
    open() {
    this.setFlash = !this.setFlash
    this.barcode.setFlash(this.setFlash);
    },

其余更多擴展自行查詢文檔。