基于Uniapp App-Plus Honeywell EDA51 PDA手持 广播扫码实现

基于Uniapp App-Plus Honeywell EDA51 PDA手持 广播扫码实现

前言

本文介绍使用uniapp框架搭建的pda手持扫码app基于广播模式的实现。

手持型号霍尼韦尔（Honeywell EDA51）

背景介绍

App需求比较简单，开始聚焦到input输入框，手持激光扫码将二维码值输入到输入框就可以。 但是调试和开发过程中问题颇多，如软键盘弹起覆盖问题以及光标blur聚焦等问题。所以考虑使用广播监听模式来实现扫码功能。

主要内容

1. 手持配置

这块看了很多文档，网上资料不一，这里我直接去Honeywell官网查到了一些资料最终才获取到了扫码回传的code。

如果是其他厂商的手持，可能会有些差异。这里extra key要求"data="后面配置key。以上图片详细可通过文章末尾链接了解。

以下是详细的手持配置

步骤1）进入系统设置

步骤2）找到Honeywell设置，点击进入

步骤3）进入Internal Scanner后，点击加号添加应用

步骤4）进入Internal Scanner后，点击加号添加应用

步骤5）点击刚才配置的应用，进入到以下界面左侧配置界面，点击Data Processing Setting。

进入配置界面后拉到最底部找到Data Intent，勾选单选框后点击行。

步骤6）进入行配置界面后，配置参数。

点击Action填写想要配置的action，点击ExtraKey配置接收数据的key

注：这里Extra Key格式要按照data={key} 配置，key部分可自定义。

2. app封装scan.js统一工具

/**
 * pda红外线扫码
 */
var main = ''
var filter = ''
var receiver = ''
var codeQueryTag = false
let scanSuccess = function () {} // 成功后的操作函数
//开启服务监听
export function initScan(successFun) {
  scanSuccess = successFun
  console.log('开启了监听')
  main = plus.android.runtimeMainActivity() //获取activity
  var IntentFilter = plus.android.importClass('android.content.IntentFilter')
  filter = new IntentFilter()
  // filter.addAction('action') // 换你的广播动作  (设置-扫描设置-输出方式-输出方式改为Intent输出)
  filter.addAction('com.honeywell.action') // 换你的广播动作，与手持配置的Action对应
  receiver = plus.android.implements(
    'io.dcloud.feature.internal.reflect.BroadcastReceiver',
	// 'io.dcloud.android.content.BroadcastReceiver',
    {
      onReceive: function (context, intent) {
        plus.android.importClass(intent)
        let code = intent.getStringExtra('data') // 换你的广播标签,这里根据上文的extra key一致
        queryCurrenCode(code)
      },
    }
  )
  console.log('开启监听完成')
}
//这个得有，开启监听用
export function startScan() {
  main.registerReceiver(receiver, filter)
}
//这个也得有，关闭监听用
export function stopScan() {
	console.log('关闭扫码监听')
  main.unregisterReceiver(receiver)
}
//这个是防止重复用的
async function queryCurrenCode(code) {
  //防重复
  if (codeQueryTag) return false
  codeQueryTag = true
  setTimeout(() => {
    codeQueryTag = false
  }, 150)
  console.log('调用接口啦------', code)
  scanSuccess(code)
}

// vue组件中使用
import { initScan, startScan, stopScan } from '@/utils/scan.js'

export default {
  data () {
    return {
    };
  },
  computed: {
   
  },
  methods: {
    async scanSuccess (code) {
      // 扫描成功
      // code为条码值
    }
  },
  onShow () {
    // #ifdef APP-PLUS
    initScan(this.scanSuccess)
    startScan()
    // #endif
  },
  onLoad () {
    // #ifdef APP-PLUS
    initScan(this.scanSuccess)
    startScan()
    // #endif
  },
  onHide () {
    // #ifdef APP-PLUS
    console.log("DOCK收货运单 hide")
    stopScan()
    // #endif
  },
  onUnload () {
    // #ifdef APP-PLUS
    console.log("DOCK收货运单onUnload")
    stopScan()
    // #endif
  }
};

总结

以上就是uniapp 广播模式实现pda接收二维码功能的实现过程。

如果觉得本文对你有帮助，欢迎点赞、评论和分享 👏