uni-app 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
快速体验
一套代码编到14个平台，这不是梦想。眼见为实，扫描14个二维码，亲自体验最全面的跨平台效果！
uni-app视频介绍
我们精心准备了一个简单的十分钟介绍视频，方便你快速了解uni-app的主要特征：
为什么要选择uni-app？
uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。
1. 开发者/案例数量更多：
数百万应用、uni统计月活12亿、70+微信/qq群、更高的百度指数
跨端完善度更高，真正落地的提高生产力
2. 平台能力不受限
在跨端的同时，通过条件编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台。支持原生代码混写和原生sdk集成。
3. 性能体验优秀
加载新页面速度更快、自动diff更新数据。App端支持原生渲染，可支撑更流畅的用户体验。小程序端的性能优于市场其他框架。评测
4. 周边生态丰富
插件市场数千款插件。支持NPM、支持小程序组件和SDK。微信生态的各种sdk可直接用于跨平台App。
5. 学习成本低
基于通用的前端技术栈，采用vue语法+微信小程序api，无额外学习成本。6. 开发成本低
不止开发成本，招聘、管理、测试各方面成本都大幅下降。HBuilderX是高效开发神器，熟练掌握后研发效率至少翻倍（即便只开发一个平台）。
uni-app收费吗？
uni-app 是免费并且属于Apache2.0开源协议的产品。DCloud官方承诺无论HBuilderX、uni-app，面向全球程序员永久免费。大家可以放心使用。
DCloud的盈利方式在帮助开发者进行流量变现（uni-AD）和提供有价值的云服务（uniCloud）上，而不在开发工具收费上。
功能框架
uni-app在跨平台的过程中，不牺牲平台特色，不限制平台的能力使用。
应用开发中，90%的常规开发，比如界面组件、联网等api，uni-app封装为可跨多端的API。
而各个端的特色功能，uni-app引入条件编译。可以优雅的在一个项目里调用不同平台的特色能力。比如push，微信小程序里不支持，但可以在App里使用，还有很多原生sdk，在App时难免涉及，这些都可以正常的在uni-app框架下使用。
下图是uni-app产品功能框架图，uni-app在保持uni规范跨平台的前提下，还可实现每个平台特有的平台能力(如微信小程序平台，可继续调用微信卡劵等微信特有业务API)。
一套代码，运行到多个平台
uni-app实现了一套代码，同时运行到多个平台；如下图所示，一套代码，同时运行到iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具、QQ开发者工具（底部8个终端选项卡代表8个终端模拟器）：
使用HBuilderX软件作为开发工具。
实际运行效果如下：
uni-app的手机端用户体验如何？
使用uni-app开发的微信小程序，因为智能的处理的数据的diff，比大多人手写的原生小程序的性能还好。详细数据评测参考：跨端开发框架深度横评 - 掘金
uni-app打包成App后，支持webview渲染和weex原生渲染这2种引擎，可以任由开发者切换使用。
webview渲染方式，架构和微信小程序一样。微信小程序的Hybrid应用框架是业内体验上的标杆，实践证明这种体验足以承载一线互联网开发商获得上亿用户。uni-app的App端体验同微信小程序，超过其他平台的小程序，超过一般的hybrid框架。
原生渲染方式，是DCloud改造了weex引擎，在原生渲染引擎上实现了uni-app的组件和API。达到更优秀的用户体验。
由于有丰富的插件市场，以及支持所有小程序SDK在App端的使用，使得uni-app拥有更庞大的应用生态。
只开发小程序，需要uni-app吗？
是的，单独开发小程序，也应该使用uni-app。它比其他小程序框架或原生小程序开发更有优势。原因如下：
- uni-app无需追随微信升级，可不受限在条件编译里使用wx的现在或未来的所有api
- uni-app的性能比一般人手写的微信原生代码性能更高。就像vue操作比一般人写js操作dom性能更高一样。底层自动diff差量更新数据，比手动setData性能更高。评测数据见下文
- uni-app是纯vue语法，不必另学一种dsl。开发不同项目时，思维不用切换
- uni-app的组件、模板非常丰富，插件市场数千款插件。如富文本解析、图表、自定义下拉刷新等组件，uni-app版插件性能均超过了wxparse、wx-echart等微信小程序组件
- HBuilderX比微信工具更强大，开发效率更高。哪怕使用vscode等工具，由于这些工具对vue的支持强于对wxml的支持，所以开发效果也会更高
- 微信原生开发对webpack、预编译语言、工程流程管理很多功能都不支持，大公司很少用微信原生开发，都是在用框架来提升开发效率。
- uni-app支持双向数据绑定、vuex状态管理，比小程序原生开发方便的多
- 迟早会有多端需求，使用uni-app再无后续顾虑
- uni-app并非仅用于做跨端的，只用uni-app做小程序、只做H5、只做App的，案例是一样多的，详见：uni-app官网关于uni-app和微信开发的详细比较评测，参考：使用uni-app开发小程序，比直接原生开发小程序好在哪里？ - DCloud问答
- 评测1、uni-app和原生wxml开发、wepy、mpvue、taro的对比，跨端框架深度评测：微信原生、wepy、mpvue、uni-app、taro、chameleon - DCloud问答
- 评测2、uni-app和微信原生开发的详细比较评测，参考：使用uni-app开发小程序，比直接原生开发小程序好在哪里？ - DCloud问答
只开发App，需要uni-app吗？
uni-app是更好的跨平台开发框架，开发一次iOS、Android都有了。体验好、开发效率高。
uni-app在App端，基于能力层/渲染层分离的架构设计（见下图），渲染层是webview和weex二选一，能力调用都是共同的plus api，比如蓝牙、扫码等能力；也就是weex被内置到uni-app中，并且被强化了。
过去weex有个很大的问题是api太少，开发时必须iOS、Android原生和前端3拨团队协作开发，实际上react native也如此，因为他们的核心只是高性能渲染器。
uni-app提供了大量的扩展api解决了这个问题，并且发展了成熟多样的插件生态，大多数App的开发不再需要原生介入了，从而把跨平台开发省成本这个核心目的落地了。
uni-app在App侧可以使用丰富的小程序sdk，如网易云信、环信、七牛等众多sdk厂商均原厂维护其小程序sdk版本，而这些sdk均可直接用于uni-app并发布为iOS、Android的App。
uni-app的插件市场里有非常多的ui库、组件、模板，可以大幅提升开发效率。
相比纯原生开发，uni-app体验可商用，也不会限制功能调用，但开发效率和开发成本更优于原生开发。
如果你已经有了原生App，那么可以局部使用uni-app，内嵌uni小程序SDK，把部分栏目小程序化，或者直接打造自己的小程序平台。
大型互联网公司发布的开源框架，是不是更有影响力？
大型互联网公司在自用某个项目时，解决了某个问题，把它剥离出来开源，这个是众多大公司开源项目的来源和初衷。
而之所以把内部自用的框架开源出来，基本是为了在技术圈塑造形象和威望。对团队而言，有助于招聘；对负责人个人而言，有助于晋升和提升名气。
这类开源项目被戏称为KPI项目，往往逃不开4个魔咒：
- 很多项目开源后一旦取得成绩，负责人就升职调岗，或者因为其他原因最初立项负责人离职，于是之前的开源项目就慢慢变凉。
- 其设计初衷是为公司内部使用的，不是站在广泛的开发者需求角度设计的，其他开发者使用时会遇到各种问题。
- 大型互联网公司的主业都是toC的，而不是to开发者。投很多资源持续维护这些开源项目并不是其公司目标，也不会有回报。
- 优秀的程序员和优秀的开发框架设计者是2个层面的问题，不是说某些互联网大厂的前端技术人员水平不足，而是他们缺少面向开发者设计产品的经验，这种经验需要长期为开发者提供服务的团队才能具备。经验不足者设计的产品不会好用。
而DCloud这家公司就是为开发者而生的，优秀的人才和资源全部是为开发者服务的，产品立项之初广泛调研不同开发者的需求，产品发布后持续迭代，让开发者们使用的更便利。
创建项目
安装好HBuilderX工具后，打开界面，新建项目；
选择uni-app，输入工程名，如：test，点击创建，即可成功创建uni-app；
项目目录：
- ┌─uniCloud 云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb
- │─components 符合vue组件规范的uni-app组件目录
- │ └─comp-a.vue 可复用的a组件
- ├─hybrid App端存放本地html文件的目录
- ├─platforms 存放各平台专用页面的目录
- ├─pages 业务页面文件存放的目录
- │ ├─index
- │ │ └─index.vue index页面
- │ └─list
- │ └─list.vue list页面
- ├─static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
- ├─uni_modules 存放[uni_module](/uni_modules)规范的插件。
- ├─wxcomponents 存放小程序组件的目录
- ├─main.js Vue初始化入口文件
- ├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
- ├─manifest.json 配置应用名称、appid、logo、版本等打包信息
- └─pages.json 配置页面路由、导航条、选项卡等页面类信息
- └─uni.scss 全局样式文件
运行程序
改写index页面，渲染 logo 以及 Hello uniApp
运行项目（依次运行到浏览器、真机、小程序）
发布项目 （打包为原生App(云端)）
出现如下界面，点击打包即会生成一个apk包，然后发布到各大应用厂商
生命周期
uni-app 支持 onLaunch、onShow、onHide 等应用生命周期函数
uni-app 支持 onLoad、onShow、onReady 等生命周期函数
uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期
判断平台
平台判断有2种场景，一种是在编译期判断，一种是在运行期判断。编译期判断 编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码。
- 条件编译：
在C 语言中，通过#ifdef、#ifndef 的方式，为windows、mac 等不同os 编译不同的代码，uni-app 参考这个思路，为uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现 。
条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用// 注释、css 使用、vue/nvue 模板里使用 ``。
举个例子：
- // #ifdef %PLATFORM%
- 平台特有的API实现
- // #endif
- // #ifndef H5
- // 表示只有 h5 不使用这个 api
- uni.createAnimation(OBJECT)
- // #endif
- 运行期判断
运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用uni.getSystemInfoSync().platform判断客户端环境是 Android、iOS 还是小程序开发工具（在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用uni.getSystemInfoSync().platform返回值均为 devtools）
举个例子：
- switch(uni.getSystemInfoSync().platform){
- case 'android':
- console.log('运行Android上')
- break;
- case 'ios':
- console.log('运行iOS上')
- break;
- default:
- console.log('运行在开发者工具上')
- break;
- }
在做小程序时，小程序所有的api都可以使用；而输出到App时，原生渲染引擎、原生sdk集成和混写都支持，使得原生的所有api都可以使用。
同时注意，条件编译不同于代码里if逻辑判断。条件编译块里的代码或指定的文件，只有在特定平台才会被编译进去，不会把不能用的其他平台代码混在一个包里。如果大量使用if判断，会增大体积和影响性能，而条件编译则没有这些问题，减少包体积，减少互相的干扰。
注意事项
非H5 端，不能使用浏览器自带对象，比如document、window、localstorage、cookie 等，更不能使用jquery 等依赖这些浏览器对象的框架。因为各家小程序快应用都不支持这些对象。没有这些浏览器自带对象并不影响业务开发，uni 提供的api 足够完成业务。
uni-app 的tag 同小程序的tag，和HTML 的tag 不一样，比如div 要改成view，span 要改成text、a 要改成navigator。
扫一扫
347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
