uniapp 获取外设键盘输入（扫码器/扫码枪/读卡器等）

前言

在使用uniapp开发收银机等设备时，常常会用到使用键盘输入的外设，如使用扫码器/扫码枪读取条形码/二维码等，及使用读卡器读取卡ID（需要读卡器支持键盘输入卡ID，此种方式只支持读取未加密的卡ID信息，读取加密信息请使用NFC方式）。

操作

读取外设键盘输入会有两种情况，一种是外设在输入信息后会有一个Enter键输入作为结束，另一种则不会有，所以针对这部分会有两种处理方式，下文会做区分。

引入官方包

在uniapp项目根目录下的package.json文件中引入uniapp-keyboard-listener包，没有该文件则创建，package.json文件内容如下：

{
  "dependencies": {
    "uniapp-keyboard-listener": "^1.0.3"
  }
}

注册监听

在onLoad周期中注册键盘输入监听：

1. 在这里需要注意，首尾的注释不要去除
2. 这里我使用了keyup事件，即键盘按下去后的松开事件；部分机子可能会有问题，可以视情况更换为keydown试试，即键盘按下事件。
3. KeyEvent是键盘输入的内容，keyCode是键盘按键的键码，keyValue是键盘按键的键值。
4. 一般情况下，直接使用keyValue作为内容读取就好，但是部分机子可能会出现键码keyCode和键值keyValue对应不准问题，即不是标准键码（标准键盘码可自行百度），这就需要我们手动处理了。
5. 为了兼容可能出现的第4种情况，我们会在scan中直接使用键码来获取自定义的键值，而不是直接读取输入。

// #ifdef APP-PLUS
plus.key.addEventListener('keyup', function(KeyEvent) {
	console.log("监听键按下事件：", KeyEvent.keyCode, KeyEvent.keyValue);
	this.scan(KeyEvent) // 处理键码键值对应关系
});
// #endif

处理输入

定义变量

• code为最终读取的输入。
• codeArr为读取的结果数组，code由此生成。
• keyCode为自定义键码对应输入的键值，这个和标准有差异，可根据情况修改。

code: '',
codeArr: '',
timing_open: null,    // 无Enter输入情况下需要使用
keyCode: {
	7: 0,
	8: 1,
	9: 2,
	10: 3,
	11: 4,
	12: 5,
	13: 6,
	14: 7,
	15: 8,
	16: 9,
},

方式1：有Enter输入

以下代码中，Enter键键码为66（可视情况修改），所以在读取到键码为66时就表示获取到了完整的卡号，可用于处理后续。

scan(e) {
	let _this = this

	if (e.keyCode === 66) { // enter键
		_this.code = _this.codeArr.join("")
		console.log("-=-=-=卡号-=-=-", _this.codeArr, _this.code);
		_this.codeArr = []
        // 其他操作
	} else {
		_this.codeArr.push(_this.keyCode[e.keyCode])
	}
}

方式2：无Enter输入

无enter输入的方式处理起来会麻烦一点点，需要多预定义一个变量timing_open用于处理setTimeout。此处setTimeout的作用是用于键盘输入中断时读取完整的输入，一般键盘输入会有一个时间间隔，我这里是100毫秒，可以视实际情况进行调整。

scan (e){
	let _this = this
	
	clearTimeout(_this.timing_open)
	
	_this.codeArr.push(_this.keyCode[e.keyCode])
	_this.timing_open = setTimeout(function () {
		_this.code = _this.codeArr.join("")
        console.log("-=-=-=卡号-=-=-", _this.codeArr, _this.code);
		_this.codeArr = []
        // 其他操作
	}, 100)
			
}

参考

安卓键盘输入（本文使用的）：Android KEYCODE键值对应大全-CSDN博客

标准键盘输入：键盘键码keyCode对照表-CSDN博客