uniapp监听扫码枪键盘事件|无输入框式监听

这篇文章，是纯借鉴下面这一篇文章的，感觉下面这一篇文章写的非常好

uniapp监听扫码枪键盘事件|无输入框式监听_uniapp如何监听扫码枪回车事件-CSDN博客

一般的扫码枪通过USB或蓝牙连接手机或电脑，充当的是一个外接设备。当扫码后，扫码枪会自动识别内容，然后向连接的电脑或手机发送键盘事件keydown或keyup。

input输入框式

如果页面上有input输入框就很简单，直接聚焦input，然后扫码，input框会自动填充内容，并自动产生回车事件，代码只需处理回车事件即可。

(这是用的vue3的逻辑)

(这是用的vue2的逻辑)

• data 函数返回一个对象，该对象包含组件的响应式状态。在这个例子中，我们有一个名为 inputString 的状态变量。
• methods 对象包含组件的方法，这里我们定义了 onConfirm 方法，它将在事件发生时被触发。

请注意，Vue 2 中绑定方法到模板时，不需要使用 setup 属性。所有的方法和数据都直接通过 data 和 methods 访问。此外，Vue 2 不使用

(这是用的vue2的逻辑)

要将这段代码从 Vue 3 的 Composition API 改写为 Vue 2 的选项式 API（Options API），你需要做一些关键的调整。主要的变化是将 ref 替换为 data 函数，将 onLoad, onShow, onHide, onBackPress, 和 onUnload 的逻辑移动到 Vue 2 的生命周期钩子中，并将 keypress 函数和 onConfirm 函数定义在 methods 中。下面是改写后的代码：

在这个 Vue 2 版本中：

• 将数据定义在 data() 函数中，这是 Vue 2 管理响应式数据的方式。
• 将函数定义在 methods 对象中。
• 使用 mounted 钩子来添加事件监听器，这个钩子在组件首次渲染到 DOM 后被调用。
• 使用 beforeDestroy 钩子来清理事件监听器，这个钩子在组件销毁前被调用。
• 使用 deactivated 钩子来处理组件停用时的事件清理，适用于 缓存的组件。

请注意，#ifdef 指令是 uni-app 特有的，用于条件编译。它不是标准的 Vue 语法，但在 uni-app 项目中有效。

可能出现的问题：

实际运行时，可能出现键盘的key和keyCode不兼容问题，不同的设备对应的键盘keyCode可能也不一样，首先要设置扫码枪的键盘模式，然后做一层转换。
下面的扫码枪设置为US Keyboard的转换部分逻辑

import keymap from './keymap'
const keypress = (e) => {
    if (e.keyCode === 66 || e.key =='Enter') {
        inputString.value = inputCache.value;
        inputCache.value = '';
        onConfirm(inputString.value)
    } else {
        inputCache.value += keymap[e.keyCode] || ''
    }
}

// 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": "+"
}