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 一个小星星。目前的例子仍是比较单薄，后面会持续补充一些示例，欢迎你们持续关注。