js vue调用安卓移动端的扫码枪扫描功能

最新推荐文章于 2025-08-13 14:39:52 发布

原创最新推荐文章于 2025-08-13 14:39:52 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #firefox #开发语言

js 同时被 3 个专栏收录

28 篇文章

订阅专栏

移动端

6 篇文章

订阅专栏

HBuilder

5 篇文章

订阅专栏

这篇博客介绍了如何在JavaScript和Vue环境下处理扫码枪输入的数据。通过监听键盘事件，实现快速连续输入的条形码合并，并在条形码输入完成后进行业务处理。在Vue组件中，当接收到回车键事件时，会触发扫码结束，输出条形码并执行相关逻辑。此外，还提供了针对不同长度条形码的处理策略。

js版

//引入jq
//调扫码枪
$(function(){
    initScannerModule();
}) 
  function initScannerModule(){
       var code = "";
       var lastTime,nextTime;
       var lastCode,nextCode;
   
       document.onkeypress = function(e) {
           nextCode = e.which;
           nextTime = new Date().getTime();
   
           if(lastCode != null && lastTime != null && nextTime - lastTime <= 30) {
               code += String.fromCharCode(lastCode); 
           } else if(lastCode != null && lastTime != null && nextTime - lastTime > 100){
               code = "";
           }
   
           lastCode = nextCode;
           lastTime = nextTime;
       }
   
       this.onkeypress = function(e){
           if(e.which == 13){
   
               //2.获取到条形码 code
               console.log(code);



//							
               //3.根据条形码处理相关业务
   
              
//             code = "";
           }
       } 
  }

vue版

<template>
  <div class=''>
      扫描
  </div>
</template>

<script>
export default {
  name: 'sao',
  props: { }, // 父传子
  data () { // 定义数据项
    return { }
  },
  computed: { }, // 计算属性
  components: { }, // 接收子组件
    created() {
    window.document.onkeypress = (e) => {
      if (window.event) { // IE
        this.nextCode = e.keyCode
      } else if (e.which) { // Netscape/Firefox/Opera
        this.nextCode = e.which
      }

      if (e.which === 13) { // 键盘回车事件
        if (this.code.length < 3) return // 扫码枪的速度很快，手动输入的时间不会让code的长度大于2，所以这里不会对扫码枪有效
        console.log('扫码结束。')
        console.log('条形码：', this.code)
        this.parseQRCode(this.code) // 获取到扫码枪输入的内容，做别的操作
        this.lastCode = ''
        this.lastTime = ''
        return
      }

      this.nextTime = new Date().getTime()
      if (!this.lastTime && !this.lastCode) {
        this.code = '' // 清空上次的条形码
        this.code += e.key
        console.log('扫码开始---', this.code)
      }
      if (this.lastCode && this.lastTime && this.nextTime - this.lastTime > 500) { // 当扫码前有keypress事件时,防止首字缺失
        this.code = e.key
        console.log('防止首字缺失。。。', this.code)
      } else if (this.lastCode && this.lastTime) {
        this.code += e.key
        console.log('扫码中。。。', this.code)
      }
      this.lastCode = this.nextCode
      this.lastTime = this.nextTime
    }
  },
  methods: {
    parseQRCode(code) {
      if (code.length === 13) {
        // 处理自己的逻辑
        this.$emit('barCode', code) //通知父组件
      } else if (code.length === 23) {
        console.log('B类条码:' + code)
      } else if (code.length === 0) {
        console.log('请输入条码！')
      } else {
        alert('条码不合法：' + code)
      }
      this.codeValue = code
    }
  }
}

</script>

<style scoped lang='less'></style>