什么是 uni-app

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

DCloud公司拥有800万开发者用户,几十万应用案例、12亿手机端月活用户,数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app(详见),腾讯课堂官方为uni-app录制培训课程(详见),开发者可以放心选择。

uni-app在手,做啥都不愁。即使不跨端,uni-app也是更好的小程序开发框架(详见)、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目,你都可以快速交付,不需要转换开发思维、不需要更改开发习惯。

快速体验

一套代码编到10个平台,这不是梦想。眼见为实,扫描10个二维码,亲自体验最全面的跨平台效果!

注:

  1. 某些平台不能提交简单demo,故补充了一些其他功能;hello uni-app示例代码可从github获取
  2. 快应用仅支持 vivo 、oppo、华为
  3. 360小程序仅 windows平台支持,需要在360浏览器中打开

uni-app视频介绍

方便你快速了解 uni-app 的主要特征,精心准备了一个简单的十分钟介绍视频

为什么要选择uni-app?

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

开发者/案例数量更多:

  • 几十万应用、uni统计月活12亿、70+微信/qq群、更高的百度指数
  • 跨端完善度更高,真正落地的提高生产力

平台能力不受限:

  • 在跨端的同时,通过条件编译+平台特有API调用,可以优雅的为某平台写个性化代码,调用专有能力而不影响其他平台。
  • 支持原生代码混写和原生sdk集成。

性能体验优秀:

  • 加载新页面速度更快、自动diff更新数据。
  • App端支持原生渲染,可支撑更流畅的用户体验。
  • 小程序端的性能优于市场其他框架。

周边生态丰富:

  • 插件市场数千款插件。
  • 支持NPM、支持小程序组件和SDK。
  • 微信生态的各种sdk可直接用于跨平台App。

学习成本低:

  • 基于通用的前端技术栈,采用vue语法+微信小程序api,无额外学习成本。

开发成本低:

  • 不止开发成本,招聘、管理、测试各方面成本都大幅下降。
  • HBuilderX是高效开发神器,熟练掌握后研发效率至少翻倍(即便只开发一个平台)。

功能框架

从下面uni-app功能框架图可看出,uni-app在跨平台的过程中,不牺牲平台特色,可优雅的调用平台专有能力,真正做到海纳百川、各取所长。

一套代码,运行到多个平台

uni-app实现了一套代码,同时运行到多个平台;如下图所示,一套代码,同时运行到iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具、QQ开发者工具(底部8个终端选项卡代表8个终端模拟器):

实际运行效果如下(点击图片可放大):

uni-app的由来

uni,读 you ni,是统一的意思。

很多人以为小程序是微信先推出的,其实,DCloud才是这个行业的开创者。

DCloud于2012年开始研发小程序技术,优化webview的功能和性能,并加入W3C和HTML5中国产业联盟,推出了HBuilder开发工具,为后续产业化做准备。

2015年,DCloud正式商用了自己的小程序,产品名为“流应用”,它不是B/S模式的轻应用,而是能接近原生功能、性能的动态App,并且即点即用。

为将该技术发扬光大,DCloud将技术标准捐献给工信部旗下的HTML5中国产业联盟,并推进各家流量巨头接入该标准,开展小程序业务。

360手机助手率先接入,在其3.4版本实现应用的秒开运行。

随后DCloud推动大众点评、携程、京东、有道词典、唯品会等众多开发者为流应用平台提供应用。

在2015年9月,DCloud推进微信团队开展小程序业务,演示了流应用的秒开应用、扫码获取应用、分享链接获取应用等众多场景案例,以及分享了webview体验优化的经验。

微信团队经过分析,于2016年初决定上线小程序业务,但其没有接入联盟标准,而是订制了自己的标准。

DCloud持续在业内普及小程序理念,推进各大流量巨头,包括手机厂商,陆续上线类似小程序/快应用等业务。

部分公司接入了联盟标准,但更多公司因利益纷争严重,标准难以统一。

技术是纯粹的,不应该因为商业利益而分裂。开发者面对如此多的私有标准不是一件正确的事情。

造成混乱的局面非DCloud所愿。于是我们决定开发一个免费开源的框架。

既然各巨头无法在标准上达成一致,那么就通过这个框架为开发者抹平各平台差异。

这,就是uni-app的由来。

  • 因为多年积累,所以DCloud拥有400多万开发者,并不意外
  • 因为DCloud一直都有小程序的iOS、Android引擎,所以uni-app的App端和小程序端保持高度一致,并不意外
  • 因为DCloud在引擎上的持续投入,所以uni-app的App端功能、性能比大多数小程序引擎都优秀,并不意外
  • 因为DCloud对各家小程序太了解了,所以做好抹平各端差异的跨端框架,并不意外

现在,uni-app已经是业内最风靡的应用框架,支撑着9亿活跃手机用户的庞大生态。

世界兜兜转转,当你踏出第一步时,随后很多事不会按你的预期发展。但只要你不忘初心,你想要的那个目标,最终会换个方式实现。

DCloud的初心是什么?

  1. 为开发者提供免费、高效的开发工具,让天下没有难做的应用
  2. 改进应用形态,让用户更方便的获取数字服务

DCloud也再次承诺不会对uni-app、HBuilderX等工具收费,感谢数百万开发者的一路陪伴,也请一直监督我们不忘初心!

如何学习

建议第一步,看完uni-app官网的首页介绍。

建议第二步,通过快速上手,亲身体验下uni-app。

建议第三步,看完《uni-app官方教程》,出品人:DCloud,课时:共3节。

如果你熟悉h5,但不熟悉vue和小程序

  1. 看完这篇白话uni-app
  2. DCloud与vue合作,在vue.js官网提供了免费视频教程,也可以直达教程地址:https://learning.dcloud.io
  3. 不需要专门去学习小程序的语法,uni-app使用的是vue的语法,不是小程序自定义的语法。

如果你使用过mpvue

几乎不用学习,uni-app对vue语法的支持是mpvue的超集。这里有篇mpvue转uni-app指南

如果你熟悉小程序,但不熟悉vue

参考三方总结https://segmentfault.com/a/1190000015684864

三方培训机构视频

如下是三方专业培训机构的视频教程

目前各大视频学习网站都有不少uni-app的学习资源,更多资源请点击搜索链接:

  • 腾讯课堂的uni-app相关课程
  • 网易课堂的uni-app相关课程
  • bilibili的uni-app相关视频
  • 慕课网uni-app相关课程