小程序连续扫码实现-微信小程序扫码功能开发-微信小程序扫一扫功能-即速应用

小程序连续扫码实现-微信小程序扫码功能开发-微信小程序扫一扫功能

浏览量：4033 时间：2020-04-06 来源：二相箔

1.
在小程序中官方提供了标准扫码函数wx.scanCode
2.
官方提供的函数做的已经比较完善了
3.
但是缺点在与每次扫码完毕后都会关闭扫码页进入处理页面
4.
无法达到超市扫码枪连续扫码的效果
5.
在网上查询其他资料的时候,我发现官方的camera组件提供了扫码功能当然有版本限制
6.
于是在camera组件的基础上可以自己做一个连续扫码的页面出来,达到超市扫码枪的效果
7.
废话不多说上代码(只是简单测试代码大家将就看后期会把完善的代码贴上)
8.
wxml页面代码
9.
cameramode"scanCode"device-position"back"binderror"error"style"width:100%;height:300px;"bindscancode"takeCode"scan-area"[0,0,200,200]"
10.
/camera
11.
js代码(被我打吗的是我们的业务代码)
12.
data:{
13.
scanFunctionIsUseAble:true,
14.
},
15.
takeCode(e){
16.
if(this.data.scanFunctionIsUseAble){
17.
console.log("开始扫码了:");
18.
util.showMessage('开始扫码','success');
19.
this.setData({
20.
scanFunctionIsUseAble:false,
21.
})
22.
console.log("e:"+e);
23.
varfileCodee.detail.result;
24.
console.log("fileCode:"+fileCode);
25.
}
26.
},
27.
下图是我在项目中做出来的效果图
28.
原理其实很简单在页面上设定一块区域然后在区域内打开相机
29.
只要在二维码或者一维码出现在区域内部的时候,小程序便会自动调用bindscancode函数进行扫码
30.
注意点:
31.
1.在我测试的时候,推测bindscancode是异步试操作正常一秒钟可以扫码多次也就是说如果手速不够快name他讲连续扫n多次同一个二维码进行调用函数处理,这明显不与我们初衷相符所以在代码中我加了一个变量进行判断,使得同一时间点只能有一个二维码或一维码在处理
32.
但是本人对js不熟在js中也没有找到关于线程锁的概念这种做法究竟会不会有问题还未发现,后期继续验证
33.
2.在实际测试的时候本人发现camera调用扫码功能扫码的时候识别率有点感人,总是会识别出瞎七瞎八的东西,其中原因还未明白,等研究后再说
34.
如上便是小程序实现扫码枪扫码效果的思路,具体完善的代码本人后期会抽时间贴上,如果有朋友可以解决如上问题还请教教小弟