前言 - 課程介紹

一、課程背景

大前端時代背景下，前端開發人員掌握單一的 Web 端開發能力已經遠遠不夠了，微信小程式、安卓 APP、IOS APP，甚至是 Windows 桌面端，還有最近出的鴻蒙系統開發，都成了我們成長需要掌握的技能。所以呢，市面上各種「跨平臺」開發解決方案層出不窮，比較有代表性的就是： UniAPP 、 Flutter、 React Native、Taro、Weex 等等。

UniAPP 是基於「 Vue + 微信小程式 」語言體系，開發人員學習成本低上手快，同時隨著如今 UniAPP 生態也逐步趨於成熟。所以，基於 UniAPP 開發多端專案，已經是很多中小型企業常用的技術解決方案。

那麼，今天呢，我們就從 UniAPP 基礎開始，對照企業級實踐標準，從零到一，一步一步打造一個 多端（微信小程式 + H5 + 安卓 APP + IOS APP）的社群論壇類專案。

二、學前須知

學前須知：

1. 掌握 HTML、CSS、JS基礎，能夠構建靜態頁面
2. 掌握 Vue 基礎，能夠使用腳手架構建應用
3. 掌握微信小程式基礎，對微信小程式元件、API服務有一定的瞭解

三、課程大綱

課程簡介：

1. 課程大綱介紹
2. 實戰專案介紹

UniAPP 快速入門學習

一、UniAPP 介紹

（1）什麼是 UniAPP ？

uni-app 是一個使用 Vue.js 開發所有前端應用的框架，開發者編寫一套程式碼，可釋出到 iOS、Android、H5，以及各種小程式（微信/支付寶/百度/頭條/ QQ /釘釘）等多個平臺，方便開發者快速交付，不需要轉換開發思維，不需要更改開發習慣。

（2）為什麼要選擇 UniAPP ？

1. 開發者/案例數量更多

幾十萬應用、uni 統計月活12億、70+ 微信 / QQ群

2. 平臺能力不受限

在跨端的同時，通過條件編譯 + 平臺特有 API 呼叫，可以優雅的為某平臺寫個性化程式碼，呼叫專有能力而不影響其他平臺

3. 效能體驗優秀

載入新頁面速度更快、自動 diff 更新資料，App 端支援原生渲染支撐更流暢的使用者體驗，小程式端的效能優於市場其他框架

4. 周邊生態豐富

外掛市場數千款外掛，支援 NPM、支援小程式元件和SDK，微信生態的各種 sdk 可直接用於跨平臺 APP

5. 學習成本低

基於通用的前端技術棧，採用 vue 語法+微信小程式 api，無額外學習成本

（3）UniAPP 功能框架

（4）UniAPP 開發環境搭建

1. 下載開發工具 HBuilderX

HBuilderX 是通用的前端開發工具，但為uni-app做了特別強化。

下載 App 開發版，可開箱即用；如下載標準版，在執行或發行uni-app時，會提示安裝uni-app外掛，外掛下載完成後方可使用

2. 建立 uni-app 專案

選擇uni-app型別，輸入工程名，選擇模板，點選建立，即可成功建立。

uni-app自帶的模板有 Hello uni-app ，是官方的元件和API範例。

還有一個重要模板是 uni ui專案模板，日常開發推薦使用該模板，已內建大量常用元件。

3. 執行 uni-app

主要包括：瀏覽器執行、真機執行、小程式執行等

4. 釋出 uni-app

主要包括：雲端原生 APP 、離線原生 APP、H5、各種小程式

二、UniAPP 初始化相關設定

（1）工程目錄結構

┌─components            uni-app元件目錄
│  └─comp-a.vue        可複用的a元件
├─hybrid                存放本地網頁的目錄（自建）
├─platforms             存放各平臺專用頁面的目錄（自建）
├─pages                 業務頁面檔案存放的目錄
│  ├─index
│  │  └─index.vue      index頁面
│  └─list
│     └─list.vue        list頁面
├─static                存放應用參照靜態資源（如圖片、視訊等）的目錄，注意：靜態資源只能存放於此
├─wxcomponents          存放小程式元件的目錄（自建）
├─common                公共資源（自建）
├─api                   請求封裝（自建）
├─store                 狀態管理（自建）
├─main.js               Vue初始化入口檔案
├─App.vue               應用設定，用來設定App全域性樣式以及監聽 應用生命週期
├─manifest.json         設定應用名稱、appid、logo、版本等打包資訊
└─pages.json            設定頁面路由、導覽列、索引標籤等頁面類資訊

提示

• static下目錄的 js 檔案不會被 webpack 編譯，裡面如果有 es6 的程式碼，不經過轉換直接執行，在手機裝置上會報錯。
• 所以less、scss等資源同樣不要放在 static目錄下，建議這些公共的資源放在common目錄下

（2）應用設定 manifest.json

manifest.json 檔案是應用的組態檔，用於指定應用的名稱、圖示、許可權等，我們也可以在這裡為 Vue 為H5 設定跨域攔截處理器

（3）編譯設定 vue.config.js

vue.config.js 是一個可選的組態檔，如果專案的根目錄中存在這個檔案，那麼它會被自動載入，一般用於設定 webpack 等編譯選項。官方檔案

（4）全域性設定 page.json

pages.json 檔案用來對 uni-app 進行全域性設定，決定頁面檔案的路徑、視窗樣式、原生的導航欄、底部的原生tabbar 等。它類似微信小程式中app.json的頁面管理部分。

官方檔案

（5）全域性樣式 uni.scss

uni.scss檔案的用途是為了方便整體控制應用的風格。比如按鈕顏色、邊框風格，uni.scss檔案裡預置了一批scss變數預置。官方檔案

uni-app 官方擴充套件外掛（uni ui）及 外掛市場 上很多三方外掛均使用了這些樣式變數，如果你是外掛開發者，建議你使用 scss 預處理，並在外掛程式碼中直接使用這些變數（無需 import 這個檔案），方便使用者通過搭積木的方式開發整體風格一致的App。

uni.scss是一個特殊檔案，在程式碼中無需 import 這個檔案即可在scss程式碼中使用這裡的樣式變數。uni-app的編譯器在webpack設定中特殊處理了這個 uni.scss，使得每個 scss 檔案都被注入這個uni.scss，達到全域性可用的效果。如果開發者想要less、stylus的全域性使用，需要在vue.config.js中自行設定webpack策略。

（6）主元件 App.vue

App.vue是uni-app的主元件，所有頁面都是在App.vue下進行切換的，是頁面入口檔案。但App.vue本身不是頁面，這裡不能編寫檢視元素。

這個檔案的作用包括：呼叫應用生命週期函數、設定全域性樣式、設定全域性的儲存globalData

應用生命週期僅可在App.vue中監聽，在頁面監聽無效。

（7）入口檔案 main.js

main.js是uni-app的入口檔案，主要作用是初始化vue範例、定義全域性元件、使用需要的外掛如vuex。

官方檔案

（8）UniAPP 開發規範及資源路徑

1. 開發規範約定

• 頁面檔案嚮導 Vue單檔案元件（SFC）規範
• 元件標籤靠近小程式規範，詳見 uni-app 元件規範
• 互連能力（JS API）靠近微信小程式規範，但需要將替換替換 wx 為 uni ，詳見uni-app介面規範
• 資料繫結及事件處理同 Vue.js 規範，同時補充了 App 和頁面的生命週期
• 為相容多端執行，建議使用 flex 佈局進行開發

2. 資源路徑說明

template 內約會靜態資源，如 image，video 等標籤的 src 屬性時，可以使用相對路徑或絕對路徑，形式如下：

<!-- 絕對路徑，/static指根目錄下的static目錄，在cli專案中/static指src目錄下的static目錄 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相對路徑 -->
<image class="logo" src="../../static/logo.png"></image>

注意

• @ 初始的絕對路徑以及相對路徑會通過 base64 轉換規則校驗
• 約會的靜態資源在非 h5 平臺，均不轉為 base64
• H5平臺，小於4kb的資源會被轉換成base64，其餘不轉

js 檔案或 script 標籤內，可以使用相對路徑和絕對路徑，形式如下：

// 絕對路徑，@指向專案根目錄，在cli專案中@指向src目錄
import add from '@/common/add.js'
// 相對路徑
import add from '../../common/add.js'

css 檔案或 style 標籤內，可以使用相對路徑和絕對路徑，形式如下：

/* 絕對路徑 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相對路徑 */
@import url('../../common/uni.css');

css 檔案或 style 標籤內參照的圖片路徑，可以使用相對路徑也可以使用絕對路徑，形式如下：

/* 絕對路徑 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相對路徑 */
background-image: url(../../static/logo.png);

三、UniAPP 生命週期

學習一個工具的目的核心是什麼？是為了解決核心業務邏輯問題，業務邏輯很多時候簡單的解釋一句話：「在合適的時機幹合適的事情」，OK！什麼是合適的時機呢？簡單的說，頁面執行過程中，各個階段的回撥函數就是頁面中的時機，我們也叫這個為「生命週期勾點函數」，當然，業務中我們也會寫到很多「回撥」的邏輯，這些回撥其實也是咱們自定義的時機，UniAPP 的生命週期勾點函數回撥函數有哪些呢？我們來理解一下！

uni-app 完整支援 Vue 範例的生命週期，同時還新增 應用生命週期 及 頁面生命週期。

（1）應用生命週期

（2）頁面生命週期

四、UniAPP 路由設定及頁面跳轉

（1）路由設定

uni-app 頁面路由全部交給框架統一管理，開發者需要在pages.json裡設定每個路由頁面的路徑及頁面樣式（類似小程式在 app.json 中設定頁面路由）。

"pages": [
		{
			"path": "pages/index",
			"style": {
				"navigationBarTitleText": "路由設定",
				"navigationBarBackgroundColor": "#FFFFFF",
				"navigationBarTextStyle": "black",
				"backgroundColor": "#FFFFFF",
				"enablePullDownRefresh": true
			}
		},
		{
			"path": "pages/user",
			"style": {
				"navigationBarTitleText": "路由設定",
				"navigationBarBackgroundColor": "#FFFFFF",
				"navigationBarTextStyle": "black",
				"backgroundColor": "#FFFFFF",
				"enablePullDownRefresh": true
			}
		}]

（2）路由跳轉

uni-app 有兩種頁面路由跳轉方式：使用navigator元件跳轉（標籤式導航）、呼叫API跳轉（程式設計式導航）

框架以棧的形式管理當前所有頁面， 當發生路由切換的時候，頁面棧的表現如下：

（3）獲取當前頁面棧

getCurrentPages() 函數用於獲取當前頁面棧的範例，以陣列形式按棧的順序給出，第一個元素為首頁，最後一個元素為當前頁面。

注意： getCurrentPages() 僅用於展示頁面棧的情況，請勿修改頁面棧，以免造成頁面狀態錯誤。

（4）路由傳參與接收

說明：頁面生命週期的 onLoad(）監聽頁面載入，其引數為上個頁面傳遞的資料，如：

//頁面跳轉並傳遞引數uni.navigateTo({
    url: 'page2?name=liy&message=Hello'});

url為將要跳轉的頁面路徑 ，路徑後可以帶引數。引數與路徑之間使用?分隔，引數鍵與引數值用=相連，不同引數用&分隔。如 ‘path?key1=value2&key2=value2’，path為下一個頁面的路徑，下一個頁面的onLoad函數可得到傳遞的引數。

// 頁面 2 接收引數
onLoad: function (option) { //option為object型別，會序列化上個頁面傳遞的引數
	console.log(option.name); //列印出上個頁面傳遞的引數。
	console.log(option.message); //列印出上個頁面傳遞的引數。
}

注意：url 有長度限制，太長的字串會傳遞失敗，並且不規範的字元格式也可能導致傳遞失敗，所以對於複雜引數建議使用 encodeURI、decodeURI 進行處理後傳遞

（5）小程式路由分包設定

因小程式有體積和資源載入限制，各家小程式平臺提供了分包方式，優化小程式的下載和啟動速度。

所謂的主包，即放置預設啟動頁面及 TabBar 頁面，而分包則是根據 pages.json 的設定進行劃分。

在小程式啟動時，預設會下載主包並啟動主包內頁面，當使用者進入分包內某個頁面時，會把對應分包自動下載下來，下載完成後再進行展示，此時終端介面會有等待提示。

"subPackages": [
  	{
			"root": "news",
			"pages": [{
					"path": "index",
					"style": {
						"navigationBarTitleText": "新聞中心",
						"navigationBarBackgroundColor": "#FFFFFF",
						"navigationBarTextStyle": "black",
						"backgroundColor": "#FFFFFF"
					}
				}
			]
		}
  	... ]，// 預下載分包設定"preloadRule": {
		"pages/index": {
			"network": "all",
			"packages": ["activities"]
		}}

五、UniAPP 常用元件簡介

uni-app 為開發者提供了一系列基礎元件，類似 HTML 裡的基礎標籤元素，但 uni-app 的元件與 HTML 不同，而是與小程式相同，更適合手機端使用。

雖然不推薦使用 HTML 標籤，但實際上如果開發者寫了p等標籤，在編譯到非H5平臺時也會被編譯器轉換為 view 標籤，類似的還有 span 轉 text、a 轉navigator等，包括 css 裡的元素選擇器也會轉，但為了管理方便、策略統一，新寫程式碼時仍然建議使用view等元件。

開發者可以通過組合這些基礎元件進行快速開發， 基於內建的基礎元件，可以開發各種擴充套件元件，元件規範與vue元件相同。

案例：知心姐姐佈局實現

六、UniAPP 常用 API 簡介

uni-app的 js 程式碼，h5 端執行於瀏覽器中，非 h5 端 Android 平臺執行在 v8 引擎中，iOS 平臺執行在 iOS 自帶的 jscore 引擎中。所以，uni-app的 jsAPI 由標準 ECMAScript 的 js API 和 uni 擴充套件 API 這兩部分組成。

ECMAScript 由 Ecma 國際管理，是基礎 js 語法。瀏覽器基於標準 js 擴充了window、document 等 js API；Node.js 基於標準 js 擴充了 fs 等模組；小程式也基於標準 js 擴充套件了各種 wx.xx、my.xx、swan.xx 的 API。

標準 ecmascript 的 API 非常多，比如：console、settimeout等等。

非 H5 端，雖然不支援 window、document、navigator 等瀏覽器的 js API，但也支援標準 ECMAScript。

開發者不要把瀏覽器裡的 js 等價於標準 js。

所以 uni-app 的非 H5 端，一樣支援標準 js，支援 if、for 等語法，支援字串、陣列、時間等變數及各種處理方法，僅僅是不支援瀏覽器專用物件。

案例：知心姐姐聊天功能

七、UniAPP 自定義元件與通訊

（1）自定義元件概念

元件是 vue 技術中非常重要的部分，元件使得與ui相關的輪子可以方便的製造和共用，進而使得vue使用者的開發效率大幅提升，在專案的component目錄下存放元件，uni-app 只支援 vue 單檔案元件（.vue 元件）

元件可以使用「全域性註冊」和「頁面引入」兩種方式進行使用，使用分為三步：

匯入 import xxx from 'xxx'

註冊 Vue.use('xx',xx) components:{ xxx }

使用 <xx />

（2）父子元件通訊

1. 父元件通過自定義屬性向子元件傳遞資料

2. 子元件通過 props 接收父元件傳遞的資料

1. 父元件通過自定義事件標籤向子元件傳遞事件
2. 子元件通過觸發父元件定義事件方式修改父元件資料

（3）slot 資料分發與作用域插槽

1. 父元件通過呼叫子元件內部巢狀 html 內容作為slot分發給子元件
2. 子元件通過在 slot 標籤上新增屬性，向父元件通訊資料，作用域插槽

（4）全域性事件定義及通訊

1. 在整個應用的任何地方均可以使用uni.$on建立一個全域性事件
2. 在整個應用的任何地方也均可以使用 uni.$emit 來觸發全域性事件，實現多元件見的資料通訊

八、UniAPP Vuex 狀態管理

1. 概念

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

2. 應用場景

Vue多個元件之間需要共用資料或狀態。

3. 關鍵規則

• State：儲存狀態資料
• Getter：從狀態資料派生資料，相當於 State 的計算屬性
• Mutation：儲存用於同步更改狀態資料的方法，預設傳入的引數為 state
• Action：儲存用於非同步更改狀態資料，但不是直接更改，而是通過觸發 Mutation 方法實現，預設引數為context
• Module：Vuex 模組化

4. 互動關係

5. 使用方式

import {
		mapState,
		mapActions} from 'vuex'export default {
		computed: {
			...mapState(['loginState', 'userInfo'])
		},
		methods: {
			...mapActions(['userLoginAction', 'userLogoutAction']),
		}}

6. 體驗案例：模擬使用者登陸邏輯實現

注意：配合使用 Storage 來實現重新整理頁面後狀態持續保持的業務需求

九、執行環境判斷與跨端相容

（1）開發環境和生產環境

uni-app 可通過 process.env.NODE_ENV 判斷當前環境是開發環境還是生產環境，一般用於連線測試伺服器或生產伺服器的動態切換。

在HBuilderX 中，點選「執行」編譯出來的程式碼是開發環境，點選「發行」編譯出來的程式碼是生產環境

if(process.env.NODE_ENV === 'development'){
    console.log('開發環境')}else{
    console.log('生產環境')}

（2）判斷平臺

平臺判斷有2種場景，一種是在編譯期判斷，一種是在執行期判斷。

編譯期判斷編譯期判斷，即條件編譯，不同平臺在編譯出包後已經是不同的程式碼，

// #ifdef H5
 alert("只有h5平臺才有alert方法")// #endif// 如上程式碼只會編譯到H5的發行包裡，其他平臺的包不會包含如上程式碼。

執行期判斷 執行期判斷是指程式碼已經打入包中，仍然需要在執行期判斷平臺，此時可使用 uni.getSystemInfoSync().platform 判斷使用者端環境是 Android、iOS 還是小程式開發工具

switch(uni.getSystemInfoSync().platform){
   case 'android':
      console.log('執行Android上')
      break;
   case 'ios':
      console.log('執行iOS上')
      break;
   default:
      console.log('執行在開發者工具上')
      break;}

（3）跨端相容

uni-app 已將常用的元件、JS API 封裝到框架中，開發者按照 uni-app 規範開發即可保證多平臺相容，大部分業務均可直接滿足，但每個平臺有自己的一些特性，因此會存在一些無法跨平臺的情況。

• 大量寫 if else，會造成程式碼執行效能低下和管理混亂。
• 編譯到不同的工程後二次修改，會讓後續升級變的很麻煩。

在 C 語言中，通過 #ifdef、#ifndef 的方式，為 windows、mac 等不同 os 編譯不同的程式碼。 uni-app 參考這個思路，為 uni-app 提供了條件編譯手段，在一個工程裡優雅的完成了平臺個性化實現。

條件編譯是用特殊的註釋作為標記，在編譯時根據這些特殊的註釋，將註釋裡面的程式碼編譯到不同平臺。

**寫法：**以 #ifdef 或 #ifndef 加 %PLATFORM% 開頭，以 #endif 結尾。

• \#ifdef：if defined 僅在某平臺存在
• \#ifndef：if not defined 除了某平臺均存在
• %PLATFORM%：平臺名稱

%PLATFORM% 可取值如下：

推薦：《》

以上就是你必須瞭解的UniAPP入門知識整理的詳細內容，更多請關注TW511.COM其它相關文章！