该方式仅限广播模式使用,使用前请注意是否设置好;
该方法参考别人,但没使用全局监听方式,而是使用每次进出页面重新加载组件的方式.
参考部分
https://ask.dcloud.net.cn/article/37294;
http://blog.itpub.net/31486267/viewspace-2739999/
使用部分
<template>
<view>
<view class="">
扫描结果:{{name}}
</view>
<monitorScanCode v-if="scanCodeIsShow" @resultCode="resultCode"></monitorScanCode>
</view>
</template>
<script>
import monitorScanCode from '@/components/monitorScanCode/monitorScanCode.vue';
export default {
data() {
return {
name:'请扫描',
scanCodeIsShow: false //控制监听扫描头 组件重新加载
};
},
components: {
monitorScanCode
},
onLoad() {},
onShow: function() {
this.scanCodeIsShow = true;
},
methods: {
resultCode(item) {
this.name=item;
console.log(item, '结果');
}
},
// 页面隐藏
onHide() {
this.scanCodeIsShow = false;
},
// 页面卸载
onUnload() {
this.scanCodeIsShow = false;
}
};
</script>
<style lang="scss"></style>
组件部分
<template>
<view class="content"></view>
</template>
<script>
var main, receiver;
var shakeIsShow = false;
export default {
name:'monitorScanCode',
data() {
return {
};
},
created(option) {
this.monitorScan();
},
// 组件销毁
destroyed(){
this.cancelScan();
},
methods: {
// 广播监听绑定
monitorScan() {
// PDA扫描必须设置广播模式
main = plus.android.runtimeMainActivity(); //获取activity
let IntentFilter = plus.android.importClass('android.content.IntentFilter');
let filter = new IntentFilter();
filter.addAction('android.intent.ACTION_DECODE_DATA'); //广播动作
let that = this;
let context = plus.android.importClass('android.content.Context');
let Intent = plus.android.importClass('android.content.Intent');
receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
onReceive: function(context, intent) {
plus.android.importClass(intent); //引入intent类
let data = intent.getStringExtra('barcode_string'); //广播数据标签
that.antiShake(data);
}
});
main.registerReceiver(receiver, filter); //注册监听
},
//取消监听扫描头
cancelScan() {
main.unregisterReceiver(receiver);
},
//防重复
antiShake: function(code) {
if (shakeIsShow) return false;
shakeIsShow = true;
setTimeout(function() {
shakeIsShow = false;
}, 150);
this.$emit("resultCode", code)
}
}
};
</script>
<style>
page {
background-color: #efeff4;
}
.content {
text-align: center;
}
</style>
