vue+hbuilderX 实现扫一扫功能

2024-07-01 07:43| 来源: 网络整理| 查看: 265

最近项目上有个扫一扫功能，用了很多方法，最终在网上扒到这个最容易、最方便的方法和大家分享一下喽~

感谢 https://blog.csdn.net/qq_35844177/article/details/78951825

...载入中...

1.创建控件 2.开始扫描 3.结束扫描 4.关闭控件 let scan = null export default { data() { return { codeUrl: '' } }, mounted () { this.startRecognize() setTimeout(() => { this.startScan() }, 500) }, methods: { // 创建扫描控件 startRecognize () { let that = this if (!window.plus) return scan = new plus.barcode.Barcode('bcid') scan.onmarked = onmarked function onmarked (type, result, file) { switch (type) { case plus.barcode.QR: type = 'QR' break case plus.barcode.EAN13: type = 'EAN13' break case plus.barcode.EAN8: type = 'EAN8' break default: type = '其它' + type break } result = result.replace(/\n/g, '') that.codeUrl = result alert(result) that.closeScan() } }, // 开始扫描 startScan () { if (!window.plus) return scan.start() }, // 关闭扫描 cancelScan () { if (!window.plus) return scan.cancel() }, // 关闭条码识别控件 closeScan () { if (!window.plus) return scan.close() } }, destroyed () { this.cancelScan() this.closeScan() } } .scan { height: 100%; #bcid { width: 100%; position: absolute; left: 0; right: 0; top: 0; bottom:3rem; text-align: center; color: #fff; background: #ccc; } footer { position: absolute; left: 0; bottom: 1rem; height: 2rem; line-height: 2rem; z-index: 2; } }

当把上面代码copy到自己的项目中的时候终端上会有如下报错