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，快速上手開發。

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