五一创作uniapp PDA扫码枪获取扫码数据APP(通俗易懂),频繁弹软键盘等各种坑完美解决方法,附完整代码

PDA手持终端扫码器概述

  • PDA扫描枪(又称棒枪、手持终端、手持数据采集器等)是一种将PDA(掌上电脑)与扫描器结合在一起的扫码器,提高了使用的方便性与工作效率,节约了成本,在销售行业、物流行业使用广泛。
    在这里插入图片描述
  • 我们可以简单理解为有扫码功能的手机(安卓)。这样理解之后,我们在PDA扫码器上进行软件开发,其实就是开发安卓app
  • 而作为一个前端,开发app我们主要用的框架是uniapp,本篇文章将介绍如何使用uniapp来开发一个扫码app

uniapp实现扫码app

PDA扫码有两种模式:广播模式和键盘模式,这里我用比较简单的键盘模式(即使用输入框接收扫码数据

需求

  • app使用input接收扫码枪扫出来的数据,将扫出来的数据显示在页面上;
  • 可连续扫码,扫码过程中不出现软键盘(输入法)。

原理

  • 在键盘输出模式下,扫码枪会将获取的内容赋值在获取焦点的input上 (扫到东西的话会自动在焦点处输出)。
  • 扫码后会自动触发@confirm回车事件,通过v-model数据绑定获取到扫码数据。

实现

1. input输入框获取扫码内容

以下就是最简单的接收扫码数据的实现方法:

<template>
	<view>
		<input type="text" auto-focus="true" 
		v-model="scanValue" placeholder="扫一扫二维码"   			/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scanValue:"",
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	input{
		border: 1rpx solid #ccc;
		margin: 40rpx 20rpx;
		padding: 15rpx;
		border-radius: 10rpx;
	}
</style>

			

我们可以去用一些二维码生成工具(如草料二维码),生成一些二维码试一下
在这里插入图片描述
成功拿到数据~
在这里插入图片描述
没错,就是这么简简单单,一个input就能接收扫码数据了~

2. @confirm扫码触发事件

input绑定@confirm回车事件,在扫码成功后,会自动触发回车@confirm事件,我们可以在这个里面进行一些操作,比如发送请求

<input  @confirm="getScanValue" type="text" auto-focus="true" 
		v-model="scanValue" placeholder="扫一扫二维码" />
// 扫码后触发的事件
getScanValue(){
	console.log(this.scanValue);
	// 扫码成功的一些操作,比如用扫码数据作为参数请求后端接口
}

3.将扫码结果显示在页面上,自动聚焦

  • 我们可以将扫码到的结果显示在页面上,每次回车就把它加到页面上并清空上一次获取到的数据。

在这里插入图片描述

  • 这里会有一个问题,就是我们每次push后清空数据,输入框会失焦,下一次要扫码必须手动点一下输入框聚焦才能继续接收扫码数据,这样使用体验肯定是不好的,所以我们每次清空数据后,需要自动聚焦
  • 我们可以用:focus="focus"动态绑定焦点,失焦的时候聚焦。
<input @confirm="getScanValue" type="text" auto-focus="true" v-model="scanValue" placeholder="扫一扫二维码"
			:focus="focus" />
			<view class="item" v-for="(item,index) in results" :key="index">
				<text class="index">{{index+1}}</text>
				<text>扫码数据:{{item}}</text>
			</view>
			poinblur() {
				this.focus = false;
				this.$nextTick(() => {
					this.focus = true;
				})
			},
			// 扫码后触发的事件
			getScanValue() {
				// 扫码成功的一些操作,比如用扫码数据作为参数请求后端接口
				console.log(this.scanValue);
				this.results.push(this.scanValue);
				this.scanValue = ''; // push后清空
				this.poinblur();// 自动聚焦
			}
  • 这里我还想过给input绑定@blur="poinblur",在失焦的时候就自动聚焦,但是它在真机情况下,会出现焦点频繁跳动的情况,所以还是手动调this.poinblur()比较好

真机调试

我们可以一边写代码一边使用,不知道如何真机调试的请看完这篇:

手机连接电脑方法,uni-app安卓真机调试教程,安卓手机调试

出现的bug解决方法

1. 无法获取扫码数据,@confirm不触发

一定要确保输入框是聚焦的!!有焦点才可以进行获取数据触发事件,如果某个事件执行后失焦,只要this.poinblur重新聚焦就好

		// 聚焦
			poinblur() {
				this.focus = false
				this.$nextTick(() => {
					this.focus = true;
					
				})
			},

还有一个就是要在PDA机设置!!在扫描设置里,把模拟键回车勾上,这个设置由于机型不一样可能叫法不一样,有的叫发送Enter键

2. 加载页面后一会,焦点消失

加载/显示页面的时候自动聚焦即可(一定要加上定时器,不然无效)

	
	onShow(){
			setTimeout(()=>{
				this.poinblur()
			},500)
	},

3. 连续扫码,聚焦弹软键盘问题

  • 扫码枪每次聚焦操作都会引起页面弹出软键盘(输入法),这个软键盘会遮挡一部分页面,而且弹出弹下很影响用户观感,必须得把这个去掉。
  • 这个问题我也试过网上的很多方法,比如uni.hideKeyboard()(会有软键盘频繁闪动的bug),给inputdisabled或者readonly(无效),还是无法解决。
  • 最后发现是要在PDA里面的扫描设置,配置键盘映射或者禁用输入法、软键盘
  • 键盘映射是我觉得最完美的解决方法了,只要给某个键设置软键盘的功能,就可以显示隐藏软键盘了,也不会有bug

完整代码

<template>
	<view>
		<input @confirm="getScanValue" type="text" auto-focus="true" v-model="scanValue" placeholder="扫一扫二维码"
			:focus="focus" />
			<view class="item" v-for="(item,index) in results" :key="index">
				<text class="index">{{index+1}}</text>
				<text>扫码数据:{{item}}</text>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scanValue: "",
				focus: true, // 输入框焦点
				results: [],// 扫码结果

			}
		},
		methods: {
			// 自动聚焦
			poinblur() {
				this.focus = false;
				this.$nextTick(() => {
					this.focus = true;
				})
			},
			// 扫码后触发的事件
			getScanValue() {
				console.log(this.scanValue);
				this.results.push(this.scanValue);
				this.scanValue = ''; // push后清空
				this.poinblur();// 自动聚焦
			}
		}
	}
</script>

<style>
	input {
		border: 1rpx solid #ccc;
		margin: 40rpx 20rpx;
		padding: 15rpx;
		border-radius: 10rpx;
	}
		
	.item{
		margin: 20rpx;
		padding: 20rpx;
	}
	.item .index{
		border: 1rpx solid #333;
		padding: 5rpx 10rpx;
		margin-right: 15rpx;
	}
</style>