Uni-app实现PDA扫码枪获取扫码内容基于uni-app和wot-design-uni在PDA扫码终端上实现扫码功能

背景:基于uni-app和wot-design-uni在PDA扫码终端上实现扫码功能

思路：基于input聚焦的情况下，PDA扫码通过input的@input事件获取扫码内容

wot-design-uni input

<wd-input type="text" :no-border="true" placeholder="请输入条码号" :focus="focus"@focus="hideKeyboard" v-model="scanCodeValue" ref="scanInputRef" id="scanInput" @confirm="keypress" @blur="() => focus = false"></wd-input>

html5plus

PDA端使用uni-app内置的原生对象进行全局监听,监听keydown和keyup事件，根据扫码枪返回的code进行判断；在input聚焦的情况下，扫码枪的keyup事件结束后，可以获取input的value值。

onLoad(async (options) => { 
  // #ifdef APP-PLUS
  plus.key.addEventListener("keydown", keydownEvent)
  plus.key.addEventListener("keyup", keyupEvent)
  // #endif 
})
//控制input聚焦
let focus = ref(false)
//callback操作锁
let scanAble = ref(false)
//input-value
let scanCodeValue = ref('')

const keyupEvent = async (e) => {
  if (e.keyCode == 290 || e.keyCode == 291) {
    if ((scanCodeValue.value !== '') || scanAble == false) {
      scanCodeValue.value = ''
      return false   
    }else if(scanAble == true){
      //todo获得扫码内容后callback操作   
    }  
  }
}
const keydownEvent = (e) => {
  //安卓PDA扫码返回的keyCode
  if (e.keyCode == 290 || e.keyCode == 291) {
    // 防止过度频繁扫码
    if (scanCodeValue.value !== '' || scanAble == false) {
      e.preventDefault()     
    } else {
      //input非聚焦情况下,自动聚焦
      if (focus.value == false) {
        focus.value = false
        nextTick(() => {
          focus.value = true
        })
      }
    }
  }
}

连续扫码实现：通过foucs属性控制input在扫码后不失焦
防止物理扫码键连续点击：使用条码的正则规则和控制callback的变量，在keyup回调中对input-value进行拦截