admin 管理员组文章数量: 887629
2023年12月18日发(作者：variant大众叫什么)
跨平台框架 UniApp的应用实践
摘要
移动互联网时代，多“端”兴起。同一个应用，各“端”独立开发，不仅开发周期长，而且需要不同的开发人员去开发，开发成本高，不利于团队成员形成合力提高开发效率。因此，跨端技术受到越来越多企业和开发人员的关注。一套代码多端支持，既节约了成本和人力，也提高了工作的效率。根据项目的实际需求，对比了各跨端框架，引入Uni-app做为项目的开发框架。本文结合实际项目，就Uni-app在项目中的实践应用进行了分析。
关键字：uni-app，跨平台，移动开发框架，Vue，微信小程序
1.
引言
随着移动互联网的百家争鸣，越来越多“端”如雨后春笋般兴起，安卓、ios、各种小程序等。同一个应用，各“端”独立开发，不仅开发周期长，而且需要不同的开发人员去开发，开发成本高，不利于团队成员形成合力提高开发效率。重复、低效的工作状态会直接影响到产品的迭代更新和发布。每个平台要求相对一致的展示效果和用户体验，多端多尺寸设备的适配效果和sdk接入都成为了痛点。在这样的形势下，跨端技术受到越来越多企业和开发人员的关注。开发者只要编写一套代码就可发布到ios、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
1.
Uni-app在智慧工地设备管理中的应用
2.1 项目分析
现代施工企业的物资设备管理十分必要，它和建筑施工项目的顺利开展有着密切的关系，通过良好的物资设备管理，能够减少意外安全事故的发生，为建筑[1]
施工人员的安全提供保障，减少不必要的成本支出，有助于提高现代施工企业在建筑施工项目的整体经济效益。
因此，在智慧工地项目中，需要开发一套移动应用来对物资设备进行科学有效的管理。设施设备实现一机一码，以二维码为载体，工作人员通过移动端扫码就可以进行各种业务的操作。项目要求有微信小程序端和app端。为了节约成本和人力，提高工作效率，项目需要引入一个“一套代码多端支持”的跨平台框架。
[2]
图1 巡检流程
2.2 为什么是uni-app？
移动应用开发模式有原生开发（NativeAPP）、Web开发（WebAPP）和混合开发(HybridAPP)三种。混合开发主要是处理 WebView 的集成、Web 页面的加载，以及原生内容和 HTML 内容之间的交叉链接，其中的难点在于如何找到最适合利用原生代码开发的部分和适合使用HTML WebView开发的部分。
国内外有许多混合开发模式的主流框架，其中Flutter、RN及uni-app引起了众多开发者的注意。RN，Flutter都是多端框架，可以一套代码多端复用。RN需要学习react；Flutter需要学习dart语言。但与国外“端”不同的是，国内“端”中还有一个小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝），所以国内的所谓跨端还须兼顾到小程序。
uni-app结合了mpvue的优点以及微信小程序的优点。它基于vue2.0，现在也逐步支持 vue3。uni-app在跨端数量、用户性能等方面具有很大的优势，弥补了现有跨平台技术的不足。
[3][5]
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还支持书写微信小程序原生代码，如下面的扫描二维码代码（de）在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可以在运行小程序模拟器时，选择“运行时压缩代码”，在运行时压缩代码尺寸，还可以进一步在中进行分包（分包也不能超过2M）设置。
图9 微信小程序分包设置
Uni-app还支持分包优化，需要在的源码中进行开启。
图10 开启分包优化
以上操作设置完成后，微信小程序真机编译时正常，不再显示文件过大无法编译的错误。本地代码、主包和分包的具体大小可以在微信开发者工具中的小程序基本信息中查看。
图11 主包和分包
（4）丰富的组件
Vue项目开发中时间戳格式化，需要安装、引入并注册Moment插件，或者自己手写js。Uni-app中，只需导入组件uni-dateformat，在页面template中即可直接使用。
图12 主包和分包
（5）使用nvue提高首屏渲染速度
uni-app App端内置了一个基于weex改进的原生渲染引擎，提供了原生渲染能力。移动端首页采用nvue页面开发后，相对之前采用vue页面开发，加载速度有明显提升。
图表1 页面采用vue与nvue的渲染速度对比
nvue让前端工程师可以直接开发完整的App，并提供丰富的插件生态和云打包，帮助开发者切实地提高效率、降低成本。
1.
结语与展望
本文展示了uni-app在项目中的实践应用。Uni-app满足了项目的基本要求，解决了跨平台问题，降低了开发成本，提升了开发效率，为后续项目的研发累积了宝贵的开发经验。
但同时，我们也发现Uni-app在代码写法实现上还需要考虑样式等问题，工作量还是有的，而且这种写法考虑兼容问题还是有点多的。另外，有些插件的不成熟可能会出现一些坑。插件市场的兴起，大量的开发者还在不断地涌入，原生sdk插件，前端模板插件等几乎每天都有大量的更新，相信Uni-app会不断地完善，未来可以应用到更多不同的项目中。
参考文献：
[1]uniapp 官网:
[2]龙云.探析现代施工企业物资设备管理问题与措施.2020
[3]杜帅，鄂海红，许可.混合移动应用开发模式的新策略.北京邮电大学计算机学院，北京 100876
[4]邓皓瀚.基于Flutter的跨平台移动APP开发前景研究.西南科技大学，四川 绵阳 621010.
[5]DenkoBlaz,PecnikSpela,ehensiveComparisonofHybridMobileApplicationDevelopmentFrameworks[J].InternationalJournalofSecurityandPrivacyinPervasiveComputing(IJSPPC),2021,13(1).
[6]李锦和.工程机械设备管理存在的问题和解决措施.2020
版权声明：本文标题：跨平台框架UniApp的应用实践 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1702870854h434018.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论