uni-app学习路线及建议

uni-app学习路线及建议 1. 简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，即可发布到 iOS、Web（响应式）、各类小程序（微信/支付宝/百度/今日头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。对于个人开发者和创业公司来说，uni-app 是一个快速开发的利器，可以节省大量的开发成本。下面介绍如何快速上手 uni-app。

官方文档地址：

2. 掌握基础知识

我们来看看如何快速入门。以下基础知识必须掌握。

2.1 掌握 Vue.js 语法

现在我们知道uni-app是一个使用Vue.js语法开发跨平台应用程序的前端框架。

没有用过 Vue.js 的同学需要先学习一下 Vue.js 的语法，不过不用太担心，入门还是很容易的，花一两个小时就可以大致了解 Vue.js 的语法。

Vue 官方文档：

2.2 使用官方工具

使用uni-app框架，日常开发建议直接使用官方工具创建项目。

官方的工具非常好用，各种配置项很方便，可以帮我们节省很多时间。跨平台的项目也是直接使用官方工具生成的。在MAC电脑上使用会有一些小bug，所以记得更新到X版本，它是下一代版本。

3. 进阶知识点

如果要开发实际的uni-app项目，除了学习Vue.js语法之外，还必须掌握以下知识点。

3.1 微信小程序接口

uni-app的API和微信小程序API基本一致，掌握微信小程序API对后续的开发非常有帮助。

微信小程序API文档：

3.2 条件编译

虽然uni-app可以开发跨平台的应用，但是各个平台之间的协调性并没有想象的那么好，风格、支付接口都不一样，大概有10%左右的风格在平台之间不兼容。

这时候我们就需要利用条件编译来适配各个平台的特点，所以我们在开发的时候一定要注意各个平台对组件或者接口的兼容性。

例子：

/*H5平台登录按钮显示红色，微信小程序登录按钮显示蓝色*/ button { /* #ifdef H5 */ background:red; /* #endif */ /* #ifdef MP-WEIXIN */ background:blue; /* #endif */ } 代码块12345678910

3.3 ES6

ES6的全称是6，是ES6的一个版本。uni-app支持大部分ES6的API，同时也支持ES7/。

我们需要掌握箭头函数、解构赋值、数组扩展等。

3.4 新公共管理

npm的全称是Node，中文意思为节点包管理器。当你安装node.js运行环境的时候，npm会自动安装。uni-app支持使用npm安装第三方包。后面我们会使用npm来下载和安装uni-app相关的软件包。

NPM中文文档：

四、建议与路线 4.1 学习建议

就像学习一门新的编程语言的理念一样，如果我们想要快速入门，刚开始学习的时候没必要把开发所需的所有语法、组件等都搞清楚。这会占用我们大量的时间，而且如果没有例子的支持，学习起来会很抽象，后面很难坚持下去。

如果有一些编码知识的话，我们在刚开始学习uni-app的时候，建议先创建一个uni-app项目，先学会如何运行这个项目，按照课程一步步填写代码，并且看到效果的实时展示，这样会让我们的学习和开发过程变得更加有趣和高效。

如果你没有任何编码基础，一开始只需要掌握Vue.js语法，我们可以在做项目的同时，补充其他相关知识点。

下一节，我们将开始创建我们的第一个项目。记得跟着我们一起开始我们的uni-app学习之旅。

一定要多打字多练习，写多了就记得牢了！！！

4.2 学习路径

我给大家总结了学习路线，我们的课程也是按照这个路线给大家讲解的，但是学习路线不是一成不变的，适合自己的才是最好的，你可以根据自己的具体情况进行调整。

学习路径如下：

5. 总结