在我们基于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="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中扫码的处理操作供参考。