文章目录
前言
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。
一、官网介绍
1. 什么是 uni-app
uni-app 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。
DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群，开发者可以放心选择。
uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。
2. 特性
uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。
- 开发者/案例数量更多
数百万应用、uni统计月活12亿、70+微信/qq群、更高的百度指数
跨端完善度更高，真正落地的提高生产力
- 平台能力不受限
在跨端的同时，通过条件编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台。
支持原生代码混写和原生sdk集成。
- 性能体验优秀
加载新页面速度更快、自动diff更新数据。
App端支持原生渲染，可支撑更流畅的用户体验。
小程序端的性能优于市场其他框架。
- 周边生态丰富
插件市场数千款插件。
支持NPM、支持小程序组件和SDK。
微信生态的各种sdk可直接用于跨平台App。
- 学习成本低
基于通用的前端技术栈，采用vue语法+微信小程序api，无额外学习成本。
- 开发成本低
不止开发成本，招聘、管理、测试各方面成本都大幅下降。
HBuilderX是高效开发神器，熟练掌握后研发效率至少翻倍（即便只开发一个平台）。
3. 功能架构图
从下面uni-app功能框架图可看出，uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。
- 一套代码，运行到多个平台
uni-app实现了一套代码，同时运行到多个平台；如下图所示，一套代码，同时运行到iOS模拟器、Android模拟器、web、微信开发者工具、支付宝小程序Studio、百度开发者工具、抖音开发者工具、QQ开发者工具（底部每个终端选项卡，代表1个终端模拟器）：
实际运行效果如下：
二、快速上手 - HBuilderX 可视化界面
uni-app支持通过 可视化界面、vue-cli命令行 两种方式快速创建项目。
可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。
开始之前，开发者需先下载安装如下工具：
HBuilderX：官方IDE下载地址
HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。
1. 创建uni-app
2. 运行uni-app
3. 发布uni-app
三、快速上手 - vue-cli 命令行
除了HBuilderX可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。
可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。
开始之前，开发者需先下载安装如下工具：
HBuilderX：官方IDE下载地址
HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。
1. 创建uni-app
2. 运行、发布uni-app
3. 运行并发布快应用
快应用是由华为、小米、OPPO等九家中国手机厂商于2018年3月联合推出的新型应用生态，旨在通过统一技术标准解决多机型适配难题，降低开发成本并提升用户体验。其基于前端技术栈开发，深度集成于手机操作系统，支持原生渲染，兼具HTML5页面便捷性与原生应用性能优势。
4. cli创建项目和HBuilderX可视化界面创建项目的区别
三、如何学习
如果你熟悉h5，但不熟悉vue和小程序
- 看完这篇白话uni-app
- DCloud与vue合作，在vue.js官网提供了免费视频教程，也可以直达教程地址：https://learning.dcloud.io
- 不需要专门去学习小程序的语法，uni-app使用的是vue的语法，不是小程序自定义的语法。
如果你熟悉小程序，但不熟悉vue
参考三方总结https://segmentfault.com/a/1190000015684864
三方培训机构视频
目前各大视频学习网站都有不少uni-app的学习资源：
- bilibili的uni-app相关视频
- 网易课堂的uni-app相关课程
- 慕课网uni-app相关课程
如下是三方专业培训机构的视频教程
- 《2023 uni-app 小兔鲜儿小程序项目》，出品人：黑马程序员。亮点： Vue3+TS+Pinia 最新技术栈课程。
- 《uni-app 跨平台应用开发教程》，出品人：hcoder 刘海君，课时：共25节。亮点：讲师经验丰富，也是graceui框架作者。
- 《uni-app实战社区交友类app开发》，出品人：帝莎IT学院。适用人群：具备Html+Css+Javascript基础知识。
- 《uni-app仿小米商城实战》，出品人：帝莎IT学院。首页使用nvue开发，目前支持app端和小程序端。
- 《uni-app多端调试环境配置》，出品人：帝莎IT学院。
- 《uni-app实战仿微信app全栈开发》，出品人：帝莎IT学院。
- 《uni-app实战视频点播app小程序》，出品人：帝莎IT学院。
- 《uni-app 5小时快速入门》，出品人：meHaoTian
- 《uni-app实战直播app全栈开发》，出品人：帝莎IT学院
- 《uni-app快速入门到社区论坛项目多端开发实战》，出品人：千锋教育
- 《uni-app新手入门》，出品人：蓝桥云课
- 《uniapp 原生插件开发-android》，出品人：朱哲
- 《uniapp 原生插件开发-iOS》，出品人：朱哲
- 《雪狐uni-app+阿里直播实战项目开发第一季》，出品人：雪狐网
- 《2024新课uniapp Vue3 零基础入门到项目打包》，出品人：咸虾米_
- 《2022新课uniapp Vue2 零基础入门到项目打包》，出品人：咸虾米_
uni-app相关书籍
北京大学出版社：uni-app跨平台开发与应用，从入门到实践
清华大学出版社：Vue.js核心技术解析与uni-app跨平台实战开发
中国铁道出版社：移动应用开发——基于UNI-APP框架
中国水利水电出版社：保姆级uni-app多端跨平台开发从入门到企业级实战
更多京东售卖的uni-app书籍
如果你是线下培训机构，想开课合作，联系bd@dcloud.io
欢迎更多人分享学习经验，可转载到社区，优秀的文章我们会收录在本文中。
- uniCloud的学习资料
掌握uniCloud，进阶全栈，详见：https://uniapp.dcloud.io/uniCloud/learning
- 关于各端的管理规则需要耐心学习
uni-app并不难学，但我们注意到很多新人在适应各个平台的规则限制时比较急躁。
每个端，有每个端的管理规则，这不是uni-app在技术层面上可以抹平的：- 比如H5端的浏览器有跨域限制；
- 比如微信小程序会强制要求https链接，并且所有要联网的服务器域名都要配到微信的白名单中；
- 比如App端，iOS对隐私控制和虚拟支付控制非常严格；
- 比如App端，Android、国产rom各种兼容性差异，尤其是因为谷歌服务被墙，导致的push、定位等开发混乱的坑；
遇事耐心，不急不躁，虽然这不是成功的唯一要素，但它是你技术路上长远走下去的基础。
- uni-app的底层框架实现原理及优化策略（高级）
通过评测对比，我们知道uni-app的性能比其他小程序开发框架好，但底层原理是什么？ 这篇视频就是讲解uni-app框架底层的实现思路和优化策略：《uni-app框架如何实现高性能》
参考文章
uni-app官网