完美解决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": "+"
}

最后有帮助到各位的话 还请不吝赐赞