基于 UniAPP 從入門(mén)到社區(qū)項(xiàng)目實(shí)戰(zhàn)

課程背景：

咱們作為前端開(kāi)發(fā)人員膳殷，單純的Web 端開(kāi)發(fā)已經(jīng)慢慢無(wú)法滿(mǎn)足我們的業(yè)務(wù)需求了操骡，微信小程序、安卓 APP赚窃、IOS APP，甚至是 Windows 桌面端開(kāi)發(fā)都成了我們需要掌握的技能岔激。所以呢勒极，市面上各種「跨平臺(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é)前須知：

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 功能框架

[圖片上傳失敗...(image-e5737b-1646726387347)]

（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 、離線原生 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)信息
    

提示

• 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>

注意

• @ 初始的絕對(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'

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');

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);

三蟆沫、UniAPP 生命周期

學(xué)習(xí)一個(gè)工具的目的核心是什么？是為了解決核心業(yè)務(wù)邏輯問(wèn)題温治，業(yè)務(wù)邏輯很多時(shí)候簡(jiǎn)單的解釋一句話：“在合適的時(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
            }
        }
]

（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'
});

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ù)。
}

注意：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"]
        }
}

五凳鬓、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ě)了div等標(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)系

[圖片上傳失敗...(image-c44ca2-1646726387347)]

5. 使用方式

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

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)境')
}

（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ì)包含如上代碼娄琉。

運(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;
}

（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% 可取值如下：