條件編譯實現跨端兼容

1. 前言

想要實現一套代碼適配多個平臺，有一個很大的門檻就是實現各平臺功能的兼容。

雖然 uni-app 已經將跨平臺兼容處理的組件及 API 等進行了封裝，日常開發過程中，我們按照 uni-app 規范開發就可以保證大部分業務在各平臺兼容。

但是有時會因為某個平臺的開發特性，出現不兼容的情況。比如單平臺適配的樣式、第三方授權登錄或者支付功能。

uni-app 是一個難得的在跨端的過程中不犧牲各平臺特色的框架，出現開發差異的時候，可以使用條件編譯來做適配，實現在一個項目中調用不用平臺的特色功能。本小節我們來了解一下條件編譯的使用。

2. 什么是條件編譯

條件編譯是用特殊的注釋作為標記，在編譯時根據這些特殊的注釋，將注釋里面的代碼編譯到不同平臺。
寫法：以 #ifdef 或 #ifndef 加 %PLATFORM% 開頭，以 #endif 結尾。

實例：

// 表示代碼僅在 H5 平臺上面執行，其他平臺不執行
#ifdef H5
  需條件編譯的代碼
#endif

// 表示代碼在 H5 平臺上面不執行，其他平臺上面執行
#ifndef H5
  需條件編譯的代碼
#endif

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

這樣可能也比較抽象，下面我們用前面小節做的登錄彈窗給大家舉個實際項目的例子。

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

3.1 編輯代碼

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

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

Tips：條件編譯是注釋的狀態，不要寫錯哦~

3.2 測試效果

點擊工具欄–運行–運行到內置瀏覽器，內置瀏覽器是H5平臺，所以登錄彈窗會顯示。

點擊工具欄–運行–運行到小程序模擬器–微信開發者工具，因為我們用條件編譯設置了僅在H5平臺顯示登錄彈窗，所以登錄彈窗不會顯示。

運行到其他平臺也不會顯示登錄彈窗，大家可以自己測試一下。

3.3 其他條件編譯的用法

登錄彈窗在 H5 平臺上面不顯示，其他平臺上面顯示。
實例：

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

登錄彈窗在 H5 平臺和微信小程序平臺上面顯示，其他平臺上面不顯示。
實例：

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

條件編譯是用特殊的注釋作為標記，在編譯時根據這些特殊的注釋，將注釋里面的代碼編譯到不同平臺。

3.4 平臺標識

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

4. 樣式的條件編譯

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

4.1 編輯代碼

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

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

4.2 測試效果

點擊工具欄–運行–運行到內置瀏覽器，測試H5平臺。

點擊工具欄–運行–運行到小程序模擬器–微信開發者工具，測試微信小程序平臺。

5. API 的條件編譯

我們來演示一下如何在不同平臺顯示不同的信息。

5.1 編輯代碼

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

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

5.2 測試效果

點擊工具欄–運行–運行到內置瀏覽器，測試H5平臺。

點擊工具欄–運行–運行到小程序模擬器–微信開發者工具，測試微信小程序平臺。

6. 小結

uni-app 用條件編譯的方案，來處理不同平臺的特性或差異，優雅的完成了各個平臺個性化的實現。本節課程我們主要學習了 uni-app 神奇的條件編譯，是不是一學就會，非常簡單。本節課程的需要掌握的重點如下：

• 了解什么是條件編譯，并要注意每個平臺對應的值是什么，比如 App 平臺對應的值是 APP-PLUS，不要弄錯了；
• 掌握組件、樣式、API 的條件編譯，雖然注釋樣式不一樣，但是原理是一樣的，跟著我們課程敲寫下來，很容易掌握。