建设网站需要申请报告,市场调研数据网站,易网拓营销型网站,电子商务的理解前言
在使用uniapp开发收银机等设备时#xff0c;常常会用到使用键盘输入的外设#xff0c;如使用扫码器/扫码枪读取条形码/二维码等#xff0c;及使用读卡器读取卡ID#xff08;需要读卡器支持键盘输入卡ID#xff0c;此种方式只支持读取未加密的卡ID信息#xff0c;读…前言
在使用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)} 参考
安卓键盘输入本文使用的Android KEYCODE键值对应大全-CSDN博客
标准键盘输入键盘键码keyCode对照表-CSDN博客
