uni-app 自定義掃碼界面

二維碼掃描，已經成爲當下一款應用不可或缺，同時也是用戶習覺得常的功能了。uni-app 爲咱們提供了掃碼 API ，直接調用便可。

需求場景

在實際開發中，平臺提供的默認掃碼界面，並不能知足一些自定義的需求。例如：

• 非全屏顯示
• 掃碼界面文字國際化
• 掃碼框的顏色調整

微信小程序等小程序平臺，能夠經過 <camera> 組件來實現部分自定義的需求。App 平臺須要經過本地 HTML 來實現，即本文要分享的內容。

Tips：這裏的 App 特指 Android(.apk)、iOS(.ipa) 移動應用，非泛指全部應用。

實現思路

在 App 上實現自定義掃碼界面，有如下幾個關鍵點的支持：

• uni-app 在 App 平臺支持 HTML5+ 規範的調用，這是核心依賴。
• <web-view> 組件在 App 平臺支持加載本地 HTML，這爲自定義的 HTML 文件提供了規範目錄存放。

大體的思路以下：

• 開發一個 HTML 頁面，使用 plus.barcode 等實現掃碼功能。
• 在 .vue 頁面中經過 plus.webview 直接打開掃碼頁面。
• 掃碼頁面監聽 backbutton，防止打亂 uni-app 原有的路由控制。
• 經過 plus.storage 實現數據的存儲，以及 .vue 頁面的數據讀取。

關鍵代碼

barcode.html

不一樣於 uni-app 直接調用 plus，在 HTML 中必定要等 plusready 後調用 plus 的 API。

var plusReady = function (callback) {
    if (window.plus && window.plus.isReady) {
        callback();
    } else {
        document.addEventListener('plusready', function () {
            callback();
        }, false);
    }
};

經過 create 方法建立的 Barcode 實例對象，必定要 append 到當前 Webview 上。

var barcode = plus.barcode.create(options.barcodeId, options.scanTypes, options.styles);
/* 省略代碼 */
plus.webview.currentWebview().append(barcode);

監聽 backbutton 的操做，防止打亂 uni-app 的路由管理，致使頁面後退等操做異常。

plus.key.addEventListener('backbutton', function () {
    goBack();
});

index.vue

App 特有的功能及調用 plus 的 API，必定要條件編譯。

<!-- #ifdef APP-PLUS -->
<button type="primary" @click="openBarcode">掃碼</button>
<!-- #endif -->

// #ifdef APP-PLUS
openBarcode() {
    /* 省略代碼 */
}
// #endif

監聽掃碼頁面的銷燬事件，在回調中讀取掃碼的結果。

barcodeWebview.addEventListener('close', function () {
  var barcodeValue = plus.storage.getItem('barcode_value');
  if (barcodeValue) {
    var barcodeResult = JSON.parse(barcodeValue);
    if (barcodeResult.code === 0) {
      _self.title = '掃碼結果：' + barcodeResult.result;
    } else {
      _self.title = '掃碼失敗';
    }
  }
});

源碼

上面只提到了一些關鍵或可能被忽視的代碼，完整的代碼已經上傳至 GitHub，請自行下載體驗。

注意事項

數據同步

目前是經過 plus.storage 實現的數據共享，可能會出現掃碼界面已經關閉可是數據尚未馬上同步的狀況。

頁面跳轉

除了必定要在 HTML 中監聽 backbutton 外，還須要注意後續頁面切換的操做。
能夠是 vue->html 或者 vue->html->html，而後逐級 back。必定不能出現 html->vue 這種跳轉，uni-app 的路由管理會亂掉。

更多加強

HTML5+ 提供的掃碼能力，能夠知足自定義大小，繪製文字的國際化，掃碼框顏色定製等。在 plus.view 的支持下，還能夠繪製更加豐富的自定義界面。固然，你可能須要增強一下對於 HTML5+ 的掌握。

結束

若是本文的分享對你有所幫助的話，請不要吝嗇給 uni-custom-scan-code 一個小星星。目前的例子仍是比較單薄，後面會持續補充一些示例，歡迎你們持續關注。