uni-app实现PDA采集器扫码

一、开发建议

1、建议使用nvue开发，体检会非常好，使用uni.preloadPage({url: “/pages/index”})预加载页面，页面的流畅程度会提高非常多，单独vue的写法，打包成安卓体验很不好，模块加载很慢，页面加载的时候明显h5的感觉。
2、nvue的样式很不好写，建议使用真机实时观看样式处理。

二、实现pad扫码采集

1、在components里创建nvue文件，具体代码如下

<template>  
    <div class="content"></div>  
</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.xxxxxxxxxxxx"); // 换你的广播动作  
            receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver',{  
            onReceive : function(context, intent) {
				uni.showLoading({
						title: '正在查询'
					})
                plus.android.importClass(intent);     
                let code = intent.getStringExtra("xxxxx");// 换你的广播标签  
                _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>

2、找到采集器里的广播，查看广播名称和键值名称，在上面新建的vue文件中更换以下信息。不同采集器品牌适配，直接在采集器里面更改为统一的信息。

 filter.addAction("android.xxxxxxxxxxxx"); // 换你的广播动作  
  let code = intent.getStringExtra("xxxxx");// 换你的广播标签  

3、新建nvue页面，引用上述文件即可调用采集器的扫码功能。

<template>
	<div class="content">
		<ScanCode></ScanCode>
	</div>
</template>

<script>
	import ScanCode from '@/components/code/ScanCode.nvue';
	export default {
		components: {
			ScanCode
		},
		data() {
			return {
			}
		},
		onShow: function() {
			var _this = this
			uni.$off('scancodedate') // 每次进来先 移除全局自定义事件监听器  
			uni.$on('scancodedate', function(data) {
			console.log(data.code,'data.code为扫码内容')
			uni.hideLoading();
			})
		},
	}
</script>

欢迎留言讨论。