一、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)用苟耻，可以優(yōu)雅的為某平臺(tái)寫(xiě)個(gè)性化代碼篇恒，調(diào)用專有能力而不影響其他平臺(tái)

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

加載新頁(yè)面速度更快、自動(dòng) diff 更新數(shù)據(jù)凶杖，App 端支持原生渲染支撐更流暢的用戶體驗(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-eeee4f-1659686671880)]

（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類型，輸入工程名抹恳，選擇模板员凝，點(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)專用頁(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)用名稱、appid埠巨、logo历谍、版本等打包信息
└─pages.json            配置頁(yè)面路由、導(dǎo)航條辣垒、選項(xiàng)卡等頁(yè)面類信息
    

提示

• 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)用的名稱、圖標(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 等运褪。它類似微信小程序中app.json的頁(yè)面管理部分。

官方文檔

屬性	類型	必填	描述
globalStyle	Object	否	設(shè)置默認(rèn)頁(yè)面的窗口表現(xiàn)
pages	Object Array	是	設(shè)置頁(yè)面路徑及窗口表現(xiàn)
easycom	Object	否	組件自動(dòng)引入規(guī)則
tabBar	Object	否	設(shè)置底部 tab 的表現(xiàn)
condition	Object	否	啟動(dòng)模式配置
subPackages	Object Array	否	分包加載配置
preloadRule	Object	否	分包預(yù)下載規(guī)則

（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è)文件）劣欢，方便用戶通過(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è)面樣式（類似小程序在 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類型脑又，會(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)用戶進(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ǔ)組件薯演，類似 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)簽，類似的還有 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í)間等變量及各種處理方法穗慕，僅僅是不支持瀏覽器專用對(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è)專為 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-b3239f-1659686671882)]

5. 使用方式

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

6. 體驗(yàn)案例：模擬用戶登陸邏輯實(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 判斷客戶端環(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ù)均可直接滿足锦庸，但每個(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ù)這些特殊的注釋基括，將注釋里面的代碼編譯到不同平臺(tái)。

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

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

%PLATFORM% 可取值如下：