vue实现扫码功能

2023-08-02 22:27:05 83

最近在项目中碰见一个打开摄像头扫码的功能，项目最后打包成app，用的是hBuilder打的包，刚好hBuilder打包集成H5+sdk,就可以直接用人家的sdk了。

demo地址：vue-scan-demo

代码实现：




letscan=null;

exportdefault{
data(){
return{
codeUrl:'',
}
},
methods:{
//创建扫描控件
startRecognize(){
letthat=this;
if(!window.plus)return;
scan=newplus.barcode.Barcode('bcid');
scan.onmarked=onmarked;

functiononmarked(type,result,file){
switch(type){
caseplus.barcode.QR:
type='QR';
break;
caseplus.barcode.EAN13:
type='EAN13';
break;
caseplus.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();
},
}
}


.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;
}
}

预览：

打开Hbuilder，新建项目，将目录指向/dist，然后右键转换成移动App,真机usb连接运行

效果图：

通过这个例子，像其他的调用手机原生功能如：语音输入、摇一摇、摄像头、文件系统、微信分享等也可以通过上述方式实现。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue实现扫码功能

热门推荐

随机推荐