背景
PDA扫码的时候，有一个非常麻烦的点是，需要选中 input框进行操作。其实PDA扫码还支持一种全局的广播模式（参考：https://mp.weixin.qq.com/s/Dke0rl0WPI6aGUWBYUaExQ）。一般在PDA的配置里，可以配置广播输出，如下：
image.png
在 vue3 + capacitor的框架下，如何接收这个广播消息？
采用官方的@capacitor/device包
代码如下：
import { Device } from '@capacitor/device';
// 监听广播事件 （不成功！！）
async function listenForPdaBroadcast() {
try {
const broadcastEvent = 'com.service.scanner.data'
Device.addListener(broadcastEvent, (event) => {
// 这里处理接收到的广播事件数据
console.log('Received PDA broadcast:');
// 你可以根据 event 的具体结构进行进一步的解析和处理
// 例如，假设 event 包含一个名为 data 的属性
if (event && event.data) {
console.log('Broadcast data:', event.data);
pdaScanCode.value = event.data
// 在这里添加你自己的业务逻辑
}
});
console.log('Listening for PDA broadcasts...');
} catch (error) {
console.error('Error listening for PDA broadcasts:', error);
}
}
onMounted(() => {
// 调用监听函数
listenForPdaBroadcast();
})
这里的监听事件com.service.scanner.data要按照你的 PDA实际情况下，同时这里需要先安装：
pnpm install @capacitor/device
可能会报错如下：
Line 58 - Msg: Uncaught (in promise) Error: "Device" plugin is not implemented on android
image.png
这里需要同步下：
npx cap sync
但这个capacitor/device来监听没有成功。只能另找其他方法：
采用capacitor-intents
看官网方论谈上有讨论：
https://forum.ionicframework.com/t/capacitor-device-addlistener/190855/2
介绍了capacitor-intents
https://github.com/IT-MikeS/capacitor-intents
这个包的安装更加简单：
npm install capacitor-android-intents
npx cap sync
监听代码：
const loadScanner = async () => {
await CapacitorIntents.registerBroadcastReceiver({ filters: ['com.service.scanner.data'] }, async (data) => {
// data is a JS Object but could contain any structure
console.log('接收到数据', data)
// 数据格式（一维码）： {"extras":{"ScanCode":"PEUB104T-1R0MS","ScanCodeType":"Code128"},"action":"com.service.scanner.data","flags":16}
// 数据格式 (二维码)： {"extras":{"ScanCode":"09016-00251700#500#FPB2412000RH#2412#CYNTEC#0#J2024102699015","ScanCodeType":"QR"},"action":"com.service.scanner.data","flags":16}
if (typeof data === 'object') {
console.log(JSON.stringify(data))
const extras = data['extras'];
console.log('', extras)
if (extras && extras.ScanCode) {
// 业务逻辑
}
} else {
console.log(data)
}
// console.log(JSON.parse(data))
})
};
扫码时成功接收到数据：
image.png
