UNIAPP实现PDA扫码

博客 分享
0 168
张三
张三 2022-05-12 16:59:08
悬赏:0 积分 收藏

UNIAPP实现PDA扫码

目前我接触到了两种方法,以扫码pda安卓采集器(可以直接理解为手机上有个激光扫码)的设置划分。

1.扫描设置 --> 键盘方式输出(键盘类型:物理键盘),注意设置要看具体的型号;

2.扫码设置 --> 广播输出

第一种 “键盘方式输出” 直接在input里接收扫到的内容;

第二种 “广播输出” 是写一个公共组件,全局监听。

 

 键盘方式输出

1.input直接拿

注:我司的机器里,可以在设置-->条码格式化里加后缀【CR】(回车键),加入后可在扫描完成后触发@confirm

不可以设置后缀,就在@input里加个setTimeout取消掉焦点(focus = false)

<input type="text" v-model="searchText"  :focus="focus" placeholder="请扫描" @confirm="submit" @focus="searchText=''"/>
<script>

  submit() {
    console.log(this.searchText)
  },

</script>

 

 

 

广播输出

1.新建公共组件 scan-code,目录:components/scan-code/scan-code.vue。

注:代码里的filter.addAction里换成你的广播动作,intent.getStringExtra里换成你的广播标签。在扫码枪的设置里有。

 

<template>    <view ></view></template><script>var main, receiver, filter;var _codeQueryTag = false;export default {    data() {        return {            scanCode: ''        };    },    created: function(option) {        this.initScan();        this.startScan();    },    onHide: function() {        this.stopScan();    },    destroyed: function() {        /*页面退出时一定要卸载监听,否则下次进来时会重复,造成扫一次出2个以上的结果*/        this.stopScan();    },    methods: {        initScan() {            let _this = this;            main = plus.android.runtimeMainActivity(); //获取activity            var IntentFilter = plus.android.importClass('android.content.IntentFilter');            filter = new IntentFilter();            filter.addAction('android.intent.ACTION_DECODE_DATA'); // 换你的广播动作            receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {                onReceive: function(context, intent) {                    plus.android.importClass(intent);                    let code = intent.getStringExtra('barcode_string'); // 换你的广播标签                    _this.queryCode(code);                }            });        },        startScan() {            main.registerReceiver(receiver, filter);        },        stopScan() {            main.unregisterReceiver(receiver);        },        queryCode: function(code) {            //防重复            if (_codeQueryTag) return false;            _codeQueryTag = true;            setTimeout(function() {                _codeQueryTag = false;            }, 150);            var id = code;            uni.$emit('scancodedate', { code: id });        }    }};</script>

 

2.引用

<template>      <view>          <scan-code></scan-code>      </view>  </template><script>  import scanCode from "@/components/scan-code/scan-code.vue";  export default {      components: { scanCode },      data() {          return {}      }      onShow: function() {          var _this = this          uni.$off('scancodedate') // 每次进来先 移除全局自定义事件监听器          uni.$on('scancodedate',function(data){              console.log('你想要的code:', data.code)          })      }  } </script>

3.其他

注:其他的页面引用方法不需要再次引入scanCode
因为其他的页面都是从首页跳转过来的,所以其他的页面需要移除监听事件

onLoad() {     var _this = this     uni.$on('scancodedate',function(data){          // _this 这里面的方法用这个 _this.code(data.code)      console.log('你想要的code:', data.code)     })  },  onUnload() {     // 移除监听事件         uni.$off('scancodedate')  } 

4.如果这个页面还有详细页面需要跳转,在uni.navigateTo   之前一定要 uni.$off('scancodedate')

 

 方法二参考: https://ask.dcloud.net.cn/article/37294

 

posted @ 2022-05-12 16:57 公侯好仇 阅读(0) 评论(0) 编辑 收藏 举报
回帖
    张三

    张三 (王者 段位)

    821 积分 (2)粉丝 (41)源码

     

    温馨提示

    亦奇源码

    最新会员