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 的真实案列地址：案列