PDA手持终端输出方式分为广播输出和键盘输出,针对广播输出和键盘输出获取到扫码或者输入的值

方式一、PDA手持终端激光扫码调用方式(广播输出)

<template>
    <view class="content"></view>
</template>

<script>
// #ifdef APP-PLUS
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 });
        },
    },
};
// #endif
</script>

在扫码的页面引入组件并注册然后在页面中使用

<template>
   <scan></scan>
</template>


import scan from "@/components/scan/scan.vue"

export default {
		components: {
			scan
		},
     }

//获取到扫码的结果,进行后续的处理
onShow: function() {
			var _this = this
			uni.$off('scancodedate') // 每次进来先 移除全局自定义事件监听器  
			uni.$on('scancodedate', function(data) {
				console.log('你想要的code:', data.code)
			})
		},

方式二、PDA手持终端键盘输出(键盘方式)

confirm-type的类型为search,每次点击搜索之后触发@confirm,在@confirm的方法中获取到input框中的值

<input class="scan" border="surround" @blur="lose()" v-model="code" :focus="focus"
					@confirm="submit()" confirm-type="search" :adjust-position="false" :selection-start="50"
					:selection-end="-50">
<input>

<script>
  submit() {
    console.log(this.code)
  },

</script>

注意点:

1.input框需要在焦点状态才能自动获取扫码枪的条码值

lose() {
				this.focus = false
				this.$nextTick(() => {
					this.focus = true
				})
			},

2.有些时候,input自动获取焦点的时候,弹出的软键盘非要烦人,我们在扫码的时候根本不需要键盘输入,而且软键盘弹起还会默认上推页面,体验不好,而且,uniapp暂时也不支持input焦点不弹起键盘,所以建议需要默认焦点的使用adjust-position属性,让软键盘弹起默认不上推页面,这样体验好一些

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐