前言今天来说说前端必备技能——小程序开发。从最早发布的微信小程序，到后来的支付宝小程序、字节跳动小程序、百度小程序、QQ小程序，再到最近发布的360小程序，面对这么多套代码，开发者该如何开发呢？当业务需求同时在不同端展示时，为不同端编写多套代码的成本显然非常高。这时候就特别需要只写一套代码就能适配多终端。今天给大家介绍一个使用Vue的跨端框架——uni-appuni-app框架介绍uni-app是一个使用Vue.js开发跨平台应用的前端框架，可以编译到iOS、Android,H5,以及各种小程序（微信/支付宝/百度/今日头条/QQ/钉钉）等平台。uni-app在开发者数量、案例数、跨端平滑度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等六大关键指标上具有很强的竞争优势：开发者/案例数更高多端平滑/扩展灵活（通过条件编译，在不影响其他平台的情况下调用专有能力）更好的性能体验（App端支持weex渲染，带来更流畅的用户体验。）丰富的周边生态（推出插件市场可以提供更多组件和模板，真正开箱即用）学习成本低（使用Vue.js语法+小程序API）开发成本低（不仅是开发成本，招聘、管理、测试成本都大幅下降。）虽然不同终端的框架环境千变万化，无论是各种小程序，Weex、React-Native、Flutter、快应用，始终离不开MVVM架构设计思想。uni-app希望用一套代码来完成所有的端需求，将相同的业务逻辑汇聚到同一层体系中，而不因为项目的一致性抽象而降低可维护性。开发工具采用HBuilderX可视化界面，HBuilderX内置相关环境，无需配置nodejs即可开箱即用。开发语言采用Vue.js+小程序API进行开发。数据绑定和事件处理与Vue.js规范相同，同时补充了App和页面的生命周期。uni-app帮我们封装了几乎所有不同平台的小程序API，只是将前缀换成uni来说明：微信发送请求：wx.request({url:"https://www.example.com/request",//只是一个例子，不是真正的接口地址success:res=>{console.log(res.data);}});在uni-app中发送请求Request:uni.request({url:"https://www.example.com/request",//只是一个例子，不是真正的接口地址success:res=>{console.log(资源.数据);}});了解微信小程序各位，是不是感觉很简单？无非就是把wx前缀换成uni，而uni.request是一个通用的ajax请求API，最大限度的降低了开发者的学习成本。如何解决跨终端兼容的问题每个平台都有自己的特点，所以会出现一些不能跨平台的情况。uni-app提供了一种条件编译的手段，优雅的完成了一个项目中平台定制化的实现。<视图类="内容">只编译为微信小程序只会编译成app在nvue模式下uni-app，根据编译配置的不同，weex组件也可以使用Applet组件（即uni-app组件）。写页面时，页面的后缀为.nvue（nativevue的缩写）。uni-app应用内置weex渲染引擎，提供原生渲染能力，让uni-app在app上有更好的表现。nvue相当于给weex补充了大量的uni-app组件和API，还有丰富的PlusAPI、Native.js、原生插件。详细了解nvue的官方ui库，uni-uiuni-ui是DCloud提供的跨端ui库。是一个基于vue组件、flex布局、无dom的跨全端ui库。Web开发中有些开发者习惯使用一个ui库来完成所有的开发，但是在uni-app系统中，建议开发者先使用性能更高的基础组件，再根据需要引入必要的扩展组件。GitHub地址：uni-ui看到这里是不是特别激动呢？别着急，我们来看看uni-app的开发规范。uni-app开发规范为了实现多端兼容，uni-app约定了以下开发规范：页面文件遵循Vue单文件组件（SFC）规范，组件标签接近小程序规范。详见uni-app组件规范接口能力（JSAPI）接近微信小程序规范，但前缀wx需要换成uni，详见uni-app接口规范数据绑定和事件处理同Vue.js规范，补充了app和pageuni-app的生命周期，兼容多端运行。推荐使用flex布局进行开发。每个终端的管理规则需要耐心等待。学习uni-app并不难，但是我们注意到很多新人在适应各个平台的规则和限制的时候非常着急。uni-app跨越了很多终端，虽然代码层面可以一次开发生成多个终端。但是要注意每一端，每一端都有管理规则，这和开发无关，但是还是需要每个开发者耐心的去掌握这些规则和限制。比如H5端浏览器有跨域限制；比如微信小程序会强制https链接，所有要上网的服务器域名都必须加入微信的白名单；比如在App端，iOS有非常严格的隐私控制和虚拟支付控制。严格的;比如App端、安卓、国产rom存在各种兼容性差异，尤其是谷歌服务被屏蔽导致推送、定位等乱七八糟的开发坑；如果您的App使用了第三方SDK，如定位、地图、支付、推送……也请遵守他们的规则和限制；总结起来，uni-ui相比其他框架有两个主要的优势。如何用有限的前端团队搞定更多的平台，是首要考虑的原因。跨终端uni-app更成熟。如果团队中熟悉Vue技术栈的同学较多，使用uni-app内部培训时间短，风险小。开发中需要注意的点注意各个端之间的差异。很多事情h5是对的，但是用真机就错了。如果真机没问题，改小程序就错了。考虑不同的情况，重点是仔细阅读文档。由于uni-app框架集成了5+API，所以一些需要原生功能的uniapps也可以通过5+API来实现。许多陷阱是由于多终端不兼容造成的。除了写起来有点麻烦，基本上还是有攻略可以解决的。更多关于uni-app的信息，请参考官方文档uni-app-多终端开发框架，或直接进入GitHub仓库uni-app查看uni-app文档及相关资料。欢迎star或提issue。github地址：https://github.com/dcloudio/uni-app/PS：我现在正在写一个ui库，以后应该会写一些如何从零开始实现一个ui库的文章。欢迎有这方面经验的朋友相互交流。
