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
相關文章
- 微信小程式掃碼解析小程式碼微信小程式
- uniapp建立小程式APP
- uniapp+家政小程式+原始碼+(前端&後端)APP原始碼前端後端
- uniapp小程式筆記APP筆記
- uniapp實現釘釘掃碼登入APP
- 【微信小程式】掃碼付小程式優化實踐微信小程式優化
- PDA uni-app 監聽掃碼廣播的一個外掛(日記)APP
- uniapp小程式遷移到TSAPP
- 你好~ 我是小斑
- Authing新功能——小程式掃碼登入
- uniapp 微信小程式總結APP微信小程式
- uniapp 小程式橫屏的方式APP
- SpringBoot微信掃碼登入(小程式版)Spring Boot
- python之掃雷小遊戲(附程式碼)Python遊戲
- 微信小程式 demo 整理微信小程式
- 微信小程式掃描普通二維碼開啟小程式的方法微信小程式
- 【UniApp】-uni-app-打包成小程式APP
- uniapp,微信小程式中使用 MQTTAPP微信小程式MQQT
- 微信短劇小程式-uniapp篇APP
- uniapp微信小程式獲取定位APP微信小程式
- 小程式即時通訊demo
- 微信小程式--遊戲demo微信小程式遊戲
- 美團掃碼付小程式的優化實踐優化
- 一、掃碼點餐小程式的開發優勢
- 小程式內引數和掃碼引數統一
- 斑馬屬於誰?誰愛喝礦泉水?
- 正計時器uniapp-小程式vueAPPVue
- uniapp + vue 小程式影片播放自動全屏APPVue
- 掃碼點餐小程式怎麼做?這裡教你免程式碼快速製作!
- 微信掃小程式碼實現網頁端登入網頁
- 微信小程式掃碼點餐系統怎麼搭建微信小程式
- 運用li元素進行斑馬色顯示
- 微信小程式實現軌跡回放,微信原生小程式,基於uniapp的小程式?微信小程式APP
- 記錄--uniapp相容微信小程式和支付寶小程式遇到的坑APP微信小程式
- 小程式webview呼叫微信掃一掃的“曲折”思路WebView
- 掃碼點餐!線上點餐(外賣與自取)小程式!
- 『小程式開發』關於微信小程式掃普通連結二維碼開啟小程式的具體配置流程微信小程式
- 微信小程式開源demo彙總微信小程式