最近在使用uniapp开发一款PDA端的app,遇到扫码的需求。
需求:
不仅支持后置摄像头扫码,还要支持PDA顶部激光扫码,根据拿到的结果进行后续操作。
二维码格式如下(示例):
{
'type':'AA',
'code': '666'
}
①后置摄像头调用方式(uniapp):
// 需要扫码的位置给一个事件,触发该方法
<view @click="scanCode"></view>
// methods中写入以下两方法
// 事件执行代码如下
scanCode () {
uni.scanCode({
// 是否只能从相机扫码,不允许从相册选择图片(详见下方官网链接 )
onlyFromCamera: true,
success: (res) => {
// res.result为上述二维码格式
const handleRes = JSON.parse(res.result);
// 调用成功后,执行下一步方法
this.judgeType(handleRes);
}
})
},
// 判断类型
judgeType (handleRes) {
// 判断type
if (handleRes.type === 'AA') {
// TODO...
} else {
// TODO...
}
},
②机器顶部激光扫码调用方式:
- 先创建扫码组件,全局注册或单页面引入,示例代码如下(Android):
<template>
<view class="content"></view>
</template>
<script>
export default {
data() {
return {
main: ''
}
},
onHide:function(){
if(uni.getSystemInfoSync().platform === 'android') {
this.stopScan();
}
},
destroyed:function(){
// 页面退出时一定要卸载监听,否则下次进来时会重复,造成扫一次出2个以上的结果
if(uni.getSystemInfoSync().platform === 'android') {
this.stopScan();
}
},
created() {
if(uni.getSystemInfoSync().platform === 'android') {
this.init();
}
},
methods: {
init() {
this.main = plus.android.runtimeMainActivity(); //获取activity
let context = plus.android.importClass('android.content.Context'); //上下文
let receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
onReceive: this.doReceive
});
this.receiver = receiver;
let IntentFilter = plus.android.importClass('android.content.IntentFilter');
let Intent = plus.android.importClass('android.content.Intent');
let filter = new IntentFilter();
filter.addAction("nlscan.action.SCANNER_RESULT"); //监听扫描,根据设备的广播动作进行更换
// filter.addAction("android.intent.action.SCANRESULT"); //监听扫描,根据设备的广播动作进行更换
this.doS(receiver, filter);
},
doS(receiver, filter) {
this.main.registerReceiver(receiver, filter);
},
doReceive(context, intent) {
//通过intent实例引入intent类,方便以后的‘.’操作
plus.android.importClass(intent);
let barcodeData = intent.getStringExtra("SCAN_BARCODE1"); //获取扫描结果
// let barcodeData = intent.getStringExtra("value"); //获取扫描结果
let barcodeType = intent.getIntExtra("SCAN_BARCODE_TYPE", -1); //获取扫码类型
uni.$emit('scanCodeData',{ code: barcodeData })
},
stopScan(){
this.main.unregisterReceiver(this.receiver);
},
}
}
</script>
<style>
.content {
text-align: center;
}
</style>
- 在页面中使用,示例代码如下(一定注意要销毁):
mounted(){
// 不需要点击触发,在mounted中监听即可,当用户按下PDA上面的激光按钮时,会触发
uni.$on('scanCodeData', data => {
let str = `${data.code}`;
let recData = eval('(' + str + ')');
this.getBatchA(recData)
});
},
// methods中写入以下方法
getBatchA (recData) {
// 判断type
if (recData.type === 'AA') {
// TODO...
} else {
// TODO...
}
},
// 及时销毁
beforeDestroy(){
uni.$off('scanCodeData');
},
【解决】