UniApp H5项目指南：处理二维码生成和扫描操作
在我们基于UniApp的H5项目中，需要生成一些二维码进行展示，另外也需要让用户可以扫码进行一定的快捷操作，本篇随笔介绍一下二维码的生成处理和基于H5的扫码进行操作。二维码的生成，使用了JS文件weapp-qrcode.js进行处理，而二维码扫码则是基于一个第三方组件的方式进行支持的，最后通过统一入口来支持不同平台的扫码操作。
1、二维码的生成处理
二维码的生成，使用了JS文件weapp-qrcode.js进行处理的。因此我们在页面或者组件使用它的时候，需要引入JS文件才能调用。
import qrCode from '@/libs/weapp-qrcode.js';
我们为二维码的展示，创建一个自定义组件，用来展示二维码信息以及一些说明信息，如下所示。
<view class="hidden-box">
<!-- <view class="code-tit">二维码</view> -->
<view class="qrcode-box">
<tui-no-data v-if="!code" :fixed="false" imgUrl="/static/image/img_nodata.png">暂未生成二维码 </tui-no-data>
<view class="qrcode" v-else>
<canvas :style="{ width: qrcode_w + 'px', height: qrcode_w + 'px' }" canvas-id="qrcode" id="qrcode"></canvas>
</view>
</view>
<view class="explain" v-if="desc.length > 0">使用说明</view>
<view class="explain-text" v-for="(items, index) in desc" :key="items">{{ items }} </view>
</view>如果没有生成二维码的所示，我们用一个空图片代替，如下效果所示。
二维码生成的时候，接收一个控件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);
}
},在测试页面中，导入刚才的二维码自定义组件，然后以普通的组件一样使用它即可。
<qrcode-info :code="entity.qrCode"></qrcode-info>
随便弄一个二维码的值，生成二维码后的界面测试效果如下所示。
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 ，其他地方需要扫码的，统一定位到该页面处理即可。
在页面代码中，我们引入上面的二维码扫描组件即可，如下代码所示。
<template>
<view class="container">
<get-qrcode @success='qrcodeSucess' @error="qrcodeError"></get-qrcode>
</view>
</template>
<script>
import getQrcode from '@/pages/components/GetQrcode/getQrcode.vue'
export default {
components: {
getQrcode
},另外定义一个to参数，用来判断页面转到那里去的。
data() {
return {
to: '' //页面带过来的to地址
}
},
onLoad(options) {
this.to = options?.to;
}同时定义两个方法，一个是成功处理的，一个是出错的提示的。
qrcodeSucess(data) {
if (uni.$u.test.url(data)) {
let url = data;
console.log(url)
if (url.indexOf('#') > 0) {
let pageurl = url.split('#')[1];
console.log(pageurl);
//在页面地址后增加一个to参数
let toUrl = uni.$u.test.isEmpty(this.to) ? pageurl : (pageurl + `&to=${this.to}`)
uni.navigateTo({
url: toUrl
})
} else {
uni.$u.toast("URL格式不符");
}
}
},
qrcodeError(err) {
console.log(err)
uni.showModal({
title: '摄像头授权失败',
content: '摄像头授权失败，请检测当前浏览器是否有摄像头权限。',
success: () => {
uni.navigateBack({})
}
})
},扫码成功后，会自动根据地址进行跳转到具体的二维码URL页面，并带过去一个to的参数给目标页面。扫码的页面效果如下所示。
如果我们扫码的内容是一个URL连接，就会跳转到具体的页面中去，并且带上一个to参数用于区分目标。
这样我们在一些需要的地方，通过按钮或者图片来触发一个扫码行为即可。
处理代码如下所示
uni.navigateTo({
url: '../common/scan-qrcode'
})如果我们的程序，需要兼容App模式、小程序模式和H5等模式，那么我们可以通过判断来切换不同的扫码处理，如下代码所示。
onScan(to) { // h5扫描二维码并解析
console.log("不支持H5扫码 走onScan这个方法")
let url = '../common/scan-qrcode?to=' + to;
this.tui.href(url)
},
scanCode(to) {
// 允许从相机和相册扫码
// #ifndef H5
uni.scanCode({
scanType: ['qrCode', "barCode"],
success: function(res) {
console.log(res)
// 微信小程序
if (res.errMsg == "scanCode:ok") {
// 扫描到的信息
// uni.$u.toast(res.result);
var url = res.result;
if (uni.$u.test.url(url)) {
console.log(url)
if (url.indexOf('#') > 0) {
let pageurl = url.split('#')[1];
console.log(pageurl);
//在页面地址后增加一个to参数
uni.navigateTo({
url: pageurl + `&to=${to}` //加上功能
})
} else {
uni.$u.toast("URL格式不符");
}
} else {
uni.$u.toast("URL格式不符");
}
} else {
console.log("未识别到二维码，请重新尝试！")
uni.$u.toast('未识别到二维码，请重新尝试！')
}
}
});
// #endif
// #ifdef H5
this.onScan(to)
// #endif
}这样我们就统一处理入口了，如下调用代码所示。
packsign() {
this.scanCode('packsign')
},以上就是二维码生成和在H5中扫码的处理操作供参考。
