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

前言

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

uniapp 获取外设键盘输入(扫码器/扫码枪/读卡器等)_第1张图片uniapp 获取外设键盘输入(扫码器/扫码枪/读卡器等)_第2张图片uniapp 获取外设键盘输入(扫码器/扫码枪/读卡器等)_第3张图片

操作

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

引入官方包

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

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

uniapp 获取外设键盘输入(扫码器/扫码枪/读卡器等)_第4张图片

注册监听

在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博客

你可能感兴趣的:(大前端,#,JavaScript,uni-app,键盘输入,扫码器,扫码枪,读卡器)