uni-app學習路線與建議

1. 前言

uni-app 是一個使用 Vue.js 開發所有前端應用的框架，開發者編寫一套程式碼，可釋出到iOS、Android、Web（響應式）、以及各種小程式（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應用等多個平臺。uni-app 對於個人開發者、創業公司來說是一個快速開發的神器，省去了很多開發成本。下面就給大家介紹一下怎麼快速上手uni-app。

官方文件地址：http://uniapp.dcloud.net.cn/

2. 掌握基礎

來看一下如何快速上手 uniapp，下面的基礎必須要掌握。

2.1 掌握 Vue.js 語法

我們現在已經知道 uni-app 是一個使用 Vue.js 語法，用來開發跨平臺應用的前端框架。

沒有接觸過 Vue.js 的同學要先學習 Vue.js 語法，不過不用過於擔心，很容易上手的。可以先拿出一兩個小時的時間，大概瞭解一下 Vue.js 的語法。

Vue官方文件：http://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 文件: http://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 中文文件：http://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，快速上手開發。

uni-app學習路線與建議（前端新手）