uni-app學(xué)習(xí)路線與建議

1. 前言

uni-app 對于個(gè)人開發(fā)者、創(chuàng)業(yè)公司來說是一個(gè)快速開發(fā)的神器，省去了很多開發(fā)成本。下面就給大家介紹一下怎么快速上手uni-app。

2. 掌握基礎(chǔ)

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

2.1 掌握 Vue.js 語法

我們現(xiàn)在已經(jīng)知道 uni-app 是一個(gè)使用 Vue.js 語法，用來開發(fā)跨平臺應(yīng)用的前端框架。

沒有接觸過 Vue.js 的同學(xué)要先學(xué)習(xí) Vue.js 語法，不過不用過于擔(dān)心，很容易上手的。可以先拿出一兩個(gè)小時(shí)的時(shí)間，大概了解一下 Vue.js 的語法。

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

2.2 使用官方工具 HBuilder

使用uni-app 框架，日常開發(fā)建議大家直接使用官方工具 HBuilder 創(chuàng)建項(xiàng)目就可以了。

官方工具非常好用，各類配置項(xiàng)很方便，可以幫助我們節(jié)省很多時(shí)間，生成跨平臺項(xiàng)目也是用官方工具 HBuilder 直接生成。MAC電腦使用 HBuilder 會(huì)有點(diǎn)小 bug，記得要更新成 HBuilderX 版本，X 是 HBuilder 的下一代版本。

3. 進(jìn)階知識點(diǎn)

如果想要開發(fā)一個(gè)實(shí)際 uni-app 項(xiàng)目，除了 Vue.js 語法學(xué)習(xí)以外，還要掌握以下知識點(diǎn)。

3.1 微信小程序 API

uni-app 的 API 與微信小程序 API 基本一致。掌握微信小程序 API 對后面的開發(fā)很有幫助。

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

3.2 條件編譯

雖然說 uni-app 可以用來開發(fā)跨平臺應(yīng)用，但是每個(gè)平臺之間沒有我們想象中的那么和諧。樣式、支付接口都各有各的想法。大約有百分之10 的樣式各平臺之間是不兼容的。

這時(shí)候，我們就需要用到條件編譯了，針對每一平臺的特性去做適配，所以我們開發(fā)時(shí)，重點(diǎn)一定要注意每個(gè)平臺對組件或接口的兼容性。

實(shí)例：

/*H5平臺登錄按鈕顯示紅色，微信小程序登錄按鈕顯示藍(lán)色*/
button {
  /* #ifdef H5 */
  background:red;
  /*  #endif  */

  /* #ifdef MP-WEIXIN */
  background:blue;
  /*  #endif  */
}

3.3 ES6

ES6 的全稱是 ECMAScript 6，是 JavaScript 的一個(gè)版本。uni-app 支持了絕大部分 ES6 API，同時(shí)也支持 ES7 的 await/async。

我們需要掌握箭頭函數(shù)、解構(gòu)賦值、數(shù)組擴(kuò)展、Promise、module 等知識點(diǎn)。

3.4 NPM

NPM 的全稱是 Node Package Manager，翻譯成中文就是 node 包管理器。安裝 node.js 運(yùn)行環(huán)境時(shí)會(huì)自動(dòng)安裝 npm，uni-app 支持使用 npm 安裝第三方包，后面我們通過 npm 來下載安裝 uni-app 相關(guān)的軟件包。

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

4. 建議與路線

4.1 學(xué)習(xí)建議

與我們學(xué)習(xí)一門新的編程語言的思路一樣，如果想要快速上手的話，我們不需要在剛開始學(xué)習(xí)的時(shí)候，就要弄清楚開發(fā)所需要的全部語法、組件等。這樣會(huì)耗費(fèi)掉我們大量的時(shí)間，并且沒有實(shí)例的支撐，學(xué)習(xí)起來會(huì)很抽象，導(dǎo)致后面很難堅(jiān)持下去。

如果你有一些代碼基礎(chǔ)了，在我們剛開始學(xué)習(xí) uni-app 時(shí)，建議先創(chuàng)建一個(gè) uni-app 項(xiàng)目，先學(xué)習(xí)如何將項(xiàng)目運(yùn)行起來，跟著課程一步步的填充代碼代碼，并看到實(shí)時(shí)展現(xiàn)出來的效果，這樣會(huì)讓我們學(xué)習(xí)和開發(fā)的過程更有趣更高效。

如果之前沒有代碼基礎(chǔ)，一開始只需要掌握 Vue.js 語法即可，其他相關(guān)的知識點(diǎn)我們可以邊做項(xiàng)目邊補(bǔ)充。

下一節(jié)我們就要開始創(chuàng)建第一個(gè)項(xiàng)目了，記得跟著一起實(shí)操，開啟我們的 uni-app 學(xué)習(xí)之旅吧~

4.2 學(xué)習(xí)路線

給大家總結(jié)了一下學(xué)習(xí)路線，我們課程也是根據(jù)這個(gè)路線來給大家講解的，不過學(xué)習(xí)路線不是一成不變的，適合自己才是最好的，具體可以自己的情況做調(diào)整。

學(xué)習(xí)路線如下：

• 大體了解Vue.js 語法；
• 學(xué)習(xí)創(chuàng)建運(yùn)行 uni-app 項(xiàng)目；
• 了解 uni-app 組件、路由等知識，開發(fā)過程中需要注意的是uni-app中對vue語法的兼容性，自己開發(fā)個(gè)小功能看看效果；
• 根據(jù)項(xiàng)目情況，繼續(xù)補(bǔ)充 ES6、NPM 等知識；
• 項(xiàng)目打包并上線到各平臺

5. 小結(jié)

本節(jié)課程我們主要了解了如何快速入門 uni-app，并了解了 uni-app 的學(xué)習(xí)路線，后面的課程會(huì)根據(jù)本節(jié)課的學(xué)習(xí)路線幫助大家快速上手 uni-app。本節(jié)課程的需要掌握的重點(diǎn)如下：

• 使用 uni-app 開發(fā)需要掌握 Vue.js 語法基礎(chǔ)，以及要學(xué)會(huì)使用官方工具 HBuilder；
• 需要根據(jù)開發(fā)的具體情況，掌握微信小程序 API、條件編譯、ES6、NPM 等技能；
• 需要了解 uni-app 的學(xué)習(xí)建議以及學(xué)習(xí)路線，能幫助我們更加快速的入門 uni-app，快速上手開發(fā)。