当前位置: 首页 > 科技观察

跨平台移动端框架应用实践UniApp

时间:2023-03-20 02:00:25 科技观察

介绍CRM改造项目需要开发一款涵盖网上营业厅主要业务能力的移动端APP(网页版)。项目整体开发周期较短,要求支持多平台(IOS、Android、H5等)。每个平台都需要相对一致的显示效果和用户体验。多终端、多尺寸设备的适配效果和SDK接入成为痛点。引入跨平台的Hybrid(混合开发)框架势在必行。1、移动端跨平台技术的演进过去以Cordova为代表的最早的Hybrid开发主要依赖于WebView。但是WebView是一个重控件,容易出现内存问题,复杂的UI在WebView上显示的表现并不理想。JS和Native代码的通信需要使用JSBridge进行上下文切换,所以会降低一些性能。Cordova原理示意图直到Facebook推出革命性的ReactNative技术,才得以摒弃WebView组件,转而使用JavaScriptCore作为桥梁,将JS调用转换为Native调用,只牺牲一小部分API转换的性能,这是跨平台发展的一大进步。UniApp框架的构建思路由此衍生,并引入VueRuntime的深度定制,进一步优化渲染性能和用户体验,其采用的VueJS通用语法也解决了不同代码的问题ReactNative平台差异太大,需要具备更多原生知识的问题。ReactNative和UniApp原理图二、UniApp框架介绍及应用1、什么是UniAppuni-app是一个使用Vue.js开发跨平台应用的前端框架。小程序等多个平台由DCloud(数字乐园)推出运营维护。2、为什么UniApp与其他移动端跨平台框架(如Cordova/ReactNative/NativeJS)相比,UniApp在跨端流畅性、扩展灵活性、性能体验、周边生态、开发成本等几个方面具有明显优势。.(1)大量跨终端:一套代码编译后可以发布到iOS、Android、H5、小程序等多个平台,跨终端平滑度高,展示效果应用程序接近相同,可以真正实现生产力。这是UniApp最大的优势,优于其他跨平台框架。(2)卓越的性能体验:UniApp是一个体验更好的Hybrid框架,加载新页面速度更快。并且app端支持weex原生渲染,可以实现更流畅的动画效果。相比之下,依赖WebView的Cordova框架在性能上有所欠缺。(3)开放丰富的生态:UniApp的插件市场集成了近千款第三方插件,各种轮子随时可用;同时,由于UniApp的接口API采用了小程序规范,微信生态的各种SDK可以直接用于跨平台应用。在这方面,ReactNative框架的社区活动和文档相对有限。(4)开发成本低:以前由N平台开发者(IOS/Android/H5)完成的开发任务,现在使用前端通用技术栈实现,研发、维护、测试成本大幅降低。同时HBuilderX工具和UniApp可用于免终端调试、可视化创建工程、可视化安装组件、扩展编译器。开发者的开发体验也变得更好,从而可以更高效地编写代码。3.功能框架示意图UniApp支持在跨平台组件(图中绿色部分)的基础上进行特定平台下特殊功能的定制化开发。通过引入平台个性化UI组件或通过条件编译调用专有API,实现单一平台下的定制化需求,不影响和干扰其他平台。4、应用生命周期UniApp支持以下应用生命周期功能:5、如何使用UniApp(1)下载开发工具:HBuilderXApp开发版:http://www.dcloud.io/hbuilderx.html(2)安装和打开IDE之后,点击工具栏中的File->New->Project(3)选择uni-app,输入项目名称,如:uni-test,点击Create,成功创建UniApp应用。点击模板中的Hellouni-app,体验官方示例。(4)进入项目,点击工具栏上的运行->运行到浏览器/真机/模拟器运行,也可以在微信开发者工具中选择小程序运行。(5)项目目录结构6.开发规范(1)页面文件遵循Vue单页面组件规范,Vue中的结构仍然使用三个顶层代码块https://vue-loader.vuejs.org/zh/spec.html#%E7%AE%80%E4%BB%8B(2)组件标签VUE通用模板写法,用IOS或Android原生UI控件编译渲染(所以不能用标准的HTML标签,必须用JS尽量避免DOM操作)https://uniapp.dcloud.io/component/README(3)接口能力微信小程序规范,接口地址前缀由wxuni修改https://uniapp.dcloud.io/api/README(4)样式控制:以upx为尺寸单位,UniApp规定屏幕基本宽度为750upx,使用flex布局https://uniapp.dcloud.io/frame?id=%E9%A1%B5%E9%9D%A2%E6%A0%B7%E5%BC%8F%E4%B8%8E%E5%B8%83%E5%B1%80总结任何框架首先要服务于实际业务需求,并且技术的选择也需要有基础d对研发团队成员的技术方向和具体情况视情况而定,项目建设没有最好的技术框架,只有最适合的。总的来说,UniApp是一个非常优秀的移动端跨平台框架,在UI表现力、性能体验、生态成熟度等几个维度都经得起推敲。自上线一年多以来,已为业界所接受。态度也得到更多的认可和更好的反馈。更适合这个项目和产品短、扁平、快、组件化、小而美的时代,所以推荐给大家学习和应用。