完美解决uniapp检测USB抄码枪连接、扫码功能

本文主要是介绍完美解决uniapp检测USB抄码枪连接、扫码功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果展示

uniapp实现检测usb抄码枪连接、扫码功能

不支持IOS设备，有涉及到原生代码。

前语

做这个需求前，查阅了大量的技术文档，并且发现在dcloud已经有相关插件可以实现，但就是需要购买插件。自己也研究了很久并决定开源，希望能有帮助各位
在这里插入图片描述

简单来说，检测usb抄码枪就是检测usb外接设备，监测抄码功能就是检测外接键盘的输入事件。
这里将完整需求拆分成俩个独立小需求去单独实现，至于怎么样去做处理就根据自己需求来灵活调整。

检测usb外接设备

核心代码如下

export const watchUsb = () =>{const isWatchConnectUsb = store.getters.getWatchConnectUsbStatus;// 已经注册过就不注册了 防止重复注册if (isWatchConnectUsb) return;try {const main = plus.android.runtimeMainActivity();const receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {onReceive: getReceive});const IntentFilter = plus.android.importClass('android.content.IntentFilter');const Intent = plus.android.importClass('android.content.Intent');const filter = new IntentFilter();const actionAttached = "android.hardware.usb.action.USB_DEVICE_ATTACHED";const actionDetached = "android.hardware.usb.action.USB_DEVICE_DETACHED";filter.addAction(actionAttached);filter.addAction(actionDetached);main.registerReceiver(receiver, filter);// 更新状态，防止重复注册store.commit('SET_WATCH_CONNECT_USB_STATUS', true);function getReceive(context, intent) {store.commit('SET_USBGUN_WATCH', true);const type = intent.getAction();if (type === actionAttached) {uni.showToast({ title: "USB扫码枪已连接", icon: "none" });uni.$emit('changeUsbGunStatus', true);store.commit('SET_USBGUN_STATUS', true);} else if (type === actionDetached) {uni.showToast({ title: "USB扫码枪已拔出", icon: "none" });uni.$emit('changeUsbGunStatus', false);store.commit('SET_USBGUN_STATUS', false);}}} catch (e) {console.error('注册USB广播接收器时发生错误：', e);}
}

我这做的处理是在App.vue下的onLaunch，app一创建就去执行监听事件，做到全局去检测usb插入拔出。并且做了防止重复监听的行为，防止bug出现

扫码功能

USB抄码扫描一次会触发多个input事件，最后再触发一次enter事件，这里就去监听input事件去不断拼接拿到映射的抄码值，最后的enter事件触发就是完整的结果
plus.key.addEventListener("keyup",this.usbGunKeypress);

// usb码枪检测事件changeUsbGunStatus(flag){this.$store.commit('SET_USBGUN_STATUS', flag);// 只有在连接usb扫码枪  并且之前没有注册过才注册监听扫码事件const isAddKeyupEventScanPage = JSON.parse(uni.getStorageSync('isAddKeyupEventScanPage') || 'false')if(flag && !isAddKeyupEventScanPage){plus.key.addEventListener("keyup",this.usbGunKeypress);uni.setStorageSync('isAddKeyupEventScanPage',true)}else{plus.key.removeEventListener("keyup",this.usbGunKeypress);uni.setStorageSync('isAddKeyupEventScanPage',false)}},
// usb扫码事件usbGunKeypress(e){//66就是回车键if(e.keyCode===66){//这里的this.inputCache就是抄码结果 做后续业务需求处理}else{this.inputCache += keymap[String(e.keyCode)] || ''}},

标题文本样式列表图片链接目录代码片表格注脚注释自定义列表LaTeX 数学公式插入甘特图插入UML图插入Mermaid流程图插入Flowchart流程图插入类图快捷键
标题复制

映射表文件keymap.js

// keymap.js 以下来源网络收集，不同的设备对应的keyCode可能不同
export default {"7": "0","8": "1","9": "2","10": "3","11": "4","12": "5","13": "6","14": "7","15": "8","16": "9","29": "A","30": "B","31": "C","32": "D","33": "E","34": "F","35": "G","36": "H","37": "I","38": "J","39": "K","40": "L","41": "M","42": "N","43": "O","44": "P","45": "Q","46": "R","47": "S","48": "T","49": "U","50": "V","51": "W","52": "X","53": "Y","54": "Z","55": ",","56": ".","59": "","69": "-","70": "=","81": "+"
}