Vue结合uni-app实现手机端的扫码功能
uniApp二维码文档地址:https://www.html5plus.org/doc/zh_cn/barcode.html步骤:组件中创建div容纳扫码控件创建扫描控件开始扫描关闭扫描关闭条码识别控件tips:在代码中,我是在mounted函数中就调用了startRecognize()函数,创建了扫码识别控件,为了便于演示,大家可以在页面上加几个按钮,绑定不同的函数调用创建,开始,关闭扫描控件函
·
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>
以上代码仅供个人记录以及复习使用,欢迎大家评论指正
更多推荐
已为社区贡献3条内容
所有评论(0)