手持終端廠商掃碼支持:鍵盤模式輸出掃描結果、廣播模式調用,API方式調用,uni-app由于是混合開發,無法使用原生api方式調用,鍵盤模式會導致結果隨意輸出,廣播模式成為首選,uni-app是支持自定義廣播發送和接收的
首先確定廣播消息的兩個參數,廣播名稱和廣播標簽
創建一個激光掃碼的組件,我們在這里是project_root/components/scan/scan.vue,并寫入以下代碼:
? ? ? ??
? ? ? ??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() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??let _this = this;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??main = plus.android.runtimeMainActivity();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??var IntentFilter = plus.android.importClass('android.content.IntentFilter');
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??filter = new IntentFilter();
? ? ? ? ? ? ? ? //下面的addAction內改為自己的廣播動作
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??filter.addAction("com.android.serial.BARCODEPORT_RECEIVEDDATA_ACTION");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??onReceive: function(context, intent) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??plus.android.importClass(intent);
? ? ? ? ? ? ? ? ? ? ? ? //下面的getStringExtra內改為自己的廣播標簽
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??let code = intent.getStringExtra("DATA");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??_this.queryCode(code);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??});
? ? ? ? ? ? ? ? ? ? ? ??},
? ? ? ? ? ? ? ? ? ? ? ??startScan() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??main.registerReceiver(receiver, filter);
? ? ? ? ? ? ? ? ? ? ? ??},
? ? ? ? ? ? ? ? ? ? ? ??stopScan() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??main.unregisterReceiver(receiver);
? ? ? ? ? ? ? ? ? ? ? ??},
? ? ? ? ? ? ? ? ? ? ? ??queryCode: function(code) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??if (_codeQueryTag) return false;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??_codeQueryTag = true;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??setTimeout(function() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??_codeQueryTag = false;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??}, 150);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??var id = code
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??console.log('id:', id)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??uni.$emit('scan', {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??code: id
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??})
? ? ? ? ? ? ? ? ? ? ? ??}
? ? ? ? ? ? ? ??}
? ? ? ??}
處理完組件后,在需要使用激光掃碼的頁面中引入該組件進行使用,在這里我以index.vue
頁面為例:?
? ? ? ??
我是index頁面 ? ?
? ?
? ? //記得引入組件
? ? ? ??import scan from "@/components/scan/scan.vue";
? ? ? ??export default {
? ? ? ? //引入組件
? ? ? ? ? ? ? ??components: {
? ? ? ? ? ? ? ? ? ? ? ??scan
? ? ? ? ? ? ? ??},
? ? ? ? ? ? ? ??data() {
? ? ? ? ? ? ? ? ? ? ? ??return {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??code: ''
? ? ? ? ? ? ? ? ? ? ? ??}
? ? ? ? ? ? ? ??},
? ? ? ? ? ? ? ??onShow: function() {
? ? ? ? ? ? ? ? ? ? ? ??let that = this
? ? ? ? ? ? ? ? ? ? ? ??uni.$off('scan') // 每次進來先 移除全局自定義事件監聽器
? ? ? ? ? ? ? ? ? ? ? ??uni.$on('scan', function(data) {
? ? ? ? ? ? ? ? //掃碼成功后的回調,你可以寫自己的邏輯代碼在這里
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??console.log('掃碼結果:', data.code);
? ? ? ? ? ? ? ? ? ? ? ??})
? ? ? ? ? ? ? ??},
? ? ? ? ? ? ? ??methods: {
? ? ? ? ? ? ? ??}
? ? ? ??}
到這里,在應用里跳轉到打開index.vue
頁面后,直接按激光掃碼的按鍵就能夠取得結果,再針對自己的操作邏輯,在回調中補充自己的邏輯代碼即可。?
同樣以index.vue
頁面為例
? ? ? ??
? ? ? ? ? ? ? ??
? ? ? ??
? ? ? ??export default {
? ? ? ? ? ? ? ??data() {
? ? ? ? ? ? ? ? ? ? ? ??return {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??userCode: '',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??main: '',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??receiver: '',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??filter: '',
? ? ? ? ? ? ? ? ? ? ? ??}
? ? ? ? ? ? ? ??},
? ? ? ? ? ? ? ??methods: {
? ? ? ? ? ? //打開掃描頭的方法
? ? ? ? ? ? ? ? ? ? ? ??bindUserCode() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??this.initScan();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??this.startScan();
? ? ? ? ? ? ? ? ? ? ? ??},
? ? ? ? ? ? ? ? ? ? ? ??initScan() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??let that = this;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??//獲取Android主Activity
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??that.main = plus.android.runtimeMainActivity();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??//獲取Android意圖類
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??let Intent = plus.android.importClass('android.content.Intent');
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??//實例化意圖
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??let intent = new Intent();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??//定義意圖,模擬按下L鍵,L鍵實際上是打開激光的物理鍵映射,由廠商提供
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??intent.setAction("com.android.action.keyevent.KEYCODE_KEYCODE_SCAN_L_DOWN");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??//廣播這個意圖
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??that.main.sendBroadcast(intent);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??//獲取Android意圖過濾類
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??let IntentFilter = plus.android.importClass('android.content.IntentFilter');
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??//實例化意圖過濾
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??that.filter = new IntentFilter();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??//獲取掃碼成功的意圖廣播
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??that.filter.addAction("com.android.serial.BARCODEPORT_RECEIVEDDATA_ACTION");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??that.receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??onReceive: function(context, intent) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??plus.android.importClass(intent);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??let code = intent.getStringExtra("DATA");
? ? ? ? ? ? ? ? ? ? ? ? //成功輸出掃碼內容
? ? ? ? ? ? ? ? ? ? ? ? console.log(code);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??});
? ? ? ? ? ? ? ? ? ? ? ??},
? ? ? ? ? ? ? ? ? ? ? ??startScan() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??this.main.registerReceiver(this.receiver, this.filter);
? ? ? ? ? ? ? ? ? ? ? ??}
? ? ? ? ? ? ? ??}
? ? ? ??}