uniapp整合pad扫码功能-小罗同学

在工作中，app需要整合到pad中，原有的app扫条码是通过调用摄像头扫码解析解决~

但是pda快捷键发起的扫码一维码通常是红外或者激光扫码，二维码才是摄像头扫码。而且，PDA通过快捷键扫码会直接解析（点击左侧黄色按钮）

那么，我们在开发的时候，PAD的快捷扫码就成为了输入设备，通常提供了2中输入方式~

第一种：类似键盘输入，就是开发者什么都不做，点击输入框获取焦点，按PDA的快捷按钮获取到的内容就会填入输入框~

第二种：广播模式，按PDA的快捷键获取到的内容通过监听广播获取~

第一种，开发最方便，基本没开发人员什么事，但是使用极度不友好，每次都要手动去点击输入框获取焦点再点击快捷键获取内容。

在这里，着重将第二种，监听广播的方式，只要打开APP，使用人员只需要点击快捷键就可以获取，后台根据逻辑判断处理就可以~

创建一个pdaScan.js文件

var main,receiver,filter;
var _codeQueryTag = false;
export default {
initScan() {

console.log("=初始化（二维码扫码）广播=");

let _this = this;
main = plus.android.runtimeMainActivity();//获取activity
var IntentFilter = plus.android.importClass('android.content.IntentFilter');
filter = new IntentFilter();
//android.intent.ACTION_DECODE_DATA
filter.addAction("com.sunmi.scanner.ACTION_DATA_CODE_RECEIVED"); // 换你的广播动作，你的pda设备里面看
receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver',{
onReceive : function(context, intent) {
console.log("=监听返回=");
// console.log(context);
//barcode_string
plus.android.importClass(intent);
let code = intent.getStringExtra("data");// 换你的广播标签，你的pda设备里面看
// console.log(code);
_this.queryCode(code);
}});
},
startScan(){
console.log("=开启（二维码扫码）广播=");
main.registerReceiver(receiver,filter);
},
stopScan(){
console.log("=关闭（二维码扫码）广播=");
main.unregisterReceiver(receiver);
},
queryCode: function(code){
//防重复
if(_codeQueryTag)return false;
_codeQueryTag = true;
setTimeout(function(){
_codeQueryTag = false;
},150);

console.log('（二维码扫码）code:', code);
console.log(typeof code);


uni.$emit("scan_handle",code);

}
}

在App.vue页面引入部署广播监听

import pdaScan from '@/common/pdaScan.js';

onLaunch中假如监听事件

onLaunch: function() {
        //初始化广播
	pdaScan.initScan();
}

应用进入前台，开启监听广播

onShow: function() {
        //监听广播
	pdaScan.startScan();
}

应用进入到后台，停止监听，防止切换应用的时候，监听到PDA给其他应用的数据，从而去执行业务报错~

onHide: function() {
        //监听广播
	pdaScan.stopScan();
}

到此，APP已经可以监听到PDA的扫码数据了，但是我们还要写不同页面的业务逻辑~

在指定的页面中,onLoad增加uniapp的监听事件，前面砸门通过PDA的广播监听，监听到了扫码数据~
再通过uniapp的（uni.$emit(“scan_handle”,”扫码数据”);）事件进行全局传输，各个页面可以通过uni.$on(‘scan_handle’,callback);来接收处理~

增加了page_show,用于监听当前页面如果在前台才处理，在app中，打开下一页，这个页面并不会关闭，而是进入了下一层隐藏了，如果一直监听处理，可能也会导致数据污染~
通过onShow与onHide对page_show的控制，就可以灵活的控制是否处理监听数据~

data() {
  return {
    page_show:false,
  }
},
onLoad: function() {

  uni.$on('scan_handle',function(data){
				
	if(!this.page_show) return false;
	console.log('scan_index 监听到事件来自 scan_handle ，携带参数 data 为：' + data);
	//这里根据你当前业务逻辑写			

  }.bind(this));

},
onShow() {
		
  console.log("show进入前台，开启监听状态");
  this.page_show = true;
},
onHide() {
  console.log("hide进入后台，关闭状态");
  this.page_show = false;
},

到此，全部结束~

未经允许不得转载：小罗同学 » uniapp整合pad扫码功能

相关推荐