web实现usb扫码枪读取二维码数据功能

---

前言

   常见的扫码枪有2种，一种串口扫码枪通过串口实现数据通信，技能实现上使用Web Serial API，可以查看本人另一篇博文Web Serial API串口通信，实现web和electron扫码枪读取数据。另一种是usb扫码枪，也是本文所要报告的，usb扫码枪可以当作是输入设备，实际等同于键盘通过按键输入方式举行二维码信息读取，技能实现相比串口扫码枪简单多了，只需监听输入事件，但是它也有许多弊端和限制。
  

---

一、usb扫码枪获取数据步调和条件

1.必须有个input输入框而且让其处于聚焦状态
2.监听输入框按键事件keydown大概keyup，碰到keyCode为13（回车）表现输入结束（一样平常usb扫码枪设置读取以回车结束，固然有的也可以设置其他，如果是其他结束符就监听相应的keyCode）
3.回车结束后从input输入框dom对象获取value值就是二维码内容
通过上面总结很容易实现，如下代码：

1. <input id="input"/>   

复制代码

1.   <script>
2.    const input= document.getElementById('input');
3.    input.addEventListener('keydown',e=>{
4.      if(e.keyCode==13){//回车结束
5.         let qrcodeData=input.value;
6.         console.log(`二维码数据为${qrcodeData}`)
7.      }
8.    })
9.    input.focus()//聚焦
10.   </script>

复制代码

扫码测试：

二、优化

上面demo我们只是简单实现了从扫码枪获取数据功能的核心逻辑，但实际开发中我们的需求场景大概不一样，会碰到许多问题和坑点需要优化办理。
   挖坑1：中文输入法会影响输入内容精确性，可以通过设置input type=“password”,设置输入框为密码类型办理
    挖坑2：如果你的需求是读取二维码内容添补到一个特定输入框可以像上面例子一样实现，但是如果读取二维码不需要添补到输入框大概需要回显许多个地方就需要先获取数据再做数据处置处罚，这个时间可以谋利取巧画个输入框移动到屏幕外。
    挖坑3：当你采用挖坑2技巧把输入框画在屏幕外，并用代码聚焦在输入框后，用户大概乱点页面导致读取数据前失焦，从而无法正常读取到二维码数据。办理方法可以定时不间断自动对焦并显示加载模态框引导用户不去乱点击，淘汰失败率。
  二、代码实现

   接下来将以vue3 elementui-plus来举例，实现一个扫码获取多个表单字段回显功能
  操作逻辑设计：
1.页面设计一个二维码辨认按钮
2.用户点击按钮触发扫码功能并锁定界面出现辨认中加载转圈，防止用户乱点击失焦。
3.扫码辨认，辨认成功，辨认加载转圈消失，数据自动回显到对应表单控件上
4.n秒内如果用户未扫码关闭加载转圈恢复初态
代码如下（示例）：
scanner.js（扫码逻辑封装hook）：

1. import { nextTick, onMounted } from "vue";
2. import { ElLoading, ElMessage } from "element-plus";
4. let isInputing = false; //是否在输入中
6. /**
7. *
8. * @param {*} inputRef:输入框Ref
9. * @param {*} callBack :识别回调
10. * @returns
11. */
12. const useScancer = (inputRef, callBack) => {
13.   let interval = null; //定时器实例
14.   let loading = null; //ElLoading组件实例
16.   //输入框绑定keydown事件
17.   const addKeydownEvent = () => {
18.     if (inputRef?.value) {
19.       inputRef.value.addEventListener("keydown", (event) => {
20.         isInputing = true;
21.         let keyCode = event.keyCode || event.which;
22.         if (keyCode === 13) {
23.           let qrcodeData = inputRef?.value?.value ?? ""; //二维码数据
24.           if (interval) {
25.             clearInterval(interval);
26.             interval = null;
27.           }
28.           callBack(qrcodeData);
29.           inputRef.value.value = "";
30.           loading && loading.close();
31.           loading = null;
32.           ElMessage.success("识别成功");
33.           isInputing = false;
34.         }
35.       });
36.     }
37.   };
39.   //自动聚焦
40.   const autoFocus = () => {
41.     //立即执行
42.     inputFocus();
43.     if (!interval) {
44.     //每50ms自动对焦
45.       interval = setInterval(() => {
46.         inputFocus();
47.       }, 50);
48.     }
49.   };
51.   //input聚焦
52.   const inputFocus = () => {
53.     if (inputRef && inputRef.value) {
54.       inputRef.value.focus();
55.     }
56.   };
58.   //开始扫码
59.   const handleScanCode = () => {
60.     if (!loading) {
61.       console.log('loading')
62.       loading = ElLoading.service({
63.         lock: true,
64.         text: "请开始扫码识别",
65.         background: "rgba(255, 255, 255, 0.7)",
66.       });
68.       //20秒内未扫码关闭loading
69.       setTimeout(() => {
70.         if (!isInputing) {
71.           loading && loading.close();
72.           loading = null;
73.           if (interval) {
74.             clearInterval(interval);
75.             interval = null;
76.           }
77.         }
78.       }, 20 * 1000);
80.       nextTick(() => {
81.         autoFocus();
82.       });
83.     }
84.   };
86.   //初始化绑定事件
87.   onMounted(() => {
88.     addKeydownEvent();
89.   });
91.   return { autoFocus, handleScanCode };
92. };
94. export default useScancer;

复制代码

页面调用
index.vue

1. <template>
2.   <input class="input" ref="inputRef" type="password"/>
3.   <el-button @click.native="handleScanCode" type="primary">扫码识别</el-button>
4.   <el-form :model="formData" style="margin-top: 20px">
5.     <el-form-item label="姓名">
6.       <el-input disabled v-model="formData.name" />
7.     </el-form-item>
8.     <el-form-item label="年龄">
9.       <el-input disabled v-model="formData.age" />
10.     </el-form-item>
11.     <el-form-item label="生日">
12.       <el-input disabled v-model="formData.birthday" />
13.     </el-form-item>
14.   </el-form>
15. </template>
17. <script setup>
18. import { ref, reactive } from "vue";
19. import useScancer from "./scanner.js"; //扫码识别hook
21. //表单数据
22. const formData = reactive({
23.   name: "",
24.   age: "",
25.   birthday: "",
26. });
29. //输入框
30. const inputRef = ref();
32. //扫码回调
33. const { handleScanCode } = useScancer(inputRef, (data) => {
34.   console.log(data, "二维码数据为：data");
35.   if (data) {
36.     try {
37.     //二维码字符串转为json对象
38.       data= JSON.parse(data);
39.       for(let key in formData){
40.         formData[key]=data[key]??'';
41.       }
42.     } catch (e) {
43.       console.log(e,'e')
44.     }
45.   }
46. });
47. </script>
48. <style scoped>
49. .input {
50.   position: fixed;
51.   left: 0;
52.   transform: translateX(-200%);
53. }
54. </style>

复制代码

测试运行：
初始态：

开始辨认：

辨认完成：

---

总结

通过上面介绍可以看出usb扫码枪固然使用简单，但是限制多，只能满意一些特定场景，对用户一些不确定操作大概会影响读取成功率，这个时间也可以从产物设计上引导用户自动触发聚焦淘汰用户乱点击频率，提高成功率。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。