uniapp集成设备终端PDA激光扫描功能

uniapp实现pda的具体原理是在设备端需要开启广播模式，uniapp端通过调用方法来获取设备端扫描到的数据，从而在APP端对扫描的结果进行控制

一、设置终端设备的扫描设置

• 设置扫描的输出模式为广播输出; 我的终端是在扩展设置->扫描设置->输出模式中
• 查看广播输出的配置信息
  • 我的广播输出action是nlscan.action.SCANNER_RESULT
  • extra是 SCAN_BARCODE1 PS: 需要记录广播输出配置的action 和 extra信息，在uniapp中需要对这两个参数哦

用到action 和 extra的关键代码如下

   // 其中的'nlscan.action.SCANNER_RESULT'是需要和你设备中广播的action一致
   this.intentFilter.addAction('nlscan.action.SCANNER_RESULT')
   
   // 其中的 'SCAN_BARCODE1'和action一样的方式，需要和广播中配置的Extra一致
   let content = intent.getStringExtra('SCAN_BARCODE1'); 

完整代码参考 自定义组件"pda-scan" 的initScan方法

一、创建自定义组件pda-scan

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

<script>
export default {
    data() {
        return {
            activity: null,
            receiver: null,
            intentFilter: null
        }
    },
    created: function(option) {
        this.initScan()
        this.startScan();
    },
    onHide: function() {
        this.stopScan();
    },
    destroyed: function() {
        //页面退出时一定要卸载监听,否则下次进来时会重复，造成扫一次出2个以上的结果/
        this.stopScan();
    },
    methods: {
        initScan() {
            let _this = this;
            this.activity = plus.android.runtimeMainActivity(); //获取activity
            var IntentFilter = plus.android.importClass('android.content.IntentFilter');
            this.intentFilter = new IntentFilter();
            // 其中的'nlscan.action.SCANNER_RESULT'是需要和你设备中广播的action一致
            this.intentFilter.addAction('nlscan.action.SCANNER_RESULT')
            this.receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
                onReceive: function(context, intent) {
                    console.log("intent",intent)
                    plus.android.importClass(intent);
                    // 其中的 'SCAN_BARCODE1'和action一样的方式，需要和广播中配置的Extra一致
                    let content = intent.getStringExtra('SCAN_BARCODE1'); 
                    uni.$emit('scancodedate', content)
                }
            });
        },
        startScan() {
            this.activity.registerReceiver(this.receiver, this.intentFilter);
        },
        stopScan() {
            this.activity.unregisterReceiver(this.receiver);
        }
    }
}
</script>

二、引入自定义组件pda-scan

<template>
    <view>
        <view>你的页面内容</view>
        <view v-for="item in content">{{item}}</view>
        <pda-scan></pda-scan>
    </view>
</template>

<script>
import scanCode from '@/components/scan-code/scan-code.vue';
export default {
    components: { scanCode },
    data() {
        return {
            content: []
        }
    },
    onLoad() {
        var _this = this
        uni.$on('scancodedate', function(content) {
            console.log("扫描到的内容为:", content)
            _this.content.push(content)
        })
    }
}
</script>

三个步骤完成后，只需要启动项目，打开存在app后，直接使用设备终端的扫描功能即可得到响应。

需要注意的是你打开的页面是要存在<scan-code></scan-code>标签的页面哦