1.1 uni-app简介

uni-app是一个全端开发框架，可以将开发的项目一次性编译为Web、App、小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用。uni-app支持使用各种IDE（Integrated Development Environment，集成开发环境）进行开发，如Vscode、WebStorm，但与HBuilderX结合使用更完美。

1.1.1 uni-app的由来

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

DCloud于2012年开始研发小程序技术，优化WebView的功能和性能，并加入W3C和HTML5中国产业联盟，推出了HBuilder开发工具，为后续产业化做准备。2015年，DCloud正式推出了自己的小程序，产品名为“流应用”，它不是B/S模式的轻应用，而是接近系统的原生功能、性能的动态App，并且即点即用，第一次使用时可以边下载边使用。为了推广该技术，DCloud将技术标准捐献给了工信部旗下的HTML5中国产业联盟，并推进各家流量巨头接入该标准，开展小程序业务。360手机助手率先接入该标准，在其3.4版本实现了应用的秒开运行，如图1-1所示。

随后DCloud推动大众点评、携程、京东、有道词典、唯品会等众多知名App所属企业为流应用平台提供应用。2015年9月，DCloud推动微信团队开展小程序业务，演示了流应用的秒开应用、扫码获取应用、分享链接获取应用等众多场景案例，并分享了WebView体验优化的经验。微信团队经过分析后，于2016年初决定上线小程序业务，但没有接入联盟标准，而是制定了自己的标准。

DCloud持续在业内推广小程序理念，推动包括手机厂商在内的互联网企业陆续上线类似小程序或快应用的业务。部分企业接入了联盟标准，但更多企业因存在利益纷争，标准难以统一。技术是纯粹的，不应该因为商业利益而分裂。造成混乱的局面并非DCloud所愿，于是DCloud决定开发一个免费、开源的框架，为开发者抹平各平台的差异，这就是uni-app的由来。铸就uni-app成功的因素有以下几点。

①经过多年的积累，截至2021年3月，DCloud拥有900万个开发者。

②DCloud一直都有小程序的iOS、Android引擎，因此uni-app的App端和小程序端保持高度一致。

③DCloud在引擎上的持续投入，使得uni-app的App端功能、性能均优于大多数小程序引擎。

④DCloud非常了解各平台的小程序，因此开发抹平各端差异的跨端框架比较轻松。

现在，uni-app已经是业内主流的应用开发框架，支撑着12亿活跃手机用户的庞大生态。

1.1.2 uni-app的特点

uni-app是一个使用Vue.js开发跨平台应用的前端框架，可用于开发兼容多端的应用。开发者编写Vue.js代码，通过uni-app可以编译到iOS、Android、微信小程序等多个平台。uni-app主要有以下特点。

1. 更好的跨平台能力

图1-2所示为uni-app功能框架图，可以看出，uni-app在跨平台的过程中不牺牲平台特色，而是结合了平台专有特征，真正做到海纳百川、各取所长。在跨平台的同时，通过条件编译+平台特有API（Application Programming Interface，应用程序接口）调用，可以为某平台编写个性化代码，调用专有特征而不影响其他平台。uni-app支持原生代码混写和原生SDK（Software Development Kit，软件开发工具包）集成。

2. 一套代码可以在多个平台运行

uni-app实现了一套代码同时在多个平台运行。图1-3所示为一套代码同时在iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序开发者工具、百度开发者工具、字节跳动开发者工具、QQ小程序开发者工具中运行的效果（底部8个终端选项卡代表8个终端模拟器）。

实际运行效果如图1-4所示。

3. 运行体验好，性能优秀

uni-app的组件、API与微信小程序一致，原生App端支持Weex原生渲染，加载新页面速度更快，自动采用diff算法更新数据。其App端支持原生渲染，可提供更流畅的体验；小程序端的性能优于市场上的其他框架。

4. 开放生态，周边生态丰富

uni-app支持通过npm安装第三方包，支持微信小程序自定义组件及SDK，兼容mpvue组件及项目，其App端支持和原生代码混合编码，插件市场有数千款插件。

5. 学习成本低，开发成本低

uni-app基于通用的前端技术栈，采用Vue语法+微信小程序API进行开发，无额外学习成本。除了开发成本，招聘、管理、测试等各方面成本也大幅下降。HBuilderX是uni-app的高效开发“神器”，熟练掌握HBuilderX后，开发效率可以翻倍（即便只开发一个平台的程序，也可以大幅提高开发效率）。

1.1.3 uni-app的学习方法

了解了uni-app的由来和特点后，读者可以结合自己的情况选择不同的uni-app学习方法。

读者可以通过uni-app官网了解uni-app。uni-app官方出品了《uni-app官方教程》（网址见“资源文件\网址索引.docx”），通过官方视频教程可以直观、快速地了解uni-app。

熟悉H5，但不熟悉Vue和小程序的读者可以通过《白话uni-app》（网址见“资源文件\网址索引.docx”）快速了解uni-app和H5的差异。DCloud与Vue进行了合作，Vue.js官网中提供了免费视频教程，方便用户学习Vue（网址见“资源文件\网址索引.docx”）。uni-app使用的是Vue语法，而不是小程序自定义的语法，因此不需要用户额外学习。

除了官方视频教程，腾讯课堂、网易课堂、哔哩哔哩、慕课网等各大视频学习网站也提供了一些uni-app的学习资源。第三方培训机构视频教程的网址见“资源文件\网址索引.docx”。

uni-app是一个跨平台框架，各端的管理规则有一定的差异，如H5端的浏览器有跨域限制；微信小程序强制要求使用https链接，并且所有要联网的服务器域名都要配置到微信的白名单中；iOS的隐私控制和虚拟支付控制非常严格； Android、国产ROM（Read Only Memory，只读存储器，这里为手机操作系统）的各种兼容性存在差异，且中国大部分地区的网络不支持谷歌服务，这也导致了push、定位等功能开发不规范；如果使用第三方SDK实现定位、地图、支付、推送等功能，需要遵循其规则和限制等。