uniapp在PDA手持终端扫码
uniapp在PDA手持终端扫码
·
PDA手持终端输出方式分为广播输出和键盘输出,针对广播输出和键盘输出获取到扫码或者输入的值
方式一、PDA手持终端激光扫码调用方式(广播输出)
<template>
<view class="content"></view>
</template>
<script>
// #ifdef APP-PLUS
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 });
},
},
};
// #endif
</script>
在扫码的页面引入组件并注册然后在页面中使用
<template>
<scan></scan>
</template>
import scan from "@/components/scan/scan.vue"
export default {
components: {
scan
},
}
//获取到扫码的结果,进行后续的处理
onShow: function() {
var _this = this
uni.$off('scancodedate') // 每次进来先 移除全局自定义事件监听器
uni.$on('scancodedate', function(data) {
console.log('你想要的code:', data.code)
})
},
方式二、PDA手持终端键盘输出(键盘方式)
confirm-type的类型为search,每次点击搜索之后触发@confirm,在@confirm的方法中获取到input框中的值
<input class="scan" border="surround" @blur="lose()" v-model="code" :focus="focus"
@confirm="submit()" confirm-type="search" :adjust-position="false" :selection-start="50"
:selection-end="-50">
<input>
<script>
submit() {
console.log(this.code)
},
</script>
注意点:
1.input框需要在焦点状态才能自动获取扫码枪的条码值
lose() {
this.focus = false
this.$nextTick(() => {
this.focus = true
})
},
2.有些时候,input自动获取焦点的时候,弹出的软键盘非要烦人,我们在扫码的时候根本不需要键盘输入,而且软键盘弹起还会默认上推页面,体验不好,而且,uniapp暂时也不支持input焦点不弹起键盘,所以建议需要默认焦点的使用adjust-position属性,让软键盘弹起默认不上推页面,这样体验好一些
更多推荐
已为社区贡献5条内容
所有评论(0)