zebra(斑马)PDA扫码uniapp程序小demo

前言：

折腾了将近一天，汗。这方面小白的我终于完成了一个小demo，喜。
简单记录下，希望对这方面有需求的人有所帮助。

正文

PDA设置

（参考官网https://techdocs.zebra.com/datawedge-cn/7-0/guide/api/tutorials/）
1.在设备上启动 DataWedge。
2.新建配置文件
3.配置 DataWedge 输入（条码扫描器）和输出 (Intent)。
其中配置 Intent 输出注意：

• Intent 操作：com.dwexample.ACTION（程序中需与此一致）
• Intent 类别：（留空）
• Intent 交付：广播 Intent

题外：开启zebra开发者模式，版本点击7次

UniApp程序

（主要参考https://liujunyang.com/d/7-uni-apppda。getStringExtra部分获取参考https://ask.dcloud.net.cn/question/102673）
说明：本示例含摄像头及激光扫码两种方式
1.创建一个激光扫码的组件

<template>
	<view>
		<view class="content">
		</view>
	</view>
</template>

<script>
	var main, receiver, filter;
	var _codeQueryTag = false;
	export default {
		data() {
			return {
				scanCode: ''
			}
		},
		created: function(option) {
			this.initScan()
			this.startScan();
		},
		onHide: function() {
			this.stopScan();
		},
		destroyed: function() {
			this.stopScan();
		},
		methods: {
			initScan() {
				console.log('initScan');
				let _this = this;
				main = plus.android.runtimeMainActivity(); //获取activity
				//var context = plus.android.importClass('android.content.Context'); //上下文
				var IntentFilter = plus.android.importClass('android.content.IntentFilter');
				filter = new IntentFilter();
				//下面的addAction内改为自己的广播动作
				filter.addAction("com.dwexample.ACTION");					
				receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
					onReceive: function(context, intent) {
						console.log('onReceive');
						plus.android.importClass(intent);
						//下面的getStringExtra内改为自己的广播标签--有误
						let code = intent.getStringExtra("com.motorolasolutions.emdk.datawedge.data_string");
						_this.queryCode(code);							
					}
				});
			},
			startScan() {
				console.log('startScan');
				main.registerReceiver(receiver, filter);
			},
			stopScan() {
				console.log('stopScan');
				main.unregisterReceiver(receiver);
			},
			queryCode: function(code) {
				console.log('queryCode');
				if (_codeQueryTag) return false;
				_codeQueryTag = true;
				setTimeout(function() {
					_codeQueryTag = false;
				}, 150);
				var id = code
				uni.$emit('scan', {
					code: id
				})
			}
		}
	}
</script>

<style>

</style>

2.页面使用

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>			
		</view>
		<view>
			<button @click="scan2">scan2</button>
		</view>
		<scan></scan>
	</view>
</template>

<script>
	import scan from "@/components/scan/scan.vue";
	export default {
		components: {
			scan
		},
		data() {
			return {
				title: 'Hello'
			}
		},
		onShow: function() {
			let that = this
			uni.$off('scan') // 每次进来先 移除全局自定义事件监听器
			uni.$on('scan', function(data) {
				console.log('onscan');
				//扫码成功后的回调，你可以写自己的逻辑代码在这里
				console.log('扫码结果：', data.code);
				uni.showModal({
				    title: '条码内容',
				    content: data.code,
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			})
		},
		onLoad() {

		},
		methods: {
			scan2(){
				// 调起条码扫描
				uni.scanCode({
				    scanType: ['barCode'],
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
						uni.showModal({
						    title: '条码内容',
						    content: res.result,
						    success: function (res) {
						        if (res.confirm) {
						            console.log('用户点击确定');
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
				    }
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

参考：

https://uniapp.dcloud.io/README
https://liujunyang.com/d/7-uni-apppda
https://www.jianshu.com/p/0b1c869919bf
https://ask.dcloud.net.cn/article/37294
https://ask.dcloud.net.cn/question/102673
https://wenku.baidu.com/view/2644a68ebdeb19e8b8f67c1cfad6195f312be8ca.html
https://techdocs.zebra.com/datawedge-cn/7-0/guide/api/tutorials/
https://www.jianshu.com/p/aef2c7f6ac1a
https://blog.csdn.net/madreain/article/details/90730431