uni-app学习路线与建议

uni-app学习路线与建议
- 1. 前言
- 2. 掌握基础
- - 2.1 掌握 Vue.js 语法
  - 2.2 使用官方工具 HBuilder
- 3. 进阶知识点
- - 3.1 微信小程序 API
  - 3.2 条件编译
  - 3.3 ES6
  - 3.4 NPM
- 4. 建议与路线
- - 4.1 学习建议
  - 4.2 学习路线
- 5. 小结

uni-app学习路线与建议

1. 前言

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app 对于个人开发者、创业公司来说是一个快速开发的神器，省去了很多开发成本。下面就给大家介绍一下怎么快速上手uni-app。

官方文档地址：https://uniapp.dcloud.net.cn/

2. 掌握基础

来看一下如何快速上手 uniapp，下面的基础必须要掌握。

2.1 掌握 Vue.js 语法

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

没有接触过 Vue.js 的同学要先学习 Vue.js 语法，不过不用过于担心，很容易上手的。可以先拿出一两个小时的时间，大概了解一下 Vue.js 的语法。

Vue官方文档：https://cn.vuejs.org/v2/guide/

2.2 使用官方工具 HBuilder

使用uni-app 框架，日常开发建议大家直接使用官方工具 HBuilder 创建项目就可以了。

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

3. 进阶知识点

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

3.1 微信小程序 API

uni-app 的 API 与微信小程序 API 基本一致。掌握微信小程序 API 对后面的开发很有帮助。

微信小程序 API 文档:
https://developers.weixin.qq.com/miniprogram/dev/api/

3.2 条件编译

虽然说 uni-app 可以用来开发跨平台应用，但是每个平台之间没有我们想象中的那么和谐。样式、支付接口都各有各的想法。大约有百分之10 的样式各平台之间是不兼容的。

这时候，我们就需要用到条件编译了，针对每一平台的特性去做适配，所以我们开发时，重点一定要注意每个平台对组件或接口的兼容性。

实例：

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

3.3 ES6

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

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

3.4 NPM

NPM 的全称是 Node Package Manager，翻译成中文就是 node 包管理器。安装 node.js 运行环境时会自动安装 npm，uni-app 支持使用 npm 安装第三方包，后面我们通过 npm 来下载安装 uni-app 相关的软件包。

NPM 中文文档：https://www.npmjs.cn/

4. 建议与路线

4.1 学习建议

与我们学习一门新的编程语言的思路一样，如果想要快速上手的话，我们不需要在刚开始学习的时候，就要弄清楚开发所需要的全部语法、组件等。这样会耗费掉我们大量的时间，并且没有实例的支撑，学习起来会很抽象，导致后面很难坚持下去。

如果你有一些代码基础了，在我们刚开始学习 uni-app 时，建议先创建一个 uni-app 项目，先学习如何将项目运行起来，跟着课程一步步的填充代码代码，并看到实时展现出来的效果，这样会让我们学习和开发的过程更有趣更高效。

如果之前没有代码基础，一开始只需要掌握 Vue.js 语法即可，其他相关的知识点我们可以边做项目边补充。

下一节我们就要开始创建第一个项目了，记得跟着一起实操，开启我们的 uni-app 学习之旅吧~

一定要多敲多练，写多了就记住了！！！

4.2 学习路线

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

学习路线如下：

大体了解Vue.js 语法；
学习创建运行 uni-app 项目；
了解 uni-app 组件、路由等知识，开发过程中需要注意的是uni-app中对vue语法的兼容性，自己开发个小功能看看效果；
根据项目情况，继续补充 ES6、NPM 等知识；
项目打包并上线到各平台

5. 小结

使用 uni-app 开发需要掌握 Vue.js 语法基础，以及要学会使用官方工具 HBuilder；
需要根据开发的具体情况，掌握微信小程序 API、条件编译、ES6、NPM 等技能；
需要了解 uni-app 的学习建议以及学习路线，能帮助我们更加快速的入门 uni-app，快速上手开发。