工厂手持安卓设备APP场景下uniapp和安卓原生开发的对比分析

       去年上半年，我们整合了本市某行业各个工厂手持安卓设备app的功能需求，主要包括红外扫码(条形码和二维码)、标签打印机蓝牙打印、工时填报、流程审批等，特点是工厂内网使用，用户量小但是每天的使用量非常大，且用于车间工人生产包装产品的关键环节，app出问题会造成工厂停工停产的严重后果。

       由于市场竞争激烈，行业内卷造成最终争取到的用于开发的金额不高，导致开发周期很短，对于原生安卓开发来说，没有足够的人/天，无论是时间还是单价。经过慎重考虑，我们决心采用uni-app来开发这一款产品。基于Vue框架的uniapp可以使用Vue.js、HTML、CSS等前端语言进行开发，具备Vue的优秀特性，如数据绑定、组件化、虚拟DOM等，大大提高了开发效率，同时得益于uniapp的流行，它的社区非常活跃，有大量插件可供使用，也有很多问题和解决方案可供参考，以便我们能够快速向客户交付产品。

        我们的开发人员尝试开发第一个功能页面【扫码录入信息的表单】，仅仅用了很短的时间就开发完成了，然而交付功能测试后却遇到了无法承受的问题。在测试人员用扫描枪测试时发现扫描码中有中文的话到输入框会乱码，这是WebView渲染的问题，只有原生渲染才可以解决这个问题。uniapp端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。在 App 端，如果使用 vue 页面，则使用 webview 渲染；如果使用 nvue 页面(native vue 的缩写)，则使用原生渲染。也就是说只是一个最开始的需求扫描枪扫码的功能，就导致前面所讲的那些uniapp的相关vue的优点荡然无存了，nvue只支持vue2.0的语法，只包括weex下的几个生命周期(onInit、onload、onReady、onDestroy)，当前支持nvue的组件库也没有几个，uniapp自己的内置组件+少量的UView2，再没有其他的了。

nvue 总结：

• nvue 页面均采用 flex 布局，不支持其他布局方式，需要注意的是 flex 默认为竖向排列，即 flex-direction: column。
• 目前不支持在 nvue 页面使用 scss、less 等预编译语言。
• 不能在 style 中引入字体文件，nvue 中字体图标的使用参考：weex 加载自定义字体。
• nvue 暂不支持运行在模拟器上。
• nvue只支持vue2.0的语法
• nvue的生命周期主要包括三个阶段：创建、载入、销毁(onInit、onload、onReady、onDestroy)

        还有一个问题就是相比于早已经存在了十几年的React Native，nvue (native vue 的缩写)貌似是个很新的东西，用起来非常不灵活，社区里面的帖子也很有限。所以，对于任何的app开发框架来讲，我们还是降低期待，凑合着用吧，坑少的难上手，好上手的坑多，都不好使。

        继续往下看，扫码表单页面更换为nvue后，乱码的问题解决了。但开发人员很快发现，nvue下的input 键盘回车和扫码无法触发 confirm，用户点击红外扫描键扫码后，只能靠用户使用软键盘敲击回车触发表单填充方法，这在车间环境下是不可接受的。

        

        React Native框架下是没有这些低端问题的，这个乱码那个无法触发的，应该是没有，我印象里没有，时间太长了，上一次接触是六七年前的事儿了。

        VS2022新出了个Maui Blazor框架，比Maui好上手的多。我们这里有做过Blazor的开发人员，尝试了一下，没有遇到这些低端问题。但是这次的应用场景是千元机设备的配置+低版本安卓，运行起来很卡，卡的一塌糊涂。

        考虑到开发人/天，还是凑合着用吧，启用监听大法，延迟触发策略解决这个问题：

            // #ifdef APP-PLUS || MP-WEIXIN || MP-QQ

            plus.key.addEventListener('keyup', event => {
                if (event.keyCode == 520 || event.keyCode == 521) {
                    let _this = this;

                    setTimeout(function() {
                        // 表单填充
                    }, 100); // 定时时间

                }
                console.log("按下了键：" + event.keyCode);
            });

       监听用户按键，如果是扫码键，则延迟100毫秒(等待扫码操作完成input框已经被赋值)，触发表单填充事件。。。这不是什么正招，但它是目前最快的解决方案，也是相当无奈的选择。还要感叹自己的好运气——这次的设备支持监听扫码建，否则就只能望洋兴叹了。

        这是上面bug截图的地址，21年的老bug了：【报Bug】nvue下的input 键盘回车和扫码无法触发 confirm。pda环境，采集带有回车，无法触发confirm,硬件盘回车也无法触发，只能使用软键盘 - DCloud问答

       uniapp宣称的可以开发APP以及能够有APP形式的跨平台等能力的来源就是html5+，它基于HTML5扩展了大量调用设备的能力，uniapp将其纳入了自己的框架之中。我们的解决方案里用到的plus.key.addEventListener就是是h5+监听物理键盘的方法，但是好多设备的扫码键是被隐藏起来的，设置里面也没有放开允许监听扫描键的选项，这种情况下plus.key.addEventListener方法是无法监听到扫描键的，才会出现上面截图里的那种感慨。

       HTML5+ API Reference

       所以，判断某个APP项目是否适用uniapp框架，最好是用hbuilder创建一个h5+项目，在设备上试一试那些API能否充分满足关键需求【能否实现、是否卡顿、能否绕开、用户是否接受等等】，那些关键功能过关了，再粘贴到uniapp画好的界面里，从始至终我们需要的就只是h5+的一个载具和打包工具罢了。如果那些API并不能满足关键功能，或者效果很差用户接受不了，稍微费了些心思也绕不开，推荐您原路返回吧。

附：

uni.requireNativePlugin(PluginName)

引入 App 原生语言插件。

平台差异说明：App

自 HBuilderX 1.4 版本起，uni-app 支持引入原生插件，使用方式如下：

	const PluginName = uni.requireNativePlugin(PluginName); // PluginName 为原生插件名称

不管是vue文件还是nvue文件，都是这个API。

DCloud 插件市场

原生插件通用使用流程：

1. 购买插件，选择该插件绑定的项目。
2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
5. 开发完毕后正式云打包