跨平台框架 UniApp的应用实践
安卓app开发用什么框架摘要
移动互联网时代，多“端”兴起。同一个应用，各“端”独立开发，不仅开发周期长，而且需要不同的开发人员去开发，开发成本高，不利于团队成员形成合力提高开发效率。因此，跨端技术受到越来越多企业和开发人员的关注。一套代码多端支持，既节约了成本和人力，也提高了工作的效率。根据项目的实际需求，对比了各跨端框架，引入Uni-app做为项目的开发框架。本文结合实际项目，就Uni-app在项目中的实践应用进行了分析。
关键字：uni-app，跨平台，移动开发框架，Vue，小程序
1.
引言
随着移动互联网的百家争鸣，越来越多“端”如雨后春笋般兴起，安卓、ios、各种小程序等。同一个应用，各“端”独立开发，不仅开发周期长，而且需要不同的开发人员去开发，开发成
本高，不利于团队成员形成合力提高开发效率。重复、低效的工作状态会直接影响到产品的迭代更新和发布。每个平台要求相对一致的展示效果和用户体验，多端多尺寸设备的适配效果和sdk接入都成为了痛点。在这样的形势下，跨端技术受到越来越多企业和开发人员的关注。开发者只要编写一套代码就可发布到ios、Android、Web（响应式）、以及各种小程序（/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台[1]。
1.
Uni-app在智慧工地设备管理中的应用
2.1 项目分析
现代施工企业的物资设备管理十分必要，它和建筑施工项目的顺利开展有着密切的关系，通过良好的物资设备管理，能够减少意外安全事故的发生，为建筑施工人员的安全提供保障，减少不必要的成本支出，有助于提高现代施工企业在建筑施工项目的整体经济效益[2]。
因此，在智慧工地项目中，需要开发一套移动应用来对物资设备进行科学有效的管理。设
施设备实现一机一码，以二维码为载体，工作人员通过移动端扫码就可以进行各种业务的操作。项目要求有小程序端和app端。为了节约成本和人力，提高工作效率，项目需要引入一个“一套代码多端支持”的跨平台框架。
图1 巡检流程
2.2 为什么是uni-app？
移动应用开发模式有原生开发（NativeAPP）、Web开发（WebAPP）和混合开发(HybridAPP)三种[5]。混合开发主要是处理 WebView 的集成、Web 页面的加载，以及原生内容和 HTML 内容之间的交叉链接，其中的难点在于如何到最适合利用原生代码开发的部分和适合使用HTML WebView开发的部分[3]。
国内外有许多混合开发模式的主流框架，其中Flutter、RN及uni-app引起了众多开发者的注意。RN，Flutter都是多端框架，可以一套代码多端复用。RN需要学习react；Flutter需要学习dart语言。但与国外“端”不同的是，国内“端”中还有一个小程序（/支付宝/百度/头条/QQ/钉钉/淘宝），所以国内的所谓跨端还须兼顾到小程序。
uni-app结合了mpvue的优点以及小程序的优点。它基于vue2.0，现在也逐步支持 vue3。uni-app在跨端数量、用户性能等方面具有很大的优势，弥补了现有跨平台技术的不足。
Uni-app在小程序方面也有很不错的表现，以下是它与taro，kbone两个框架进行的对比。
图2 uni-app与taro，kbone的对比
目前，在市场上，uni-app技术被广泛应用，如腾讯、星巴克、中国教育发布、CSDN、vivo官方商城、美团、京东、腾讯、快手、字节跳动、华为、搜狐、当当网都在使用uni-app框架。由此可见，uni-app技术在中国的发展态势良好。
图3 uni-app
Uni-app主要有以下几方面的优势:
（1）跨平台
一套代码可以发布到小程序，app，h5多个端，支持几乎所有平台的小程序。Uni-app在跨端过程中，不会牺牲平台特，也不会限制平台的能力使用，拥有独立的各端兼容写法。
（2）通用技术栈，学习成本低
Vue的语法，小程序Api，内嵌mpvue可以直接迁移。在小程序的平台上，uni-app和小程序的基础用法除了语法外基本一致，在都不极限优化的情况下，小程序性能甚至比原生更好。
图4 Vue编译到小程序
此外，uni-app还支持书写小程序原生代码，如下面的扫描二维码代码（wx.scanCode）在uni-app中也可以直接使用。
图5 小程序中的扫码
（3）生态丰富
uni-app积极拥抱社区，创建了开放、兼容的生态系统。插件市场的兴起，大量的开发者还在不断的涌入，原生sdk插件，前端模板插件等几乎每天都有大量的更新。支持npm下载第三方模块，支持小程序自定义组件，SDK，兼容mpvue组件，支持原生混合编码。
综上所述，uni-app可以满足目前项目开发的所有需求。
2.3 项目中的具体应用
工程机械设备种类繁多，机械设备管理针对不同机械设备，科学开展相应的保养、维修与使用，以提升工程机械设备安全系数与使用寿命[6]。搭配机械设备项目端web系统，实现设施设备一机一码，通过移动端扫码完成对设施设备的各项业务操作。uni-app在项目中应
用的优势主要表现在以下方面：
（1）对于熟悉小程序和Vue的开发人员来说，uni-app的代码书写非常友好。而flutter布局嵌套太多，且躲不开原生代码[4]。
图6 Flutter与uni-app在写同一页面的代码对比
（2）解决了小程序端胶囊按钮和设计稿冲突的问题。
由于小程序右上角特有的胶囊按钮无法隐藏和自定义，而首页设计图的右上角设计有一个快捷菜单按钮，这里使用uni-app的条件编译，在小程序端对该按钮进行隐藏。
图7 添加条件编译，小程序下不显示
图8 小程序和app端的快捷菜单按钮
（3）由于文件过大，导致编译的时候小程序无法进行真机调试。
当项目超过2M时，小程序会出现无法真机调试，提示包过大，无法编译通过。uni-app可以在运行小程序模拟器时，选择“运行时压缩代码”，在运行时压缩代码尺寸，还可以进一步在pages.json中进行分包（分包也不能超过2M）设置。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。