PDA 红外扫码 uniapp

这篇具有很好参考价值的文章主要介绍了PDA 红外扫码 uniapp。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、在utils文件夹下新建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("android.intent.ACTION_DECODE_DATA"); // 换你的广播动作  (设置-扫描设置-输出方式-输出方式改为Intent输出) 
  receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {
    onReceive: function (context, intent) {
      plus.android.importClass(intent);
      let code = intent.getStringExtra("barcode_string");// 换你的广播标签  
      queryCurrenCode(code);
    }
  });
  console.log('开启监听完成');
}
//这个得有,开启监听用
export function startScan() {
  main.registerReceiver(receiver, filter);
}
//这个也得有,关闭监听用
export function stopScan() {
  main.unregisterReceiver(receiver);
}
//这个是防止重复用的
async function queryCurrenCode(code) {
  //防重复  
  if (codeQueryTag) return false;
  codeQueryTag = true;
  setTimeout(() => {
    codeQueryTag = false;
  }, 150);
  console.log('调用接口啦------', code);
  scanSuccess(code)
}

2、使用页面:

<script>
import { initScan, startScan, stopScan } from "@/utils/scan";

export default {
  onShow() {
    initScan(this.scanSuccess);
    startScan();
  },
  onHide() {
    stopScan();
  },
  methods: {
    // 红外线扫码成功后
    async scanSuccess(code) {
      console.log('红外线扫码的结果', code);
      // 下面就是写取到结果后的事情
    }
  },
}
</script>

附:红外线扫描配置(以优博讯的一款PDA为例)

1、点击【设置】;找到【扫描设置】

2、打开【输出方式】页面,再次点击【输出方式】

PDA 红外扫码 uniapp,uniapp,uni-app,vue.js,前端,PDAPDA 红外扫码 uniapp,uniapp,uni-app,vue.js,前端,PDA PDA 红外扫码 uniapp,uniapp,uni-app,vue.js,前端,PDA

3、设置【输出方式】为【Intent输出】,此时下方【广播动作】、【广播字符串数据标签】、【广播字节数据标签】为可点击编辑状态;

与代码里的对应上即可,我这里是

【广播动作】:android.intent.ACTION_DECODE_DATA

【广播字符串数据标签】:barcode_string

 PDA 红外扫码 uniapp,uniapp,uni-app,vue.js,前端,PDA  PDA 红外扫码 uniapp,uniapp,uni-app,vue.js,前端,PDA

 文章来源地址https://www.toymoban.com/news/detail-727943.html

到了这里,关于PDA 红外扫码 uniapp的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp兼容多pda扫描扫码

    网上有现成的针对单个pda扫码录入的代码,但是公司的需求是在多个不同厂商pda上运行,这就会导致不同的pda默认的广播动作和广播标签不一致的情况,目前也没有获取这俩字段的api。 先创建一个scanCode.js的文件 使用在对应页面 无非就是更换scanCode.js中addAction和getStringExtra字

    2024年02月09日
    浏览(42)
  • Vue.js uni-app 混合模式原生App webview与H5的交互

    在现代移动应用开发中,原生App与H5页面之间的交互已经成为一个常见的需求。本文将介绍如何在Vue.js框架中实现原生App与H5页面之间的数据传递和方法调用。我们将通过一个简单的示例来展示如何实现这一功能。 效果图如下: 首先,我们需要在Vue.js项目中引入原生App与H5页面

    2024年02月16日
    浏览(72)
  • uni-app的Vue.js实现微信小程序的紧急事件登记页面功能

    主要功能实现  完成发生时间选择功能,用户可以通过日期选择器选择事件发生的时间。 实现事件类型选择功能,用户可以通过下拉选择框选择事件的类型。 添加子养殖场编号输入框,用户可以输入与事件相关的子养殖场编号。 完成事件描述输入功能,用户可以通过文本输

    2024年02月12日
    浏览(61)
  • uni-app(Vue3/Vite) + vant UI(Vue3版本)+ js 按需引入的项目搭建

            因为要完成软件工程的项目,要做一个nativeApp,看了很多的技术文档以后决定使用多端兼容的uni-app来开发。组件方面的话最后决定使用目前比较火的Vant UI。但是看了CSDN和掘金上面的很多文章,似乎没有一篇是关于uni-app中使用Vite对vant组件进行按需引入(可能这个

    2023年04月09日
    浏览(68)
  • 基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板

    最近得空学习了下uniapp结合vue3搭建跨端项目。之前也有使用uniapp开发过几款聊天/仿抖音/后台管理等项目,但都是基于vue2开发。随着vite.js破局出圈,越来越多的项目偏向于vue3开发,就想着uniapp搭配vite4.x构建项目效果会如何?经过一番尝试果然真香~ uniapp官网提供了  HBuild

    2024年02月09日
    浏览(87)
  • (小程序)基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板

    版本信息: 点击编辑器的文件 新建 项目(快捷键Ctrl+N) 2.选择uni-app项目,输入项目名/路径,选择项目模板,勾选vue3版本,点击创建,即可成功创建。 3.点击编辑器的运行 运行到浏览器 选择浏览器 当然也可以运行到手机或模拟器、运行到小程序工具。 到这里一个简单的

    2024年02月16日
    浏览(103)
  • 『UniApp』uni-app-打包成App

    大家好,我是 BNTang, 在上一节文章中,我给大家详细的介绍了如何将我开发好的项目打包为微信小程序并且发布到微信小程序商店 趁热打铁,在来一篇文章,给大家详细的介绍如何将项目打包成APP。 打包 App 也是一样的,首先需要配置关于 App 应用的基础信息,打开 manifest

    2024年02月04日
    浏览(108)
  • 【UniApp】-uni-app-网络请求

    经过上个章节的介绍,大家可以了解到 uni-app-pinia存储数据的基本使用方法 那本章节来给大家介绍一下 uni-app-网络请求 的基本使用方法 首先我们打开官方文档,我先带着大家看一下官方文档的介绍:https://uniapp.dcloud.net.cn/api/request/request.html 从官方文档中我们可以看到,可以

    2024年02月04日
    浏览(53)
  • 在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2024年02月05日
    浏览(97)
  • 在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2023年04月15日
    浏览(81)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包