![cover](https://img-blog.csdnimg.cn/direct/a3894e8b060d41f4a459610290181a33.jpeg)
【uniapp】uni-app开发手持PDA上的激光扫码程序,uniapp主动触发pda激光扫码(附完整代码)
工业级智能手机(PDA),PDA设备是Android9系统,带有激光扫码灯,现在要使用uniapp开发安卓程序,并实现在PDA设备上的激光扫码程序。// 在页面展示时触发,用于处理页面显示相关的逻辑,可能会多次执行,包括页面首次展示和从后台切换到前台时。// init传入一个回调函数做参数,在扫描时候会将数据传入此方法里,然后处理此方法的自定义业务逻辑。// onLoad 是在页面加载时触发,用于
1. 项目需求
我们项目采购了Seuic东集CRUISE Ge-X3 工业级智能手机(PDA),PDA设备是Android9系统,带有激光扫码灯,现在要使用uniapp开发安卓程序,并实现在PDA设备上的激光扫码程序。
2. 前置条件
-
确保扫描工具已经正常启动,并在扫描工具中的设置-开发者选项中-获取指定的广播名称、键值名称等数据
-
pda特色设置中关闭《禁止将扫描按键的键值传递给应用》的选项
3. 代码实现
激光扫码是硬解的方案,扫码的速度远高于需要唤醒过程的摄像头扫码方式,激光扫码几乎可以实时返回结果。不过其依赖Android 8以上的版本才可以通过广播的方式被应用监听,因此在开发的过程中会造成一些阻碍。无论是原生的Android开发方式,还是像uni-app的跨平台解决方案,都需要在激光扫描模块获取到结果后向系统发出一条广播,接着可以通过应用监听广播的方式来获取扫码结果。
下面是扫码的scanCode.js
文件内容:
// pda的特色设置中需要关闭-禁止将扫描按键的键值传递给应用的开关
let mainActivity; // 运行时的主要活动activity
let intentFilter; // 实例化的意图过滤器
let broadcastReceiver; // 广播接收器
let repeatFlag = false;
// 初始化定义广播
const init = (onReceiveCallback) => {
/* #ifdef APP-PLUS */
// 获取activity
mainActivity = plus.android.runtimeMainActivity();
// 导入类
const IntentFilter = plus.android.importClass('android.content.IntentFilter');
//实例化一个意图过滤器
intentFilter = new IntentFilter();
// addAction添加动作, com.android.server.scannerservice.broadcast为设备配置的广播名称
intentFilter.addAction("com.android.server.scannerservice.broadcast");
// BroadcastReceiver广播接收器接口:implements 实现接口 onReceive实现接口的方法
broadcastReceiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
onReceive: function(context, intent) {
plus.android.importClass(intent);
// 扫描设置的开发者选项--手持机pda的广播键值scannerdata
const code = intent.getStringExtra("scannerdata");
console.log('pda原始扫描数据:', code);
//防重复
if (repeatFlag) return;
repeatFlag = true;
setTimeout(function() {
repeatFlag = false;
}, 150);
// 到这里扫描成功,获取结果,可以调用自己的业务逻辑
onReceiveCallback && onReceiveCallback(code);
}
});
/* #endif */
}
// 开始广播监听扫码
const start = () => {
/* #ifdef APP-PLUS */
mainActivity.registerReceiver(broadcastReceiver, intentFilter);
/* #endif */
}
// 停止广播监听扫码
const stop = () => {
/* #ifdef APP-PLUS */
mainActivity.unregisterReceiver(broadcastReceiver);
/* #endif */
}
// 主动触发扫描
const triggerScan = () => {
// 获取Android意图类
let Intent = plus.android.importClass("android.content.Intent");
// 实例化意图
let intent = new Intent();
// 定义意图,由厂商提供(此处设置为东大的:开始扫描广播com.scan.onStartScan,对应的停止扫描广播为com.scan.onEndScan)
intent.setAction("com.scan.onStartScan");
// 广播这个意图
mainActivity.sendBroadcast(intent);
}
export const broadcastScan = {
init,
start,
stop,
triggerScan,
};
// 引入使用
// import { broadcastScan } from './scanCode.js';
下面是uniapp页面中vue内容:
<template>
<view class="home-container">
<view class="intro">广播名称:com.android.server.scannerservice.broadcast</view>
<view class="intro">广播键值:scannerdata</view>
<view class="intro">主动开始扫描广播:com.scan.onStartScan</view>
<view class="intro">主动结束扫描广播:com.scan.onEndScan</view>
<text class="intro">详见:</text>
<view class="href">
<uni-link :href="href" text="Seuic东集-CRUISE Ge 工业级智能产品说明pdf"></uni-link>
</view>
<br />
<view style="bth-list">
<u-button type="primary" text="开始扫码" @click="openScan"></u-button>
</view>
<view class="result-container">
<u--textarea v-model="result" autoHeight height='200'></u--textarea>
</view>
</view>
</template>
<script>
import scanCode from '@/components/scanCode/scanCode.vue'; // 扫码接收
import { broadcastScan } from '@/utils/scanCode.js';
export default {
data() {
return {
href: 'https://code.dt-insight.com/pdf?url=https://obs-dj-gym.obs.cn-east-3.myhuaweicloud.com/pdf/202205/1529643516374945792.pdf',
result: '',
}
},
methods: {
// 自定义扫描的结果回调函数
getScanCode(code) {
let parseData = code.trim();
console.log('自定义扫描的结果回调函数:', parseData);
this.result = parseData;
},
// 主动触发扫描
openScan() {
broadcastScan.triggerScan();
},
},
// onLoad 是在页面加载时触发,用于页面的初始化操作,只执行一次
onLoad() {
// init传入一个回调函数做参数,在扫描时候会将数据传入此方法里,然后处理此方法的自定义业务逻辑
broadcastScan.init(this.getScanCode);
},
onUnload() {
broadcastScan.stop();
},
// 在页面展示时触发,用于处理页面显示相关的逻辑,可能会多次执行,包括页面首次展示和从后台切换到前台时
onShow() {
broadcastScan.start();
},
onHide() {
broadcastScan.stop();
},
}
</script>
<style lang="scss">
.home-container {
padding: 20px;
font-size: 14px;
line-height: 24px;
.bth-list {
display: flex;
flex-direction: row;
}
.result-container {
margin-top: 10rpx;
border: 1px solid $u-primary;
}
}
</style>
4. 实现效果
激光扫码效果见如下视频
pda扫码效果
https://blog.csdn.net/ZhouLoverBrother/article/details/111169771
https://ask.dcloud.net.cn/article/40134
更多推荐
所有评论(0)