亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

貓寧一 · 更新于 2021-05-11

uni-app學習路線與建議

1. 前言

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

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 對后面的開發很有幫助。

3.2 條件編譯

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

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

實例：

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

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

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，并了解了 uni-app 的學習路線，后面的課程會根據本節課的學習路線幫助大家快速上手 uni-app。本節課程的需要掌握的重點如下：

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