PDA按键扫描功能

最新推荐文章于 2025-01-02 10:25:46 发布

原创最新推荐文章于 2025-01-02 10:25:46 发布 · 2.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #pda

uniapp 同时被 2 个专栏收录

4 篇文章

订阅专栏

PDA

2 篇文章

订阅专栏

该博客介绍了一个在Vue.js中创建的通用扫码组件，通过注册和接收Android的广播来实现实时扫码功能。当接收到广播事件时，组件会触发自定义事件将扫码结果传递给父组件。在父组件中，可以通过监听这个事件来处理扫码后的业务逻辑。代码示例展示了如何在组件和父页面之间进行通信，确保在页面生命周期的不同阶段正确地启动和停止扫码监听。

创建通用组件

<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() {
            this.stopScan();
        },
        methods: {
            initScan() {
                let _this = this;
                main = plus.android.runtimeMainActivity();
                var IntentFilter = plus.android.importClass('android.content.IntentFilter');
                filter = new IntentFilter();
                //下面的addAction内改为自己PDA的广播动作
                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);
                        //下面的getStringExtra内改为自己PDA的广播标签
                        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);
                uni.$emit('scan', code)
            }
        }
    }
</script>

父组件调用：（根据页面逻辑进行相应的判断）

<template>
	<view>我是index页面</view>
    <!-- 还要记得这里加上组件 -->
    <scan></scan>
</template>

<script>
	export default {
		data() {
			return {
				code: ''
			}
		},
		onShow: function() {
			let that = this
			uni.$off('scan') // 每次进来先 移除全局自定义事件监听器
			// uni.$on('scan', function(data) {
            uni.$on('scan',(data)=> {
                that.account = ''
		        //扫码成功后的回调，你可以写自己的逻辑代码在这里
				// console.log('扫码结果：', data);
				setTimeout(()=>{
					this.code = data
					console.log(that.code)
				},300)
			})
		},
		methods: {

		}
	}
</script>