小程序连续扫码实现

在小程序中 官方提供了标准扫码函数 wx.scanCode

 

官方提供的函数做的已经比较完善了

但是缺点在与每次扫码完毕后都会关闭扫码页进入处理页面

无法达到超市扫码枪连续扫码的效果

 

在网上查询其他资料的时候, 我发现官方的camera组件提供了扫码功能 当然有版本限制

于是在camera组件的基础上可以自己做一个连续扫码的页面出来, 达到超市扫码枪的效果

废话不多说上代码(只是简单测试代码 大家将就看 后期会把完善的代码贴上)

wxml页面代码

<camera mode="scanCode" device-position="back" binderror="error" style="width: 100%; height: 300px;" bindscancode="takeCode" scan-area="[0,0,200, 200]">

</camera>

js 代码(被我打吗的是我们的业务代码)

 

data: {

scanFunctionIsUseAble: true,

},

takeCode(e) {

if (this.data.scanFunctionIsUseAble){

console.log("开始扫码了: ");

util.showMessage('开始扫码', 'success');

this.setData({

scanFunctionIsUseAble: false,

})

console.log("e: " + e);

var fileCode = e.detail.result;

console.log("fileCode: " + fileCode);

}

},

 

下图是我在项目中做出来的效果图

原理其实很简单 在页面上设定一块区域 然后在区域内打开相机

只要在二维码或者 一维码 出现在区域内部的时候, 小程序便会自动调用bindscancode 函数进行扫码

 

注意点:

1. 在我测试的时候, 推测bindscancode是异步试操作 正常一秒钟可以扫码多次 也就是说如果手速不够快 name他讲连续扫n多次同一个二维码进行调用函数处理, 这明显不与我们初衷相符 所以在代码中我加了一个变量进行判断, 使得同一时间点只能有一个二维码或一维码在处理

但是本人对js不熟 在js中也没有找到关于线程锁的概念 这种做法究竟会不会有问题还未发现, 后期继续验证

2. 在实际测试的时候本人发现 camera调用扫码功能扫码的时候识别率有点感人, 总是会识别出瞎七瞎八的东西, 其中原因还未明白, 等研究后再说

如上便是小程序实现扫码枪扫码效果的思路, 具体完善的代码 本人后期会抽时间贴上, 如果有朋友可以解决如上问题还请教教小弟