坚果手持机UNI-APP监听扫码广播获取条码信息

发布日期：2021-04-14 来源: 本站 阅读量（2506）

坚果手持机UNI-APP监听扫码广播获取条码信息

         坚果手持机本身自带扫描插件，可以把扫描的一维码，二维码输出到焦点编辑框或者焦点输入框中，并附加回车事件（Enter）作为结束符，所以开发者无论用UNI-app还是其他工具进行开发，都可以通过监听回车事件进行操作判断。

         uni-app要做扫描条码的解析，然后分别把对应内容给不同的输入框的时候，可以通过先用一个输入框通过扫码插件来获取扫码信息，然后监听回车事件之后，把获取的扫码信息在进行解析，放到不同的输入框，这个是一个比较笨的办法，我们可以通过监听广播获取扫码的信息。

         

在uni-app中实现pda的广播扫码功能
方案就是做一个全局监听，只引入一次，来防止很多页面都引入了扫码的组件，造成多次扫描，数据出现多次
知识点：全局监听：官网的全局监听地址
uni.$emit：触发全局的自定事件。附加参数都会传给监听器回调。
uni.$on：监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数
uni.$off：移除全局自定义事件监听器。

注意：一定要记得移除全局事件，不燃就会出现多次扫描

一、 PDA设置为广播模式

二、 在你的uni-app项目里 新建一个公共组件 就叫 scan-code 吧，放到公共组件components中，目录：components/scan-code/scan-code.vue

这里就用到了广播动作和广播数据标签
filter.addAction("jr.android.server.scannerservice.broadcast")
intent.getStringExtra("barcodedata")
代码如下：

<template> 

    <view class="content"></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("jr.android.server.scannerservice.broadcast");   

            receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver',{ 

            onReceive : function(context, intent) { 

                plus.android.importClass(intent);    

                let code = intent.getStringExtra("barcodedata");

                _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 

            console.log('id:', id) 

            uni.$emit('scancodedate',{code:id}) 

        } 

    } 

} 

</script> 

 

<style> 

    page { 

        background-color: #efeff4; 

    } 

    .content { 

        text-align: center; 

    } 

</style>

 

三：页面引用，只引用一次就好，我是index.vue 引用的，我的app的其他功能都是在这个页面链接走的
直接上代码：
切记：首页往各个子页面跳转的时候 移除监听事件uni.$off('scancodedate')，要不首页的监听会一直存在，就会出现首页这个扫码
uni.navigateTo({ 之前、之前、之前 uni.$off('scancodedate')

复制代码<template>

    <view>

        <view>你的页面内容</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)

        })

    }

}

其他的页面引用方法：不需要再次引入scanCode
因为其他的页面都是从首页跳转过来的，所以其他的页面需要
onUnload() {
// 移除监听事件
uni.$off('scancodedate')
}

代码如下：

复制代码onLoad() {

   var _this = this

   uni.$on('scancodedate',function(data){

        // _this 这里面的方法用这个 _this.code(data.code)

    console.log('你想要的code：', data.code)

   })

},

onUnload() {

   // 移除监听事件

   uni.$off('scancodedate')

}

如果这个页面还有详细页面需要跳转，切记 uni.navigateTo({ 之前、之前、之前 uni.$off('scancodedate')