uniapp 实现PDA设备的扫码功能 超级详细篇

1. 原理
说明:项目中使用的是标准的扫码枪,标准的意思就是它都不给开发文档。走的标准“输入事件”,和外接键盘是一样的。扫码枪扫描到的条形码每一位会触发一次onkeydown事件。比如扫描条码位‘1234567890’的条形码,会连续执行10次onkeydown事件,条码扫描到最后一位,会直接触发Enter。
2. 优缺点
(1) 优点:

不需要额外供电以及价格便宜
即插即用:实质其实就是相当于设备的外接键盘,也就是它必须在有光标的地方才能进行扫码,且是直接把扫到的内容自动输入到输入框中,并不受我们的控制
直接通过串口读取流里面的数据
(2) 缺点:需要知道每一款扫码器的型号以获取波特率及Android设备的串口地址。
备注:我的项目在实现获取扫码枪数据的过程中并未体现该缺点。

3. 监听扫码枪事件获取数据
备注:扫码枪就是 = 键盘 + 回车,即外接接盘。所以建个txt文本文档或者doc随便,打开,然后连接扫码枪,开始扫描,扫码结果就会自动填入你的文档。

方案一:监听键盘的keydown事件
分析:uniapp无document对象,无法获取keydown事件。无键盘事件,不支持键盘修饰符。
方案二:使用 5+ 的api监听键盘事件
分析:H5 和小程序不能监听键盘事件,但是app端可通过使用 5+ 的api监听键盘事件。经测试,app端使用 5+ 的api未能监听到键盘事件。

onShow:function(){
        // #ifdef APP-PLUS
        // 监听键按下事件
        plus.globalEvent.addEventListener('keydown', function(KeyEvent){
            console.log("监听键按下事件:" + KeyEvent.keyCode + "");
            plus.nativeUI.showWaiting("监听键按下事件:" + KeyEvent.keyCode + ""); 
            // if(KeyEvent.keyCode == 13){
            //  uni.showToast({
            //      title:"监听回车事件"
            //  });
            // }
            
        });
        
        // #endif
        
    },

**

方案三:使用 input 输入框控件来接收

**
分析:输入框可直接接收扫码枪数据
方案:主要通过使用 input 的 @input 和 @confirm 事件来实现
备注:页面其实并不需要显示input控件,这里只作为接受数据的作用,所以尽可能在界面中隐藏该控件,从而达到既不影响用户体验又能实现我们的功能

<input v-if="isUseScanGun" class="jk-footer" style="width: 1px;" :value="inputValue" :focus="isFocus" maxlength="-1" 
@input="input" @focus="focus" @blur="blur" @confirm="confirm"/>

**

4. 问题汇总

**
4.1 失焦导致无法获取扫码数据
说明:输入框聚焦后扫码枪才可以把内容输出到输入框中,失去焦点将导致不能获取到扫码数据,或者说是需手动聚焦后才能获取到扫码数据。
(1) 失焦描述
1:虽然设置了输入框的聚焦属性,扫码一次后就会失去焦点
解决方案:输入框失焦时重新在 @blur 事件中重新设置焦点
注意:此时需在输入事件中设置焦点属性为false,之后 @blur 事件会自动被调用,从而获取到焦点。

input:function(e){
    console.log("键盘输入:" + e.detail.value);
    _self.isFocus = false;          
},
focus:function(){
    console.log("输入框聚焦");                   
},
blur:function(){
    console.log("输入框失去焦点");
    _self.isFocus = true;
},

(2) 失焦描述
2:点击界面上除输入框的其他位置,也会导致输入框失去焦点
解决方案:给整个页面的根节点设置点击事件,重新获取焦点。
注意:此时需设置焦点属性为false,之后 @blur 事件会自动被调用,从而获取到焦点。

<template>
    <view class="uni-flex uni-column" style="height: 100%;" @tap="setFocus()">
        <view class="uni-flex uni-row jk-bg-blue uni-center" style="height: 12%;">
            <input class="jk-footer" style="width: 1px;" :value="inputValue" :focus="isFocus" maxlength="-1" @input="input" @focus="focus" @blur="blur" @confirm="confirm"/>
        </view>
        
        <view class="uni-flex" style="height: 88%;">    
            <view class="uni-flex justify-center align-center uni-column" style="width: 100%;height: 100%;">
            </view>
        </view>
        
    </view>
</template>
setFocus:function(){
    console.log("setFocus-1: " + _self.isFocus + "");
    _self.isFocus = false;
    console.log("setFocus-2: " + _self.isFocus + "");
},

备注:经验证,还需在manifest.json配置文件关闭沉浸式,否则无法重新获取焦点(刚好项目之前因需去掉原生导航故关闭了沉浸式,所以开始的没发现需关闭沉浸式才能重新聚焦的问题)。原因未知,望知道的小伙伴告知一下。

/* 5+App特有相关 */
    "app-plus": {
        "statusbar" : {
            "immersed" : false //关闭沉浸式:解决去掉原生导航后,主内容顶到状态栏的问题;扫码枪-输入框聚焦问题(原因未知)
        },
    },

拓展:窗体默认是沉浸式(即全屏可写内容)。若不启用原生导航,手机顶部状态栏区域会被页面内容覆盖;而系统导航栏会自动处理状态栏高度占位问题,不会出现手机顶部状态栏区域被页面内容覆盖的问题。参考uniapp自定义导航栏使用注意。

4.2 聚集导致屏幕弹出软键盘问题
描述:连接扫码枪后,每次聚焦操作都会引起页面弹出软键盘
说明:使用官网的隐藏软键盘api并不能完全禁用软键盘

focus:function(){
    console.log("输入框聚焦");
    // 并不能完全禁用软键盘
    setTimeout(function(){
        uni.hideKeyboard();//隐藏软键盘:隐藏已经显示的软键盘,如果软键盘没有显示则不做任何操作
        // plus.key.hideSoftKeybord();//隐藏软键盘:隐藏已经显示的软键盘,如果软键盘没有显示则不做任何操作
    },250);                     
},

分析:系统设置中,连接到实体键盘时,虚拟键盘默认在屏幕上保持显示状态
解决方案:设置当连接到实体键盘时,关闭虚拟键盘(无实体键盘时才会弹出软键盘)
步骤:设置 -> 语言和输入法 -> 实体键盘 -> 关闭显示虚拟键盘

4.3 字符截取问题
说明:每次扫码数据都会拼接到输入框中(输入框默认最大输入长度maxlength为140),但是我们只需要每次的扫码数据
解决方案1:使用双向绑定,并监听每次扫码的完成事件 @confirm,获取当次扫码数据后清空输入框数据。
分析:在输入完成事件中清空输入框将导致下次扫码获取到错误数据,可能和输入框的输入事件@input 是一个字符一个字符读取有关。
解决方案2:设置不限制输入框的最大长度(maxlength = -1),在输入完成事件中截取最后约定的位数作为扫码结果。
分析:所要扫的有效二维码位数已固定。

confirm:function(e){
    console.log("点击完成按钮");
    var str = e.detail.value;
    var result = str.substring(str.length-13);//截取后13位
    uni.showToast({
        title: result
     });    
},

4.4 应用重启问题
描述: 当应用打开时,插拔键盘或扫码枪会导致应用重启,扫码枪恢复出厂设置也会导致应用重启
分析:可能是检测到键盘类型改变引起的
解决方案:先接线,后打开应用
注意:接线时,若转接头和平板连接后再连接扫码枪,无法给扫码枪供电;正确的接线顺序为,转接头和扫码枪连接后再连接平板。

vue3 的真实案列地址:案列

你可能感兴趣的:(vue3,vue,uni-app)