首页 > 其他分享> 文章详细

UNIAPP实现PDA扫码

2022-05-12 17:00:07 阅读：363 来源： 互联网

标签：function UNIAPP 扫码 code scancodedate var uni data PDA

目前我接触到了两种方法，以扫码pda安卓采集器（可以直接理解为手机上有个激光扫码）的设置划分。

1.扫描设置 --> 键盘方式输出（键盘类型：物理键盘），注意设置要看具体的型号；

2.扫码设置 --> 广播输出。

第一种 “键盘方式输出” 直接在input里接收扫到的内容；

第二种 “广播输出” 是写一个公共组件，全局监听。

键盘方式输出

1.input直接拿

注：我司的机器里，可以在设置-->条码格式化里加后缀【CR】（回车键），加入后可在扫描完成后触发@confirm

不可以设置后缀，就在@input里加个setTimeout取消掉焦点（focus = false）

<input type="text" v-model="searchText"  :focus="focus" placeholder="请扫描" @confirm="submit" @focus="searchText=''"/>

<script>

　　submit() {
　　　　console.log(this.searchText)
　　},

</script>

广播输出

1.新建公共组件 scan-code，目录：components/scan-code/scan-code.vue。

注：代码里的filter.addAction里换成你的广播动作，intent.getStringExtra里换成你的广播标签。在扫码枪的设置里有。

<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('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 });
        }
    }
};
</script>

2.引用

<template>  
    <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)  
        })  
    }  
} 
</script>

3.其他

注：其他的页面引用方法不需要再次引入scanCode
因为其他的页面都是从首页跳转过来的，所以其他的页面需要移除监听事件

onLoad() {  
   var _this = this  
   uni.$on('scancodedate',function(data){  
        // _this 这里面的方法用这个 _this.code(data.code)  
    console.log('你想要的code：', data.code)  
   })  
},  
onUnload() {  
   // 移除监听事件      
   uni.$off('scancodedate')  
}

4.如果这个页面还有详细页面需要跳转，在uni.navigateTo 之前一定要 uni.$off('scancodedate')

方法二参考： https://ask.dcloud.net.cn/article/37294

标签：function,UNIAPP,扫码,code,scancodedate,var,uni,data,PDA
来源： https://www.cnblogs.com/czq091449/p/16263218.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

UNIAPP实现PDA扫码