uni-app實戰：自定義掃碼介面

瀟煜發表於2019-02-19
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 = '掃碼失敗';
        }
    }
});
複製程式碼

效果預覽

目前的例子比較單薄，初步實現了標題欄與應用其它頁面的風格一致，以及掃碼框的顏色使用的自定義藍色。

uni-app實戰：自定義掃碼介面
uni-app實戰：自定義掃碼介面

注意事項

資料同步

目前是通過 plus.storage 實現的資料共享，可能會出現掃碼介面已經關閉但是資料還沒有立刻同步的情況。

頁面跳轉

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

更多增強

HTML5+ 提供的掃碼能力，可以滿足自定義大小，繪製文字的國際化，掃碼框顏色定製等。在 plus.view 的支援下，還可以繪製更加豐富的自定義介面。當然，你可能需要加強一下對於 HTML5+ 的掌握。

結束

如果本文的分享對你有所幫助的話，請不要吝嗇給 uni-custom-scan-code 一個小星星。後面會持續補充一些示例，歡迎大家持續關注。

相關文章