在小程序中 官方提供了标准扫码函数 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调用扫码功能扫码的时候识别率有点感人, 总是会识别出瞎七瞎八的东西, 其中原因还未明白, 等研究后再说
如上便是小程序实现扫码枪扫码效果的思路, 具体完善的代码 本人后期会抽时间贴上, 如果有朋友可以解决如上问题还请教教小弟
小程序
