1. 项目需求

我们项目采购了Seuic东集CRUISE Ge-X3 工业级智能手机(PDA),PDA设备是Android9系统,带有激光扫码灯,现在要使用uniapp开发安卓程序,并实现在PDA设备上的激光扫码程序。

2. 前置条件

  1. 确保扫描工具已经正常启动,并在扫描工具中的设置-开发者选项中-获取指定的广播名称、键值名称等数据
    在这里插入图片描述
    在这里插入图片描述

  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

Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐