條件編譯實(shí)現(xiàn)跨端兼容

1. 前言

想要實(shí)現(xiàn)一套代碼適配多個(gè)平臺(tái)，有一個(gè)很大的門檻就是實(shí)現(xiàn)各平臺(tái)功能的兼容。

雖然 uni-app 已經(jīng)將跨平臺(tái)兼容處理的組件及 API 等進(jìn)行了封裝，日常開(kāi)發(fā)過(guò)程中，我們按照 uni-app 規(guī)范開(kāi)發(fā)就可以保證大部分業(yè)務(wù)在各平臺(tái)兼容。

但是有時(shí)會(huì)因?yàn)槟硞€(gè)平臺(tái)的開(kāi)發(fā)特性，出現(xiàn)不兼容的情況。比如單平臺(tái)適配的樣式、第三方授權(quán)登錄或者支付功能。

uni-app 是一個(gè)難得的在跨端的過(guò)程中不犧牲各平臺(tái)特色的框架，出現(xiàn)開(kāi)發(fā)差異的時(shí)候，可以使用條件編譯來(lái)做適配，實(shí)現(xiàn)在一個(gè)項(xiàng)目中調(diào)用不用平臺(tái)的特色功能。本小節(jié)我們來(lái)了解一下條件編譯的使用。

2. 什么是條件編譯

條件編譯是用特殊的注釋作為標(biāo)記，在編譯時(shí)根據(jù)這些特殊的注釋，將注釋里面的代碼編譯到不同平臺(tái)。
寫(xiě)法：以 #ifdef 或 #ifndef 加 %PLATFORM% 開(kāi)頭，以 #endif 結(jié)尾。

實(shí)例：

// 表示代碼僅在 H5 平臺(tái)上面執(zhí)行，其他平臺(tái)不執(zhí)行
#ifdef H5
  需條件編譯的代碼
#endif

// 表示代碼在 H5 平臺(tái)上面不執(zhí)行，其他平臺(tái)上面執(zhí)行
#ifndef H5
  需條件編譯的代碼
#endif

// 表示代碼在 H5 平臺(tái)和 App 平臺(tái)上面執(zhí)行，其他平臺(tái)上面不執(zhí)行
#ifndef H5 || APP-PLUS
  需條件編譯的代碼
#endif

這樣可能也比較抽象，下面我們用前面小節(jié)做的登錄彈窗給大家舉個(gè)實(shí)際項(xiàng)目的例子。

3.登錄彈窗組件條件編譯

3.1 編輯代碼

編輯 pages/index/index.vue 文件，在登錄彈窗組件的外面加上條件編譯，設(shè)置僅在H5平臺(tái)顯示登錄彈窗。
實(shí)例：

<!-- #ifdef H5 -->
<Login v-if="isShow" :text="text" @isShow="getShow"></Login>
<!-- #endif -->

Tips：條件編譯是注釋的狀態(tài)，不要寫(xiě)錯(cuò)哦~

3.2 測(cè)試效果

點(diǎn)擊工具欄–運(yùn)行–運(yùn)行到內(nèi)置瀏覽器，內(nèi)置瀏覽器是H5平臺(tái)，所以登錄彈窗會(huì)顯示。

點(diǎn)擊工具欄–運(yùn)行–運(yùn)行到小程序模擬器–微信開(kāi)發(fā)者工具，因?yàn)槲覀冇脳l件編譯設(shè)置了僅在H5平臺(tái)顯示登錄彈窗，所以登錄彈窗不會(huì)顯示。

運(yùn)行到其他平臺(tái)也不會(huì)顯示登錄彈窗，大家可以自己測(cè)試一下。

3.3 其他條件編譯的用法

登錄彈窗在 H5 平臺(tái)上面不顯示，其他平臺(tái)上面顯示。
實(shí)例：

<!-- #ifndef H5 -->
<Login v-if="isShow" :text="text" @isShow="getShow"></Login>
<!-- #endif -->

登錄彈窗在 H5 平臺(tái)和微信小程序平臺(tái)上面顯示，其他平臺(tái)上面不顯示。
實(shí)例：

<!-- #ifndef H5 || MP-WEIXIN -->
<Login v-if="isShow" :text="text" @isShow="getShow"></Login>
<!-- #endif -->

條件編譯是用特殊的注釋作為標(biāo)記，在編譯時(shí)根據(jù)這些特殊的注釋，將注釋里面的代碼編譯到不同平臺(tái)。

3.4 平臺(tái)標(biāo)識(shí)

也就是%PLATFORM% 可取值如下：

4. 樣式的條件編譯

接下來(lái)我們來(lái)看一下登錄按鈕樣式的條件編譯，在不同的平臺(tái)顯示不一樣的顏色。

4.1 編輯代碼

將 pages/index/index.vue 文件中，我們給 Login 組件上面加的條件編譯去掉。來(lái)編輯 components/login/login.vue 文件中的樣式部分。
實(shí)例：

/*H5平臺(tái)登錄按鈕顯示紅色，微信小程序登錄按鈕顯示藍(lán)色*/
button {
  /* #ifdef H5 */
  background:red;
  /*  #endif  */
  /* #ifdef MP-WEIXIN */
  background:blue;
  /*  #endif  */
}

4.2 測(cè)試效果

點(diǎn)擊工具欄–運(yùn)行–運(yùn)行到內(nèi)置瀏覽器，測(cè)試H5平臺(tái)。

點(diǎn)擊工具欄–運(yùn)行–運(yùn)行到小程序模擬器–微信開(kāi)發(fā)者工具，測(cè)試微信小程序平臺(tái)。

5. API 的條件編譯

我們來(lái)演示一下如何在不同平臺(tái)顯示不同的信息。

5.1 編輯代碼

編輯 pages/index/index.vue 文件，在 data 中編輯。
實(shí)例：

data() {
	return {
		// #ifdef H5
		text:"歡迎登錄H5平臺(tái)",
		// #endif
		// #ifdef MP-WEIXIN
		text:"歡迎登錄微信小程序",
		// #endif
		isShow:true
	};
},

5.2 測(cè)試效果

點(diǎn)擊工具欄–運(yùn)行–運(yùn)行到內(nèi)置瀏覽器，測(cè)試H5平臺(tái)。

點(diǎn)擊工具欄–運(yùn)行–運(yùn)行到小程序模擬器–微信開(kāi)發(fā)者工具，測(cè)試微信小程序平臺(tái)。

6. 小結(jié)

uni-app 用條件編譯的方案，來(lái)處理不同平臺(tái)的特性或差異，優(yōu)雅的完成了各個(gè)平臺(tái)個(gè)性化的實(shí)現(xiàn)。本節(jié)課程我們主要學(xué)習(xí)了 uni-app 神奇的條件編譯，是不是一學(xué)就會(huì)，非常簡(jiǎn)單。本節(jié)課程的需要掌握的重點(diǎn)如下：

• 了解什么是條件編譯，并要注意每個(gè)平臺(tái)對(duì)應(yīng)的值是什么，比如 App 平臺(tái)對(duì)應(yīng)的值是 APP-PLUS，不要弄錯(cuò)了；
• 掌握組件、樣式、API 的條件編譯，雖然注釋樣式不一樣，但是原理是一樣的，跟著我們課程敲寫(xiě)下來(lái)，很容易掌握。