網(wǎng)站建設(shè)app平臺(tái)關(guān)鍵詞排名優(yōu)化
一. 前言
在使用 uni-app 進(jìn)行跨平臺(tái)開(kāi)發(fā)的過(guò)程中,經(jīng)常會(huì)遇到需要針對(duì)不同平臺(tái)或不同環(huán)境進(jìn)行條件編譯的情況。條件編譯是一種在編譯過(guò)程中根據(jù)指定條件選擇不同代碼路徑的技術(shù),可以幫助我們?cè)诓煌脚_(tái)或環(huán)境下編寫(xiě)不同的代碼,以適應(yīng)不同的平臺(tái)實(shí)現(xiàn)邏輯。
在 uni-app 中,可以說(shuō)條件編譯是 uni-app 實(shí)現(xiàn)多端部署的核心思想,通過(guò)條件編譯,我們可以根據(jù)當(dāng)前的平臺(tái)、環(huán)境或配置選項(xiàng)來(lái)控制代碼的執(zhí)行邏輯,從而實(shí)現(xiàn)定制化的開(kāi)發(fā)需求。
在我之前的開(kāi)發(fā)項(xiàng)目中,不止需要已有平臺(tái)的條件編譯,還涉及到自定義平臺(tái)條件編譯,以適應(yīng)項(xiàng)目中同一套代碼,多端部署的場(chǎng)景。
通過(guò)本篇文章,你將學(xué)習(xí)到以下知識(shí):
接下來(lái)我將詳細(xì)介紹 uni-app 中條件編譯的使用和自定義平臺(tái),幫助大家更好地利用條件編譯優(yōu)化自己的應(yīng)用開(kāi)發(fā)過(guò)程。
二. 什么是編譯器
uni-app 為什么能實(shí)現(xiàn)一套代碼、多端運(yùn)行,多端部署的功能?其最核心的功能是通過(guò) 編譯器 + 運(yùn)行時(shí) 實(shí)現(xiàn)的,我梳理了一下,如下圖整體流程圖所示:
好家伙,不看不知道,一看嚇一跳,一堆小程序平臺(tái)??
1. 編譯器和運(yùn)行時(shí)
編譯器:將 uni-app 統(tǒng)一代碼編譯生成每個(gè)平臺(tái)支持的特有代碼;如:在小程序平臺(tái),編譯器將 .vue
文件拆分生成 wxml
、wxss
、js
等代碼。
運(yùn)行時(shí):動(dòng)態(tài)處理數(shù)據(jù)綁定、事件代理,保證 Vue 和平臺(tái)宿主數(shù)據(jù)的一致性。
2. 編譯器的實(shí)現(xiàn)邏輯
uni-app 項(xiàng)目根據(jù)所依賴的 Vue 版本不同,編譯器的實(shí)現(xiàn)也不同,目前 uni-app 的代碼支持 Vue 2 和 Vue 3 兩種語(yǔ)言版本。
Vue 2 版本的 uni-app 編譯器基于 Wepback
實(shí)現(xiàn),而 Vue 3 版本的 uni-app 編譯器基于 Vite
實(shí)現(xiàn),編譯速度更快。
可以通過(guò) manifest.json
文件中切換 Vue 的使用版本,如下圖所示:
3. 注意事項(xiàng)
初始化 uni-app 項(xiàng)目有兩種方式,通過(guò) HBuilderX 創(chuàng)建和使用 cli 方式創(chuàng)建,下面來(lái)說(shuō)一下這兩種創(chuàng)建方式在編譯器方面的使用差異:
-
使用 cli 方式創(chuàng)建的項(xiàng)目,編譯器安裝在項(xiàng)目下,編譯器不會(huì)跟隨 HBuilderX 升級(jí)。如需升級(jí)編譯器,可以參考:更新依賴到指定版本。
-
使用 HBuilderX 創(chuàng)建的項(xiàng)目,編譯器在 HBuilderX 的安裝目錄下的
plugin
目錄,隨著 HBuilderX 的升級(jí)會(huì)自動(dòng)升級(jí)編譯器。
因此,為了避免出現(xiàn)一些更新問(wèn)題,建議使用 HBuilderX 直接創(chuàng)建項(xiàng)目,便于適時(shí)更新到最新版的編譯器,優(yōu)化一些 bug。
提示:經(jīng)常跟隨官方更新也會(huì)有問(wèn)題,有些舊版本的代碼在新版上有可能會(huì)不兼容!注意可能有坑!
三. 條件編譯
uni-app 已經(jīng)將常用的組件、API 封裝到框架中,我們可以按照 uni-app 規(guī)范開(kāi)發(fā)即可保證多平臺(tái)兼容,大部分業(yè)務(wù)均可直接滿足,但每個(gè)平臺(tái)有自己的一些特性,因此必然會(huì)存在一些無(wú)法跨平臺(tái)的情況。
詳細(xì)了解可參見(jiàn) uni-app 的相關(guān)文檔說(shuō)明:
-
uni-app 組件使用手冊(cè)
https://uniapp.dcloud.net.cn/component/
-
uni-app API 使用手冊(cè)
https://uniapp.dcloud.net.cn/api/
當(dāng)我們?cè)趯?xiě)代碼涉及到多平臺(tái)時(shí),由于每個(gè)平臺(tái)的實(shí)現(xiàn)代碼可能有所不同,因此如果是大量寫(xiě) if else
,會(huì)造成代碼執(zhí)行性能低下和管理混亂,編譯到不同的工程后二次修改,會(huì)讓后續(xù)升級(jí)變的很麻煩。
由以上這個(gè)背景, uni-app 參考在 C 語(yǔ)言中的一些實(shí)踐經(jīng)驗(yàn),為其提供了類似的條件編譯手段,通過(guò) #ifdef
、#ifndef
的方式,為小程序端、Web 端、App 端 等不同客戶端編譯不同的代碼,在一個(gè)工程里優(yōu)雅的完成了平臺(tái)個(gè)性化實(shí)現(xiàn)。
那么接下來(lái)我們看一下什么是條件編譯及其使用方法?
1. 什么是條件編譯
條件編譯其實(shí)是用特殊的注釋作為標(biāo)記,在編譯時(shí)根據(jù)這些特殊的注釋,將注釋里面的代碼編譯到不同平臺(tái)。
條件判斷規(guī)則
以 #ifdef
或 #ifndef
加 %PLATFORM%
開(kāi)頭,以 #endif
結(jié)尾。
完整的判斷方式為:
#ifdef??%PLATFORM%
此部分為實(shí)現(xiàn)對(duì)應(yīng)平臺(tái)的代碼
#endif
參數(shù)說(shuō)明:
#ifdef
:if defined 僅在某平臺(tái)存在 #ifndef
:if not defined 除了某平臺(tái)均存在 %PLATFORM%
:平臺(tái)名稱
2. 支持的平臺(tái)
目前 uni-app 條件編譯所支持的平臺(tái)大概有 24 個(gè),分別如下:
引擎+編譯器相關(guān)
值 | 生效條件 | 值 | 生效條件 |
---|---|---|---|
VUE3 | 用于區(qū)分 vue2 和 3 | VUE2 | 用于區(qū)分 vue2 和 3 |
UNI-APP-X | 用于區(qū)分是否是 uni-app x 項(xiàng)目 | uniVersion | 用于區(qū)分編譯器的版本 |
APP 相關(guān)
值 | 生效條件 | 值 | 生效條件 |
---|---|---|---|
APP | App | APP-PLUS | 編譯為 App 時(shí) |
APP-PLUS-NVUE 或 APP-NVUE | App nvue 頁(yè)面 | APP-ANDROID | App Android 平臺(tái) |
APP-IOS | App iOS 平臺(tái) |
Web 相關(guān)
值 | 生效條件 | 值 | 生效條件 |
---|---|---|---|
H5 | H5 | WEB | web |
小程序相關(guān)
值 | 生效條件 | 值 | 生效條件 |
---|---|---|---|
MP | 包括所有小程序 | MP-WEIXIN | 微信小程序 |
MP-ALIPAY | 支付寶小程序 | MP-BAIDU | 百度小程序 |
MP-TOUTIAO | 抖音小程序 | MP-LARK | 飛書(shū)小程序 |
MP-QQ | QQ 小程序 | MP-KUAISHOU | 快手小程序 |
MP-JD | 京東小程序 | MP-360 | 360 小程序 |
快應(yīng)用相關(guān)
值 | 生效條件 |
---|---|
QUICKAPP-WEBVIEW | 包括所有快應(yīng)用 |
QUICKAPP-WEBVIEW-UNION | 快應(yīng)用聯(lián)盟 |
QUICKAPP-WEBVIEW-HUAWEI | 快應(yīng)用華為 |
3. 支持的文件
我們主要可以在以下的文件中使用條件編譯,如下所示:
-
主文件:包括 .vue/.nvue/.uvue 文件
-
API 文件:包括 .js/.uts 文件
-
樣式文件:包括 css 文件和各預(yù)編譯語(yǔ)言文件,如:.scss、.less、.stylus、.ts、.pug 文件
-
配置文件:pages.json 文件
4. 注意事項(xiàng)
關(guān)于條件編譯,有以下幾個(gè)注意事項(xiàng)需要在編程的過(guò)程中重點(diǎn)關(guān)注一下:
-
條件編譯是利用注釋實(shí)現(xiàn)的,在不同語(yǔ)法里注釋寫(xiě)法不一樣,不要使用錯(cuò)誤的注釋編寫(xiě)代碼,可能會(huì)造成一些問(wèn)題,具體注釋形式如下所示:
-
在 js/uts 文件中, 使用
//
注釋 -
在 css 文件中, 使用
/* */
注釋 -
在 vue/nvue/uvue 模板里使用
<!-- 注釋 -->
四. 總結(jié)
條件編譯是 uni-app 實(shí)現(xiàn)一套代碼、多端運(yùn)行,多端部署的核心思想,uni-app 在條件編譯方面不止是處理 js,任何代碼都可以多端條件編譯,因此可以大大降低了在實(shí)際項(xiàng)目的多端開(kāi)發(fā)時(shí)的繁瑣問(wèn)題。
五. 資源文檔
-
uni-app 組件使用手冊(cè)
-
uni-app API 使用手冊(cè)
如果您感覺(jué)文章還不錯(cuò),關(guān)注一下再走吧!