uni-app的基础概念

如果你有uni-app的开发经验，可省略观看~。

没有uni-app的开发经验也没有关系，本小节将带你快速的了解uni-app这个高效率的跨端开发框架和生态。

uni-app简介

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

当前官网的介绍是一套代码可以发行到14个平台，比我刚开始学习时又多了4个平台：p

那它是怎么做到一套代码兼容如此多平台的呢？

简单来说当我们在微信小程序中想要获得用户的位置信息，是通过wx.getLocation这个API来实现的，如果在uni-app中进行开发，我们就可以使用uni.getLocation来实现，在我们进行项目发行，代码编译的时候，uni-app的开发框架会判断我们的目标编译平台，如果是微信小程序，则将uni.getLocation改为wx.getLocation，如果是字节小程序，则改为tt.getLocation…

这样看uni-app难道只是实现了api前缀replace吗？当然不是！各个小程序平台都有自己的SDK和开发工具，由目标平台去完成api实际功能的实现，在各小程序平台里uni-app能做的不多，也就是做一个替换。但我们看向Web、iOS和Android端，uni.getLocation同样可以兼容，这其实是uni-app的移动端SDK在遵照小程序的SDK规范进行了同样功能的实现。

uni-app功能框架图

另外除了以上平台，从端上说，我曾经用uni-app开发过家里的智能电视上的应用，开发过孩子智能手表上的应用，在开发者社区里听说很多商超的智能扫码枪也是uni-app的。因为这些智能设备都是Android系统，我就是想告诉大家，掌握uni-app后的应用场景是很大的。

开发工具和调试环境

uni-app项目的开发，我们既可以使用VSCode，也可以使用uni-app官方IDEHBuilderX来进行。本小册中的开发环境均使用HBuilderX，这也是我推荐的uni-app开发环境。

在IDE的使用上，你不用担心和别的IDE习惯不同，你可以通过工具>预设快捷键方案菜单更改为其他主流IDE的预制设置。当然，也是可以自定义快捷键的。

安装好HBuilderX后，默认主题应该是叫做绿柔。你不喜欢的话也可以在工具>主题菜单中切换

酷黑和默认的sublime风格类似
雅蓝和默认的VSCode风格类似

另外由于各个小程序平台的SDK还是有不少差异，通常我们还需要下载各平台自己的开发者工具来运行调试。比如要兼容微信小程序，我们就要HBuilderX和微信小程序开发工具同时使用，要兼容QQ小程序，HBuilderX和微信小程序开发工具同时使用。

电脑里一大堆开发者工具也真是让人头疼

不过由于uni-app也可以发行Web端，大部分无须调用平台API的页面我们可以直接通过内置或第三方浏览器来查看效果。

uni-app的项目结构

一个uni-app项目的常见目录结构如下图，比较重要的都给大家标注了

uni-app的生态

uni-app有着自己的完整的插件生态和市场，目前插件市场有各类插件共计5000+。

HBuilderX插件
前端组件
原生插件
项目源码
云函数模板

插件可以设置为付费，帮助插件开发者获得收益。但大部分的插件都是免费的，同时为了鼓励开发者DCloud每年也都会举办开发者大赛，奖品丰厚。我曾经在2020年参加DCloud插件开发大赛并同时获得二等奖和三等奖。

注意事项

会JS但不了解Vue框架能学习uni-app吗？

是可以的，正好借由学习uni-app来掌握Vue的语法规范。

注：在本文章编写时，uni-app已支持使用Vue3语法来开发的，但Vue2的风格仍是推荐用于开发uni-app的主要版本

uni-app相关问题提问注意事项

虽然uni-app可以一套代码，多端发行，但各端下还是有不少差异，查看官方文档一定要注意平台差异说明。向人提问时一定要附带说明当前遇到的问题是在哪个端上遇到的。

本文章基础知识章节和官方文档的区别

基础的知识点组织是按照官方文档来整理的，但本文章会结合我个人的实战经验转化为更加通俗易懂的描述。并在合适的关键节点用实战案例强化知识点的吸收。