uni-app跨平台前端框架介绍（终极跨平台解决方案）

uni-app跨平台前端框架介绍（终极跨平台解决⽅案）1.移动端跨平台开发⽅案介绍(1)流⾏框架⽐较移动端跨平台⽅案对⽐—ReactNative、weex、Flutter⼏款移动跨平台App开发框架⽐较(2)框架共同点：每个框架⼏乎都包含以下特性使⽤HTML5+CSS+JavaScript开发；跨平台重⽤代码；丰富的UI库；提供访问设备原⽣API的JavaScriptAPI包装器；解决原⽣开发中机型适配的难题；提供打包、部署的⼯具或服务；都需要学习⾃⾝封装的JavaScriptAPI；(3)选择框架的要求性能：运⾏速度快；UI：提供接近原⽣的UI体验；插件多，⽂档丰富，开发效率⾼，容易扩展和维护；满⾜业务需求；2.uni-app推出背景(当前跨平台开发的主要问题)github地址：uni-app-github多端泛滥当前是⼀个多端泛滥的时代,除了原有的Android、IOS、H5、⼩程序平台,⽀付宝、百度、淘宝、今⽇头条等都陆续发布了⾃⼰的⼩程序和快应⽤规范,⽤户被众多平台分散,为了覆盖更多的⽤户,开发者需要更多的学习、适配和维护成本。体验不好过去的跨平台框架在app上的体验并不好。⽣态不丰富过去的跨平台框架在周边的⽣态⼀直不丰富,开发者很难获取更好更多的SDK。选择uniapp进⾏跨平台开发的原因：资⾦：uniapp开源免费。APICloud闭源，免费版有限制；AppCan闭源，商业化产品，免费版限制太多。技术及⽣态：uniapp使⽤了流⾏的vue.js开发，⽣态强⼤，h5开发效率⾼。Ionic使⽤AngularJS，学习曲线陡峭；ReactNative学习成本⾼；Flutter使⽤Dart，属于⼩众语⾔，切都要重新学习（不利于后续维护和个⼈发展）。性能及兼容：uni-app多端发布，⽆限制；若⽆特殊需求，基本可以完成原⽣APP90%的任务。另外，Cordova使⽤前端框架famous或Framework7，⽣态成熟，有很多⼯具可搭配使⽤，开源代码可⾃由定制；DCloud使⽤前端框架MUI，国产开源免费，性能不错，并提供云服务帮助打包和部署、测试，降低了技术门槛和提升了开发效率，⽽且拥有插件市场，⽣态丰富，也可以⾃⼰开发插件。这两种也是不错的选择⽅案，可根据具体情况来选择。3.uni-app介绍uni-app是⼀个使⽤Vue.js开发跨平台应⽤的前端框架，开发者编写⼀套代码,可编译到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)⽀持微信⼩程序⾃定义组件及JSSDK(3)兼容mpvue组件及项⽬(内嵌mpvue开源框架)(4)App端⽀持和原⽣混合编码(5)插件丰富,DCloud将发布插件到市场uni-app特征.png5.uni-app功能框架uni-app功能框架图.png6.uni-app⼯程相关流程6.1创建uni-app(1)打开HBuilderX->⽂件->新建->项⽬创建-1.png(2)选择uni-app->填写项⽬名称->选择模板(以默认模板为例)->创建完成创建-2.png(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的本地打包⽅案可以解决打包⼤⼩限制的问题（TML5Plus备注SDK，简称5+SDK，是把HTML5+运⾏环境（5+runtime）封装为原⽣SDK）。6.3.2打包为原⽣app-(本地)离线打包(1)在HBuilderX⼯具栏，点击发⾏，选择原⽣app-本地打包，如下图，点击即可⽣成离线打包资源。本地打包.png(2)控制台信息：获取离线打包资源本地路径image.png：在HBuilderX⽣成离线打包资源后参考离线打包（或参考其他⽤户写的离线打包⽇记），即可进⾏离线打包。实质上最终还是在备注android开发平台androidStudio中导⼊离线打包⽣成的项⽬代码并进⾏修改，这部分的⽂档学习和修改成本极⼤。(3)报错：uni-app运⾏环境(sdk)版本和编译器(HBuilderX)版本不⼀致的问题image.png6.3.3发布为H5在HBuilderX⼯具栏，点击发⾏，选择⽹站-H5⼿机版，如下图，点击即可⽣成H5的相关资源⽂件，保存于unpackage⽬录。H5⼿机版.png6.3.4发布为⼩程序(1)发布为微信⼩程序(2)发布为百度⼩程序(3)发布为⽀付宝⼩程序(4)发布为⽀付宝⼩程序说明：uni-