本篇文章給大家?guī)?lái)了關(guān)于UniAPP快速入門(mén)的相關(guān)知識(shí)整理，希望對(duì)大家有幫助。

前言 - 課程介紹

一、課程背景

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

UniAPP 是基于「 Vue + 微信小程序 」語(yǔ)言體系，開(kāi)發(fā)人員學(xué)習(xí)成本低上手快，同時(shí)隨著如今 UniAPP 生態(tài)也逐步趨于成熟。所以，基于 UniAPP 開(kāi)發(fā)多端項(xiàng)目，已經(jīng)是很多中小型企業(yè)常用的技術(shù)解決方案。

那么，今天呢，我們就從 UniAPP 基礎(chǔ)開(kāi)始，對(duì)照企業(yè)級(jí)實(shí)踐標(biāo)準(zhǔn)，從零到一，一步一步打造一個(gè) 多端（微信小程序 + H5 + 安卓 APP + IOS APP）的社區(qū)論壇類(lèi)項(xiàng)目。

二、學(xué)前須知

學(xué)前須知：

1. 掌握 HTML、CSS、JS基礎(chǔ)，能夠構(gòu)建靜態(tài)頁(yè)面
2. 掌握 Vue 基礎(chǔ)，能夠使用腳手架構(gòu)建應(yīng)用
3. 掌握微信小程序基礎(chǔ)，對(duì)微信小程序組件、API服務(wù)有一定的了解

三、課程大綱

課程簡(jiǎn)介：

1. 課程大綱介紹
2. 實(shí)戰(zhàn)項(xiàng)目介紹

UniAPP 快速入門(mén)學(xué)習(xí)

一、UniAPP 介紹

（1）什么是 UniAPP ？

uni-app 是一個(gè)使用 Vue.js 開(kāi)發(fā)所有前端應(yīng)用的框架，開(kāi)發(fā)者編寫(xiě)一套代碼，可發(fā)布到 iOS、Android、H5，以及各種小程序（微信/支付寶/百度/頭條/ QQ /釘釘）等多個(gè)平臺(tái)，方便開(kāi)發(fā)者快速交付，不需要轉(zhuǎn)換開(kāi)發(fā)思維，不需要更改開(kāi)發(fā)習(xí)慣。

（2）為什么要選擇 UniAPP ？

1. 開(kāi)發(fā)者/案例數(shù)量更多

幾十萬(wàn)應(yīng)用、uni 統(tǒng)計(jì)月活12億、70+ 微信 / QQ群

2. 平臺(tái)能力不受限

在跨端的同時(shí)，通過(guò)條件編譯 + 平臺(tái)特有 API 調(diào)用，可以?xún)?yōu)雅的為某平臺(tái)寫(xiě)個(gè)性化代碼，調(diào)用專(zhuān)有能力而不影響其他平臺(tái)

3. 性能體驗(yàn)優(yōu)秀

加載新頁(yè)面速度更快、自動(dòng) diff 更新數(shù)據(jù)，App 端支持原生渲染支撐更流暢的用戶(hù)體驗(yàn)，小程序端的性能優(yōu)于市場(chǎng)其他框架

4. 周邊生態(tài)豐富

插件市場(chǎng)數(shù)千款插件，支持 NPM、支持小程序組件和SDK，微信生態(tài)的各種 sdk 可直接用于跨平臺(tái) APP

5. 學(xué)習(xí)成本低

基于通用的前端技術(shù)棧，采用 vue 語(yǔ)法+微信小程序 api，無(wú)額外學(xué)習(xí)成本

（3）UniAPP 功能框架

（4）UniAPP 開(kāi)發(fā)環(huán)境搭建

1. 下載開(kāi)發(fā)工具 HBuilderX

HBuilderX 是通用的前端開(kāi)發(fā)工具，但為uni-app做了特別強(qiáng)化。

下載 App 開(kāi)發(fā)版，可開(kāi)箱即用；如下載標(biāo)準(zhǔn)版，在運(yùn)行或發(fā)行uni-app時(shí)，會(huì)提示安裝uni-app插件，插件下載完成后方可使用

2. 創(chuàng)建 uni-app 項(xiàng)目

選擇uni-app類(lèi)型，輸入工程名，選擇模板，點(diǎn)擊創(chuàng)建，即可成功創(chuàng)建。

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

還有一個(gè)重要模板是 uni ui項(xiàng)目模板，日常開(kāi)發(fā)推薦使用該模板，已內(nèi)置大量常用組件。

3. 運(yùn)行 uni-app

主要包括：瀏覽器運(yùn)行、真機(jī)運(yùn)行、小程序運(yùn)行等

4. 發(fā)布 uni-app

主要包括：云端原生 APP 、離線(xiàn)原生 APP、H5、各種小程序

二、UniAPP 初始化相關(guān)配置

（1）工程目錄結(jié)構(gòu)

┌─components            uni-app組件目錄
│  └─comp-a.vue        可復(fù)用的a組件
├─hybrid                存放本地網(wǎng)頁(yè)的目錄（自建）
├─platforms             存放各平臺(tái)專(zhuān)用頁(yè)面的目錄（自建）
├─pages                 業(yè)務(wù)頁(yè)面文件存放的目錄
│  ├─index
│  │  └─index.vue      index頁(yè)面
│  └─list
│     └─list.vue        list頁(yè)面
├─static                存放應(yīng)用引用靜態(tài)資源（如圖片、視頻等）的目錄，注意：靜態(tài)資源只能存放于此
├─wxcomponents          存放小程序組件的目錄（自建）
├─common                公共資源（自建）
├─api                   請(qǐng)求封裝（自建）
├─store                 狀態(tài)管理（自建）
├─main.js               Vue初始化入口文件
├─App.vue               應(yīng)用配置，用來(lái)配置App全局樣式以及監(jiān)聽(tīng) 應(yīng)用生命周期
├─manifest.json         配置應(yīng)用名稱(chēng)、appid、logo、版本等打包信息
└─pages.json            配置頁(yè)面路由、導(dǎo)航條、選項(xiàng)卡等頁(yè)面類(lèi)信息

登錄后復(fù)制

提示

• static下目錄的 js 文件不會(huì)被 webpack 編譯，里面如果有 es6 的代碼，不經(jīng)過(guò)轉(zhuǎn)換直接運(yùn)行，在手機(jī)設(shè)備上會(huì)報(bào)錯(cuò)。
• 所以less、scss等資源同樣不要放在 static目錄下，建議這些公共的資源放在common目錄下

（2）應(yīng)用配置 manifest.json

manifest.json 文件是應(yīng)用的配置文件，用于指定應(yīng)用的名稱(chēng)、圖標(biāo)、權(quán)限等，我們也可以在這里為 Vue 為H5 設(shè)置跨域攔截處理器

（3）編譯配置 vue.config.js

vue.config.js 是一個(gè)可選的配置文件，如果項(xiàng)目的根目錄中存在這個(gè)文件，那么它會(huì)被自動(dòng)加載，一般用于配置 webpack 等編譯選項(xiàng)。官方文檔

（4）全局配置 page.json

pages.json 文件用來(lái)對(duì) uni-app 進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口樣式、原生的導(dǎo)航欄、底部的原生tabbar 等。它類(lèi)似微信小程序中app.json的頁(yè)面管理部分。

官方文檔

（5）全局樣式 uni.scss

uni.scss文件的用途是為了方便整體控制應(yīng)用的風(fēng)格。比如按鈕顏色、邊框風(fēng)格，uni.scss文件里預(yù)置了一批scss變量預(yù)置。官方文檔

uni-app 官方擴(kuò)展插件（uni ui）及 插件市場(chǎng) 上很多三方插件均使用了這些樣式變量，如果你是插件開(kāi)發(fā)者，建議你使用 scss 預(yù)處理，并在插件代碼中直接使用這些變量（無(wú)需 import 這個(gè)文件），方便用戶(hù)通過(guò)搭積木的方式開(kāi)發(fā)整體風(fēng)格一致的App。

uni.scss是一個(gè)特殊文件，在代碼中無(wú)需 import 這個(gè)文件即可在scss代碼中使用這里的樣式變量。uni-app的編譯器在webpack配置中特殊處理了這個(gè) uni.scss，使得每個(gè) scss 文件都被注入這個(gè)uni.scss，達(dá)到全局可用的效果。如果開(kāi)發(fā)者想要less、stylus的全局使用，需要在vue.config.js中自行配置webpack策略。

（6）主組件 App.vue

App.vue是uni-app的主組件，所有頁(yè)面都是在App.vue下進(jìn)行切換的，是頁(yè)面入口文件。但App.vue本身不是頁(yè)面，這里不能編寫(xiě)視圖元素。

這個(gè)文件的作用包括：調(diào)用應(yīng)用生命周期函數(shù)、配置全局樣式、配置全局的存儲(chǔ)globalData

應(yīng)用生命周期僅可在App.vue中監(jiān)聽(tīng)，在頁(yè)面監(jiān)聽(tīng)無(wú)效。

（7）入口文件 main.js

main.js是uni-app的入口文件，主要作用是初始化vue實(shí)例、定義全局組件、使用需要的插件如vuex。

官方文檔

（8）UniAPP 開(kāi)發(fā)規(guī)范及資源路徑

1. 開(kāi)發(fā)規(guī)范約定

• 頁(yè)面文件向?qū)?Vue單文件組件（SFC）規(guī)范
• 組件標(biāo)簽靠近小程序規(guī)范，詳見(jiàn) uni-app 組件規(guī)范
• 互連能力（JS API）靠近微信小程序規(guī)范，但需要將替換替換 wx 為 uni ，詳見(jiàn)uni-app接口規(guī)范
• 數(shù)據(jù)綁定及事件處理同 Vue.js 規(guī)范，同時(shí)補(bǔ)充了 App 和頁(yè)面的生命周期
• 為兼容多端運(yùn)行，建議使用 flex 布局進(jìn)行開(kāi)發(fā)

2. 資源路徑說(shuō)明

template 內(nèi)約會(huì)靜態(tài)資源，如 image，video 等標(biāo)簽的 src 屬性時(shí)，可以使用相對(duì)路徑或絕對(duì)路徑，形式如下：

<!-- 絕對(duì)路徑，/static指根目錄下的static目錄，在cli項(xiàng)目中/static指src目錄下的static目錄 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相對(duì)路徑 -->
<image class="logo" src="../../static/logo.png"></image>

登錄后復(fù)制

注意

• @ 初始的絕對(duì)路徑以及相對(duì)路徑會(huì)通過(guò) base64 轉(zhuǎn)換規(guī)則校驗(yàn)
• 約會(huì)的靜態(tài)資源在非 h5 平臺(tái)，均不轉(zhuǎn)為 base64
• H5平臺(tái)，小于4kb的資源會(huì)被轉(zhuǎn)換成base64，其余不轉(zhuǎn)

js 文件或 script 標(biāo)簽內(nèi)，可以使用相對(duì)路徑和絕對(duì)路徑，形式如下：

// 絕對(duì)路徑，@指向項(xiàng)目根目錄，在cli項(xiàng)目中@指向src目錄
import add from '@/common/add.js'
// 相對(duì)路徑
import add from '../../common/add.js'

登錄后復(fù)制

css 文件或 style 標(biāo)簽內(nèi)，可以使用相對(duì)路徑和絕對(duì)路徑，形式如下：

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

登錄后復(fù)制

css 文件或 style 標(biāo)簽內(nèi)引用的圖片路徑，可以使用相對(duì)路徑也可以使用絕對(duì)路徑，形式如下：

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

登錄后復(fù)制

三、UniAPP 生命周期

學(xué)習(xí)一個(gè)工具的目的核心是什么？是為了解決核心業(yè)務(wù)邏輯問(wèn)題，業(yè)務(wù)邏輯很多時(shí)候簡(jiǎn)單的解釋一句話(huà)：“在合適的時(shí)機(jī)干合適的事情”，OK！什么是合適的時(shí)機(jī)呢？簡(jiǎn)單的說(shuō)，頁(yè)面運(yùn)行過(guò)程中，各個(gè)階段的回調(diào)函數(shù)就是頁(yè)面中的時(shí)機(jī)，我們也叫這個(gè)為“生命周期鉤子函數(shù)”，當(dāng)然，業(yè)務(wù)中我們也會(huì)寫(xiě)到很多「回調(diào)」的邏輯，這些回調(diào)其實(shí)也是咱們自定義的時(shí)機(jī)，UniAPP 的生命周期鉤子函數(shù)回調(diào)函數(shù)有哪些呢？我們來(lái)理解一下！

uni-app 完整支持 Vue 實(shí)例的生命周期，同時(shí)還新增 應(yīng)用生命周期 及 頁(yè)面生命周期。

（1）應(yīng)用生命周期

（2）頁(yè)面生命周期

四、UniAPP 路由配置及頁(yè)面跳轉(zhuǎn)

（1）路由配置

uni-app 頁(yè)面路由全部交給框架統(tǒng)一管理，開(kāi)發(fā)者需要在pages.json里配置每個(gè)路由頁(yè)面的路徑及頁(yè)面樣式（類(lèi)似小程序在 app.json 中配置頁(yè)面路由）。

"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
			}
		}]

登錄后復(fù)制

（2）路由跳轉(zhuǎn)

uni-app 有兩種頁(yè)面路由跳轉(zhuǎn)方式：使用navigator組件跳轉(zhuǎn)（標(biāo)簽式導(dǎo)航）、調(diào)用API跳轉(zhuǎn)（編程式導(dǎo)航）

框架以棧的形式管理當(dāng)前所有頁(yè)面， 當(dāng)發(fā)生路由切換的時(shí)候，頁(yè)面棧的表現(xiàn)如下：

（3）獲取當(dāng)前頁(yè)面棧

getCurrentPages() 函數(shù)用于獲取當(dāng)前頁(yè)面棧的實(shí)例，以數(shù)組形式按棧的順序給出，第一個(gè)元素為首頁(yè)，最后一個(gè)元素為當(dāng)前頁(yè)面。

注意： getCurrentPages() 僅用于展示頁(yè)面棧的情況，請(qǐng)勿修改頁(yè)面棧，以免造成頁(yè)面狀態(tài)錯(cuò)誤。

（4）路由傳參與接收

說(shuō)明：頁(yè)面生命周期的 onLoad(）監(jiān)聽(tīng)頁(yè)面加載，其參數(shù)為上個(gè)頁(yè)面?zhèn)鬟f的數(shù)據(jù)，如：

//頁(yè)面跳轉(zhuǎn)并傳遞參數(shù)uni.navigateTo({
    url: 'page2?name=liy&message=Hello'});

登錄后復(fù)制

url為將要跳轉(zhuǎn)的頁(yè)面路徑 ，路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔。如 ‘path?key1=value2&key2=value2’，path為下一個(gè)頁(yè)面的路徑，下一個(gè)頁(yè)面的onLoad函數(shù)可得到傳遞的參數(shù)。

// 頁(yè)面 2 接收參數(shù)
onLoad: function (option) { //option為object類(lèi)型，會(huì)序列化上個(gè)頁(yè)面?zhèn)鬟f的參數(shù)
	console.log(option.name); //打印出上個(gè)頁(yè)面?zhèn)鬟f的參數(shù)。
	console.log(option.message); //打印出上個(gè)頁(yè)面?zhèn)鬟f的參數(shù)。
}

登錄后復(fù)制

注意：url 有長(zhǎng)度限制，太長(zhǎng)的字符串會(huì)傳遞失敗，并且不規(guī)范的字符格式也可能導(dǎo)致傳遞失敗，所以對(duì)于復(fù)雜參數(shù)建議使用 encodeURI、decodeURI 進(jìn)行處理后傳遞

（5）小程序路由分包配置

因小程序有體積和資源加載限制，各家小程序平臺(tái)提供了分包方式，優(yōu)化小程序的下載和啟動(dòng)速度。

所謂的主包，即放置默認(rèn)啟動(dòng)頁(yè)面及 TabBar 頁(yè)面，而分包則是根據(jù) pages.json 的配置進(jìn)行劃分。

在小程序啟動(dòng)時(shí)，默認(rèn)會(huì)下載主包并啟動(dòng)主包內(nèi)頁(yè)面，當(dāng)用戶(hù)進(jìn)入分包內(nèi)某個(gè)頁(yè)面時(shí)，會(huì)把對(duì)應(yīng)分包自動(dòng)下載下來(lái)，下載完成后再進(jìn)行展示，此時(shí)終端界面會(huì)有等待提示。

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

登錄后復(fù)制

五、UniAPP 常用組件簡(jiǎn)介

uni-app 為開(kāi)發(fā)者提供了一系列基礎(chǔ)組件，類(lèi)似 HTML 里的基礎(chǔ)標(biāo)簽元素，但 uni-app 的組件與 HTML 不同，而是與小程序相同，更適合手機(jī)端使用。

雖然不推薦使用 HTML 標(biāo)簽，但實(shí)際上如果開(kāi)發(fā)者寫(xiě)了p等標(biāo)簽，在編譯到非H5平臺(tái)時(shí)也會(huì)被編譯器轉(zhuǎn)換為 view 標(biāo)簽，類(lèi)似的還有 span 轉(zhuǎn) text、a 轉(zhuǎn)navigator等，包括 css 里的元素選擇器也會(huì)轉(zhuǎn)，但為了管理方便、策略統(tǒng)一，新寫(xiě)代碼時(shí)仍然建議使用view等組件。

開(kāi)發(fā)者可以通過(guò)組合這些基礎(chǔ)組件進(jìn)行快速開(kāi)發(fā)， 基于內(nèi)置的基礎(chǔ)組件，可以開(kāi)發(fā)各種擴(kuò)展組件，組件規(guī)范與vue組件相同。

案例：知心姐姐布局實(shí)現(xiàn)

六、UniAPP 常用 API 簡(jiǎn)介

uni-app的 js 代碼，h5 端運(yùn)行于瀏覽器中，非 h5 端 Android 平臺(tái)運(yùn)行在 v8 引擎中，iOS 平臺(tái)運(yùn)行在 iOS 自帶的 jscore 引擎中。所以，uni-app的 jsAPI 由標(biāo)準(zhǔn) ECMAScript 的 js API 和 uni 擴(kuò)展 API 這兩部分組成。

ECMAScript 由 Ecma 國(guó)際管理，是基礎(chǔ) js 語(yǔ)法。瀏覽器基于標(biāo)準(zhǔn) js 擴(kuò)充了window、document 等 js API；Node.js 基于標(biāo)準(zhǔn) js 擴(kuò)充了 fs 等模塊；小程序也基于標(biāo)準(zhǔn) js 擴(kuò)展了各種 wx.xx、my.xx、swan.xx 的 API。

標(biāo)準(zhǔn) ecmascript 的 API 非常多，比如：console、settimeout等等。

非 H5 端，雖然不支持 window、document、navigator 等瀏覽器的 js API，但也支持標(biāo)準(zhǔn) ECMAScript。

開(kāi)發(fā)者不要把瀏覽器里的 js 等價(jià)于標(biāo)準(zhǔn) js。

所以 uni-app 的非 H5 端，一樣支持標(biāo)準(zhǔn) js，支持 if、for 等語(yǔ)法，支持字符串、數(shù)組、時(shí)間等變量及各種處理方法，僅僅是不支持瀏覽器專(zhuān)用對(duì)象。

案例：知心姐姐聊天功能

七、UniAPP 自定義組件與通信

（1）自定義組件概念

組件是 vue 技術(shù)中非常重要的部分，組件使得與ui相關(guān)的輪子可以方便的制造和共享，進(jìn)而使得vue使用者的開(kāi)發(fā)效率大幅提升，在項(xiàng)目的component目錄下存放組件，uni-app 只支持 vue 單文件組件（.vue 組件）

組件可以使用「全局注冊(cè)」和「頁(yè)面引入」兩種方式進(jìn)行使用，使用分為三步：

導(dǎo)入 import xxx from 'xxx'

注冊(cè) Vue.use('xx',xx) components:{ xxx }

使用 <xx />

（2）父子組件通信

1. 父組件通過(guò)自定義屬性向子組件傳遞數(shù)據(jù)

2. 子組件通過(guò) props 接收父組件傳遞的數(shù)據(jù)

1. 父組件通過(guò)自定義事件標(biāo)簽向子組件傳遞事件
2. 子組件通過(guò)觸發(fā)父組件定義事件方式修改父組件數(shù)據(jù)

（3）slot 數(shù)據(jù)分發(fā)與作用域插槽

1. 父組件通過(guò)調(diào)用子組件內(nèi)部嵌套 html 內(nèi)容作為slot分發(fā)給子組件
2. 子組件通過(guò)在 slot 標(biāo)簽上添加屬性，向父組件通信數(shù)據(jù)，作用域插槽

（4）全局事件定義及通信

1. 在整個(gè)應(yīng)用的任何地方均可以使用uni.$on創(chuàng)建一個(gè)全局事件
2. 在整個(gè)應(yīng)用的任何地方也均可以使用 uni.$emit 來(lái)觸發(fā)全局事件，實(shí)現(xiàn)多組件見(jiàn)的數(shù)據(jù)通信

八、UniAPP Vuex 狀態(tài)管理

1. 概念

Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

2. 應(yīng)用場(chǎng)景

Vue多個(gè)組件之間需要共享數(shù)據(jù)或狀態(tài)。

3. 關(guān)鍵規(guī)則

• State：存儲(chǔ)狀態(tài)數(shù)據(jù)
• Getter：從狀態(tài)數(shù)據(jù)派生數(shù)據(jù)，相當(dāng)于 State 的計(jì)算屬性
• Mutation：存儲(chǔ)用于同步更改狀態(tài)數(shù)據(jù)的方法，默認(rèn)傳入的參數(shù)為 state
• Action：存儲(chǔ)用于異步更改狀態(tài)數(shù)據(jù)，但不是直接更改，而是通過(guò)觸發(fā) Mutation 方法實(shí)現(xiàn)，默認(rèn)參數(shù)為context
• Module：Vuex 模塊化

4. 交互關(guān)系

5. 使用方式

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

登錄后復(fù)制

6. 體驗(yàn)案例：模擬用戶(hù)登陸邏輯實(shí)現(xiàn)

注意：配合使用 Storage 來(lái)實(shí)現(xiàn)刷新頁(yè)面后狀態(tài)持續(xù)保持的業(yè)務(wù)需求

九、運(yùn)行環(huán)境判斷與跨端兼容

（1）開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境

uni-app 可通過(guò) process.env.NODE_ENV 判斷當(dāng)前環(huán)境是開(kāi)發(fā)環(huán)境還是生產(chǎn)環(huán)境，一般用于連接測(cè)試服務(wù)器或生產(chǎn)服務(wù)器的動(dòng)態(tài)切換。

在HBuilderX 中，點(diǎn)擊「運(yùn)行」編譯出來(lái)的代碼是開(kāi)發(fā)環(huán)境，點(diǎn)擊「發(fā)行」編譯出來(lái)的代碼是生產(chǎn)環(huán)境

if(process.env.NODE_ENV === 'development'){
    console.log('開(kāi)發(fā)環(huán)境')}else{
    console.log('生產(chǎn)環(huán)境')}

登錄后復(fù)制

（2）判斷平臺(tái)

平臺(tái)判斷有2種場(chǎng)景，一種是在編譯期判斷，一種是在運(yùn)行期判斷。

編譯期判斷編譯期判斷，即條件編譯，不同平臺(tái)在編譯出包后已經(jīng)是不同的代碼，

// #ifdef H5
 alert("只有h5平臺(tái)才有alert方法")// #endif// 如上代碼只會(huì)編譯到H5的發(fā)行包里，其他平臺(tái)的包不會(huì)包含如上代碼。

登錄后復(fù)制

運(yùn)行期判斷 運(yùn)行期判斷是指代碼已經(jīng)打入包中，仍然需要在運(yùn)行期判斷平臺(tái)，此時(shí)可使用 uni.getSystemInfoSync().platform 判斷客戶(hù)端環(huán)境是 Android、iOS 還是小程序開(kāi)發(fā)工具

switch(uni.getSystemInfoSync().platform){
   case 'android':
      console.log('運(yùn)行Android上')
      break;
   case 'ios':
      console.log('運(yùn)行iOS上')
      break;
   default:
      console.log('運(yùn)行在開(kāi)發(fā)者工具上')
      break;}

登錄后復(fù)制

（3）跨端兼容

uni-app 已將常用的組件、JS API 封裝到框架中，開(kāi)發(fā)者按照 uni-app 規(guī)范開(kāi)發(fā)即可保證多平臺(tái)兼容，大部分業(yè)務(wù)均可直接滿(mǎn)足，但每個(gè)平臺(tái)有自己的一些特性，因此會(huì)存在一些無(wú)法跨平臺(tái)的情況。

• 大量寫(xiě) if else，會(huì)造成代碼執(zhí)行性能低下和管理混亂。
• 編譯到不同的工程后二次修改，會(huì)讓后續(xù)升級(jí)變的很麻煩。

在 C 語(yǔ)言中，通過(guò) #ifdef、#ifndef 的方式，為 windows、mac 等不同 os 編譯不同的代碼。 uni-app 參考這個(gè)思路，為 uni-app 提供了條件編譯手段，在一個(gè)工程里優(yōu)雅的完成了平臺(tái)個(gè)性化實(shí)現(xiàn)。

條件編譯是用特殊的注釋作為標(biāo)記，在編譯時(shí)根據(jù)這些特殊的注釋?zhuān)瑢⒆⑨尷锩娴拇a編譯到不同平臺(tái)。

**寫(xiě)法：**以 #ifdef 或 #ifndef 加 %PLATFORM% 開(kāi)頭，以 #endif 結(jié)尾。

• \#ifdef：if defined 僅在某平臺(tái)存在
• \#ifndef：if not defined 除了某平臺(tái)均存在
• %PLATFORM%：平臺(tái)名稱(chēng)

%PLATFORM% 可取值如下：

推薦：《uniapp教程》

以上就是你必須了解的UniAPP入門(mén)知識(shí)整理的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注風(fēng)君子博客其它相關(guān)文章！

總結(jié)

以上是生活随笔為你收集整理的你必须了解的UniAPP入门知识整理(计算机系统基础知识)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。