UNIAPP实现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’)
方法二参考: //ask.dcloud.net.cn/article/37294