uniapp在PDA手持終端掃碼

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"  @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屬性，讓軟鍵盤彈起預設不上推頁面，這樣體驗好一些