zebra(斑馬)PDA掃碼uniapp程式小demo

鑑泉/Richarlie發表於2020-11-17

前言:

折騰了將近一天,汗。這方面小白的我終於完成了一個小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

相關文章