一般的掃碼槍通過(guò)USB或藍(lán)牙連接手機(jī)或電腦，充當(dāng)?shù)氖且粋€(gè)外接設(shè)備。當(dāng)掃碼后，掃碼槍會(huì)自動(dòng)識(shí)別內(nèi)容，然后向連接的電腦或手機(jī)發(fā)送鍵盤(pán)事件keydown或keyup。

input輸入框式

如果頁(yè)面上有input輸入框就很簡(jiǎn)單，直接聚焦input，然后掃碼，input框會(huì)自動(dòng)填充內(nèi)容，并自動(dòng)產(chǎn)生回車事件，代碼只需處理回車事件即可。

<template>
    <input v-model="inputString" @confirm="onConfirm" />
</template>

<script setup>
import { ref } from "vue"
const inputString = ref("")
const onConfirm = () => {
    console.log('輸入的值為', inputString.value)
}
</script>

以上代碼，h5、App都適用。

無(wú)輸入框式

沒(méi)有input框時(shí)，就需要監(jiān)聽(tīng)頁(yè)面的鍵盤(pán)事件。h5可以使用document.keyup來(lái)監(jiān)聽(tīng)，但是app里沒(méi)有document，只能使用plus.key來(lái)監(jiān)聽(tīng)。處理邏輯一樣，只是監(jiān)聽(tīng)方式不一樣。

同時(shí)兼容H5和APP的用法

<template>
    <view>監(jiān)聽(tīng)到的內(nèi)容：{{inputString}}</view>
</template>

<script setup>
import { ref } from "vue"
import { onLoad, onShow, onHide, onBackPress, onUnload } from "@dcloudio/uni-app";
const inputString = ref('')
const keyCodeCache = ref([])
const inputCache = ref('')
const onConfirm = (code)=>{
    console.log('拿到的code', code);
    // 此處寫(xiě)我們自己的邏輯
}
const keypress = (e) => {
    if (e.keyCode === 66 || e.key =='Enter') {
        inputString.value = inputCache.value;
        onConfirm(inputString.value)
        inputCache.value = '';
    } else {
        inputCache.value += e.key
    }
}


onLoad((options) => {
    // #ifdef APP-PLUS
    plus.key.addEventListener("keyup", keypress);
    // #endif 
    // #ifdef H5
    document.addEventListener("keyup", keypress);
    // #endif
})
onUnload(()=>{
    // #ifdef APP-PLUS
    plus.key.removeEventListener("keyup", keypress);
    // #endif
    // #ifdef H5
    document.removeEventListener("keyup", keypress);
    // #endif
})
onHide(()=>{
    // #ifdef APP-PLUS
    plus.key.removeEventListener("keyup", keypress);
    // #endif
    // #ifdef H5
    document.removeEventListener("keyup", keypress);
    // #endif
})
onBackPress(()=>{
    // #ifdef APP-PLUS
    plus.key.removeEventListener("keyup", keypress);
    // #endif
    // #ifdef H5
    document.removeEventListener("keyup", keypress);
    // #endif
})
</script>

實(shí)際運(yùn)行時(shí)，可能出現(xiàn)鍵盤(pán)的key和keyCode不兼容問(wèn)題，不同的設(shè)備對(duì)應(yīng)的鍵盤(pán)keyCode可能也不一樣，首先要設(shè)置掃碼槍的鍵盤(pán)模式，然后做一層轉(zhuǎn)換。
下面的掃碼槍設(shè)置為US Keyboard的轉(zhuǎn)換部分邏輯文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-507918.html

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 以下來(lái)源網(wǎng)絡(luò)收集，不同的設(shè)備對(duì)應(yīng)的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": "+"
}

到了這里，關(guān)于uniapp監(jiān)聽(tīng)掃碼槍鍵盤(pán)事件|無(wú)輸入框式監(jiān)聽(tīng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！