在我们基于UniApp的H5项目中，需要生成一些二维码进行展示，另外也需要让用户可以扫码进行一定的快捷操作，本篇随笔介绍一下二维码的生成处理和基于H5的扫码进行操作。蓝狮注册开户二维码的生成，使用了JS文件weapp-qrcode.js进行处理，而二维码扫码则是基于一个第三方组件的方式进行支持的，最后通过统一入口来支持不同平台的扫码操作。

1、二维码的生成处理
二维码的生成，使用了JS文件weapp-qrcode.js进行处理的。因此我们在页面或者组件使用它的时候，需要引入JS文件才能调用。

import qrCode from ‘@/libs/weapp-qrcode.js’;
我们为二维码的展示，创建一个自定义组件，用来展示二维码信息以及一些说明信息，如下所示。

暂未生成二维码

使用说明
{{ items }}

如果没有生成二维码的所示，我们用一个空图片代替，如下效果所示。

二维码生成的时候，接收一个控件id，以及二维码的值，生成函数代码如下所示。

// 二维码生成工具
qrcode(text, canvasId) {
    // console.log(text, canvasId)
    new qrCode(canvasId, {
        text: text,
        width: this.qrcode_w,
        height: this.qrcode_w,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: qrCode.CorrectLevel.H
    });
}

在添加一个方法对展示进行折叠处理，那么具体如下所示。

showDetail() {
this.visible = !this.visible;
if (this.visible) {
setTimeout(() => {
this.qrcode(this.code, ‘qrcode’);
}, 60);
}
},
在测试页面中，导入刚才的二维码自定义组件，然后以普通的组件一样使用它即可。

随便弄一个二维码的值，生成二维码后的界面测试效果如下所示。

2、二维码的扫码操作
我们知道，基于UniApp的程序中，内置有扫码操作

uni.scanCode(OBJECT)
地址是：https://uniapp.dcloud.net.cn/api/system/barcode.html#scancode：

不过该接口却不能在H5中调用扫码处理，

如果需要在H5应用中扫码，那么需要另辟蹊径，如果使用基于微信的SDK进行，蓝狮注册登陆还需要一系列的操作很麻烦，而且H5扫码一般需要https的支持才能调用摄像头的。

我在GitHub上搜索了一些基于H5扫码的项目，好像效果都不是很理想，估计是没有找到好的案例。在不经意间，发现《H5调用摄像头识别二维码》（需要https环境才能使用）效果挺好，就下来整合在项目中使用。

为了方便通用的扫码处理，我们这里定义了一个通用的扫码页面scan-qrcode.vue ，其他地方需要扫码的，统一定位到该页面处理即可。

在页面代码中，我们引入上面的二维码扫描组件即可，如下代码所示。