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 的路由管理会乱掉。

结束

如果本文的分享对你有所帮助的话，请不要吝啬给 uni-custom-scan-code 一个小星星。目前的例子还是比较单薄，后面会持续补充一些示例，欢迎大家持续关注。