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。