uniApp二维码文档地址:https://www.html5plus.org/doc/zh_cn/barcode.html
步骤:
组件中创建div容纳扫码控件创建扫描控件开始扫描关闭扫描关闭条码识别控件tips:
在代码中,我是在mounted函数中就调用了startRecognize()函数,创建了扫码识别控件,为了便于演示,大家可以在页面上加几个按钮,绑定不同的函数调用创建,开始,关闭扫描控件函数
其中startRecognize()函数中的result值就是扫码的结果,可以对这个值进行操作。
其中startRecognize()函数中的type对应的是二维码的类型,可以在上面的文档中获取不同的条码对应的数值。
<template> <div class="scan"> <div id="bcid"> <div style="90%"></div> </div> </div> </template> <script> let scan = null; export default { mounted() { this.startRecognize() this.startScan() }, methods: { //创建扫描控件 startRecognize() { let that = this; if (!window.plus) return; scan = new plus.barcode.Barcode('bcid'); scan.setStyle({background:"green"}) var 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, ''); console.log(result)//这里的result就是扫码获取到的值 that.closeScan(); } scan.onmarked = onmarked; }, //开始扫描 startScan() { if (!window.plus) return; scan.start(); }, //关闭扫描 cancelScan() { if (!window.plus) return; scan.cancel(); }, //关闭条码识别控件 closeScan() { if (!window.plus) return; scan.close(); } }, } </script>以上代码仅供个人记录以及复习使用,欢迎大家评论指正