2023年7月17日发(作者：)

uni-app跨平台前端框架介绍（终极跨平台解决⽅案）1. 移动端跨平台开发⽅案介绍(1) 流⾏框架⽐较移动端跨平台⽅案对⽐—React Native、weex、Flutter⼏款移动跨平台App开发框架⽐较(2) 框架共同点：每个框架⼏乎都包含以下特性使⽤ HTML5 + CSS + JavaScript 开发；跨平台重⽤代码；丰富的UI库；提供访问设备原⽣API的 JavaScript API 包装器；解决原⽣开发中机型适配的难题；提供打包、部署的⼯具或服务；都需要学习⾃⾝封装的 JavaScript API；(3) 选择框架的要求性能：运⾏速度快；UI：提供接近原⽣的UI体验；插件多，⽂档丰富，开发效率⾼，容易扩展和维护；满⾜业务需求；2. uni-app推出背景(当前跨平台开发的主要问题)2. uni-app推出背景(当前跨平台开发的主要问题)github地址：uni-app-github多端泛滥当前是⼀个多端泛滥的时代,除了原有的Android、IOS、H5、⼩程序平台,⽀付宝、百度、淘宝、今⽇头条等都陆续发布了⾃⼰的⼩程序和快应⽤规范,⽤户被众多平台分散,为了覆盖更多的⽤户,开发者需要更多的学习、适配和维护成本。体验不好过去的跨平台框架在app上的体验并不好。⽣态不丰富过去的跨平台框架在周边的⽣态⼀直不丰富,开发者很难获取更好更多的SDK。选择uniapp进⾏跨平台开发的原因：资⾦：uniapp开源免费。APICloud闭源，免费版有限制；AppCan闭源，商业化产品，免费版限制太多。技术及⽣态：uniapp使⽤了流⾏的开发，⽣态强⼤，h5开发效率⾼。Ionic使⽤AngularJS，学习曲线陡峭；React Native学习成本⾼；Flutter使⽤Dart，属于⼩众语⾔，⼀切都要重新学习（不利于后续维护和个⼈发展）。性能及兼容：uni-app多端发布，⽆限制；若⽆特殊需求，基本可以完成原⽣APP90%的任务。另外，Cordova使⽤前端框架 famous 或 Framework7，⽣态成熟，有很多⼯具可搭配使⽤，开源代码可⾃由定制；DCloud使⽤前端框架MUI，国产开源免费，性能不错，并提供云服务帮助打包和部署、测试，降低了技术门槛和提升了开发效率，⽽且拥有插件市场，⽣态丰富，也可以⾃⼰开发插件。这两种也是不错的选择⽅案，可根据具体情况来选择。3. uni-app介绍uni-app 是⼀个使⽤ 开发跨平台应⽤的前端框架，开发者编写⼀套代码,可编译到Android、iOS、H5、⼩程序等多个平台。uni-app在跨端数量、拓展能⼒、性能体验、周边⽣态、学习成本、开发成本等6⼤关键指标上拥有极强的竞争优势,解决了现有跨平台框架存在的问题。vuejs学习-英⽂版vuejs学习-中⽂版4. uni-app主要特征4.1 跨平台更多且不牺牲平台特⾊(1)真正做到"⼀套代码多端发⾏":⼀套代码可发布到Android、IOS、H5、⼩程序等多个平台,不需要对不同平台的代码进⾏维护和升级。(2)平台能⼒不受限:通过条件编译+平台特有的API调⽤,可以优雅地在为某平台写个性化代码,调⽤专有能⼒⽽不影响其他平台。4.2 运⾏体验更好(1)组件和api与微信⼩程序⼀致:微信⼩程序中性能极好的Hybird框架,使加载新页⾯速度更快。(2)兼容weex原⽣渲染:App端⽀持weex原⽣渲染,可⽀持更流畅的⽤户体验。4.3 通⽤前端技术栈,学习成本更低(1)学习成本低:基于通⽤前端技术栈,采⽤vue的语法+微信⼩程序的api(2)内嵌mpvue开源框架:mpvue项⽬可直接变成uniapp4.4 开发⽣态,组件更丰富(1)⽀持通过npm安装第三⽅包(2)⽀持微信⼩程序⾃定义组件及JS SDK(3)兼容mpvue组件及项⽬(内嵌mpvue开源框架)(4)App端⽀持和原⽣混合编码(5)插件丰富,DCloud将发布插件到市场uni-app特征.png5. uni-app功能框架uni-app功能框架图.-app⼯程相关流程6.1 创建uni-app(1)打开HBuilderX -> ⽂件 -> 新建 -> 项⽬创建-(2)选择uni-app -> 填写项⽬名称 -> 选择模板(以默认模板为例) -> 创建完成创建-(3)新建项⽬⽬录如图所⽰默认项⽬⽬录.png备注:项⽬⽬录结构说明可移步⾄uin-app⼯程介绍6.2 运⾏uni-app6.3 发布uni-app6.3.1 打包为原⽣app-云打包(1)在HBuilderX⼯具栏，点击发⾏，选择原⽣app-云打包，如下图：云打包.png(2)出现如下界⾯，点击打包即可：打包.png(3)云打包成功云打包成功.png(4)控制台信息：获取下载地址并下载apk控制台信息.png备注：HBuilder的云端打包虽然⽅便，但不能打超过40M的包。通过HTML5+SDK的本地打包⽅案可以解决打包⼤⼩限制的问题（TML5 PlusSDK，简称5+SDK，是把HTML5+运⾏环境（5+ runtime）封装为原⽣SDK）。6.3.2 打包为原⽣app-(本地)离线打包(1)在HBuilderX⼯具栏，点击发⾏，选择原⽣app-本地打包，如下图，点击即可⽣成离线打包资源。本地打包.png(2)控制台信息：获取离线打包资源本地路径备注：在 HBuilderX ⽣成离线打包资源后参考 离线打包（或参考其他⽤户写的 离线打包⽇记），即可进⾏离线打包。实质上最终还是在android开发平台androidStudio中导⼊离线打包⽣成的项⽬代码并进⾏修改，这部分的⽂档学习和修改成本极⼤。(3)报错：uni-app运⾏环境(sdk)版本和编译器(HBuilderX)版本不⼀致的问题6.3.3 发布为H5在HBuilderX⼯具栏，点击发⾏，选择⽹站-H5⼿机版，如下图，点击即可⽣成 H5 的相关资源⽂件，保存于 unpackage ⽬录。H5⼿机版.png6.3.4 发布为⼩程序(1)发布为微信⼩程序(2)发布为百度⼩程序(3)发布为⽀付宝⼩程序(4)发布为⽀付宝⼩程序说明：uni--app项⽬在HBuilderX上发布为⼩程序，⽣成对应⼩程序项⽬代码，在各⼩程序开发平台导⼊⽣成的⼩程序项⽬代码并测试项⽬代码运⾏正常后，按照各平台的标准流程进⾏上传代码、提交审核等操作，即可完成各⼩程序的发布⼯作。