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

前言

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

操作

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

引入官方包

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

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

注册监听

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

在这里需要注意，首尾的注释不要去除
这里我使用了keyup事件，即键盘按下去后的松开事件；部分机子可能会有问题，可以视情况更换为keydown试试，即键盘按下事件。
KeyEvent是键盘输入的内容，keyCode是键盘按键的键码，keyValue是键盘按键的键值。
一般情况下，直接使用keyValue作为内容读取就好，但是部分机子可能会出现键码keyCode和键值keyValue对应不准问题，即不是标准键码（标准键盘码可自行百度），这就需要我们手动处理了。
为了兼容可能出现的第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 = thisif (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 = thisclearTimeout(_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)}