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

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的” 的输入法软件处理后的结果。下图展示了我本地的模拟结果。解决办法为：根据实际情况在开发中指定输入控件的输入类型和输入范围。

更多推荐