我寻寻觅觅，寻寻觅觅一个可以二次开发的扫码枪。然而，店小二总是告诉我：“这个……额……额……俺也不知道呢……”。本文将一步一步实现在网页项目中集成扫码枪设备。

1.项目背景

我们的项目是一个B/S架构的仓储管理系统，物品入库时生成唯一二维码并粘贴，用户在系统内扫描二维进行物品识别并选择操作。
项目前期对于二维码的识别方法是调用本地摄像头，使用 QRCode.js 进行二维码识别，在扫码成功回调中进行业务操作。随着实际地实施和应用，这种方法的弊端渐渐显现：

摄像头设备要求高：成本昂贵（差点换成高拍仪）
摄像头焦点问题：识别过程需要移动物品适应摄像头焦点，过程繁琐，耗费体力
安全问题：如果应用场景有安全规定，那么摄像头设备显然是不可以存在的

基于出现的种种情况，要求我们必须对扫码方式做出改变，扫码枪是最合适的选择。
某宝上只花了46元就买到了支持条码+二维码的扫码枪。

2.扫码枪工作原理

扫码枪在本质上可以理解为一种 特殊键盘 ，通过光学元器件获取条码或二维码进行识别，然后将识别结果（文本）逐字转化为键盘输入信号发送。

3.扫码枪接入项目

在js中接入扫码枪，其实还是挺简单的，处理的流程图如下：

代码如下

<script>var qrResult = "";$(document).keydown(function(event){if( event.key=="Enter" ){readResult = qrResult;qrResult = "";if(readResult!=undefined || readResult!=""){// 业务流程}}else {qrResult = qrResult + event.key;}});
</script>

4.可能遇到的问题

窗口焦点问题
当在当前页面加载完成后，如果用户并未在此页面有任何操作，由于当前焦点并不在此窗口，所以此时扫码枪的输入信号并不会被监听，业务流程也无法被正常执行。解决办法为：增加必要的提示和页面交互操作，比如在本页面做出提示，要求用户在本页面至少进行一次点击或其他交互后方能使用扫码枪。
输入法中文模式问题
本文实现的处理流程并不是直接录入型的，当用户在页面有一个文本输入控件（如：input、textaera等）时，如果当前输入法处于中文输入模式时，扫码枪的回传信息将等同于键盘逐字点击操作。
举个例子：
识别结果为：id=1，当输入法为中文时，最终通过扫码枪输入到输入控件的结果很可能是如 “i的” 的输入法软件处理后的结果。下图展示了我本地的模拟结果。解决办法为：根据实际情况在开发中指定输入控件的输入类型和输入范围。

在网页项目中集成扫码枪设备，实现二维码扫码识别实战相关推荐

vue项目中，将信息生成二维码图片保存为png格式并下载
生成二维码: https://blog.csdn.net/weixin_37861326/article/details/80362591 保存为png格式并下载: https://blog.csdn ...
maven mybatis mysql_Java Web学习系列——Maven Web项目中集成使用Spring、MyBatis实现对MySQL的数据访问...
标签: 本篇内容还是建立在上一篇Java Web学习系列--Maven Web项目中集成使用Spring基础之上,对之前的Maven Web项目进行升级改造,实现对MySQL的数据访问. 添加依赖Ja ...
uniapp android原生,在uni-app项目中集成Android原生工程
[TOC] # 在uni-app项目中集成Android原生工程按照官方的方案,我们如果进行本地打包的话,需要重新创建一个Android原生工程,于是就会导致我们管理多个项目,切来切去的也麻烦. 经 ...
rn项目假如cocoapods_在项目中集成 RN
在项目中集成 RN 19 Jan 2017 前言使用 RN 难道要把整个项目都重构一遍么?教程那么多,但是很少能够有把怎么与当前项目结合起来的文章.自己摸索了一遍,记录下来.之后的 RN 之路就由此 ...
spring 项目中集成 Protocol Buffers 示例
http://blog.csdn.net/fangzhangsc2006/article/details/8687388 本文适用于了解spring框架,同时想在spring项目中使用Protocol ...
如何在你的项目中集成 CAP【手把手视频教程】
前言之前录制过一期关于CAP的视频,但是由于当时是直播时录制的视频,背景音比较杂所以质量有点差.这次的视频没有直播,直接录制的,视频质量会好很多,第一遍录制完成之后发现播放到一半没有声音,所以又重新 ...
在Spring项目中集成使用MongoDB
在Spring项目中集成使用MongoDB 这里使用的是maven工程,所以依赖jar包都是pom.xml配置型式. pom.xml引入依赖 <properties><spring. ...
kind富文本编辑器_在项目中集成富文本编辑器
前言现在学程序的都离不开 Markdown 语法了吧,Markdown 已经成为典型的转换为HTML的非正式规范和参考实现,现在市场上也出现了许多Markdown实现,在基本语法之上额外增加了 ...
lerna 项目中集成 babel lint-staged husky eslint
lerna 项目中集成 babel lint-staged husky eslint Monorepo 是针对单仓库.多 package 的流行解决方案, lerna 是它的一种实现. 说明重要 p ...

在网页项目中集成扫码枪设备，实现二维码扫码识别实战

目录

1.项目背景

2.扫码枪工作原理

3.扫码枪接入项目

4.可能遇到的问题

在网页项目中集成扫码枪设备，实现二维码扫码识别实战相关推荐

最新文章

热门文章