uni-app開發中的#ifdef MP是什麼意思？條件編譯

時間 2020-06-09

標籤 uni app 開發 ifdef 什麼意思條件編譯简体版

原文原文鏈接

跨端兼容
https://uniapp.dcloud.io/platformcss

uni-app 已將經常使用的組件、JS API 封裝到框架中，開發者按照 uni-app 規範開發便可保證多平臺兼容，大部分業務都可直接知足。前端

但每一個平臺有本身的一些特性，所以會存在一些沒法跨平臺的狀況。vue

大量寫 if else，會形成代碼執行性能低下和管理混亂。
編譯到不一樣的工程後二次修改，會讓後續升級變的很麻煩。
在 C 語言中，經過 #ifdef、#ifndef的方式，爲 windows、mac 等不一樣 os 編譯不一樣的代碼。 uni-app 參考這個思路，爲 uni-app 提供了條件編譯手段，在一個工程裏優雅的完成了平臺個性化實現。ios

條件編譯
條件編譯是用特殊的註釋做爲標記，在編譯時根據這些特殊的註釋，將註釋裏面的代碼編譯到不一樣平臺。web

寫法：以 #ifdef 或 #ifndef 加 %PLATFORM% 開頭，以 #endif 結尾。

#ifdef：if defined 僅在某平臺存在
#ifndef：if not defined 除了某平臺均存在
%PLATFORM%：平臺名稱

#ifdef APP-PLUS
需條件編譯的代碼
#endif
僅出如今 App 平臺下的代碼
#ifndef H5
需條件編譯的代碼
#endif
除了 H5 平臺，其它平臺均存在的代碼
#ifdef H5 || MP-WEIXIN
需條件編譯的代碼
#endif

APP-PLUS App HTML5+ 規範
APP-PLUS-NVUE App nvue Weex 規範
H5 H5
MP-WEIXIN 微信小程序微信小程序
MP-ALIPAY 支付寶小程序支付寶小程序
MP-BAIDU 百度小程序百度小程序
MP-TOUTIAO 頭條小程序頭條小程序
MP-QQ QQ小程序（目前僅cli版支持）
MP 微信小程序/支付寶小程序/百度小程序/頭條小程序/QQ小程序算法

支持的文件json

.vue
.js
.css
pages.json
各預編譯語言文件，如：.scss、.less、.stylus、.ts、.pug小程序

注意： 條件編譯是利用註釋實現的，在不一樣語法裏註釋寫法不同，js使用 // 註釋、css 使用 /* 註釋 */、vue/nvue 模板裏使用 <!-- 註釋 -->；

API 的條件編譯windows

// #ifdef  %PLATFORM%

平臺特有的API實現微信小程序

// #endif

示例，以下代碼僅在 App 下出現:

示例，以下代碼不會在 H5 平臺上出現：

除了支持單個平臺的條件編譯外，還支持多平臺同時編譯，使用 || 來分隔平臺名稱。

示例，以下代碼會在 App 和 H5 平臺上出現：

組件的條件編譯

<!--  #ifdef  %PLATFORM% -->
平臺特有的組件
<!--  #endif -->

示例，以下廣告組件僅會在微信小程序中出現：

樣式的條件編譯

/*  #ifdef  %PLATFORM%  */
平臺特有樣式
/*  #endif  */

注意：樣式的條件編譯，不管是 css 仍是 sass/scss/less/stylus 等預編譯語言中，必須使用 /註釋/ 的寫法。

pages.json 的條件編譯
下面的頁面，只有運行至 App 時纔會編譯進去。

static 目錄的條件編譯
在不一樣平臺，引用的靜態資源可能也存在差別，經過 static 的的條件編譯能夠解決此問題，static 目錄下新建不一樣平臺的專有目錄（目錄名稱同 %PLATFORM% 值域,但字母均爲小寫），專有目錄下的靜態資源只有在特定平臺纔會編譯進去。

如如下目錄結構，a.png 只有在微信小程序平臺纔會編譯進去，b.png 在全部平臺都會被編譯。

總體目錄條件編譯
若是想把各平臺的頁面文件更完全的分開，也能夠在uni-app項目根目錄建立platforms目錄，而後在下面進一步建立APP-PLUS、MP-WEIXIN等子目錄，存放不一樣平臺的文件。

HBuilderX 支持
HBuilderX 爲 uni-app 的條件編譯提供了豐富的支持:

代碼塊支持

在 HBuilderX 中開發 uni-app 時，經過輸入 ifdef 可快速生成條件編譯的代碼片斷正確註釋和快速選中

在 HBuilderX 中，ctrl+alt+/ 便可生成正確註釋（js：// 註釋、css：/* 註釋 */、vue/nvue模板： ）。

正確註釋和快速選中

在 HBuilderX 中，ctrl+alt+/ 便可生成正確註釋（js：// 註釋、css：/* 註釋 */、vue/nvue模板： ）。

注意
Android 和 iOS 平臺不支持經過條件編譯來區分，若是須要區分 Android、iOS 平臺，請經過調用 uni.getSystemInfo 來獲取平臺信息。在HBuilderX1.9.10起，支持ifios、ifAndroid代碼塊，可方便編寫判斷。

有些跨端工具能夠提供js的條件編譯或多態，但這對於實際開發遠遠不夠。uni-app不止是處理js，任何代碼均可以多端條件編譯，才能真正解決實際項目的跨端問題。另外所謂多態在實際開發中會形成大量冗餘代碼，很不利於複用和維護。舉例，微信小程序主題色是綠色，而百度支付寶小程序是藍色，你的應用想分平臺適配顏色，只有條件編譯是代碼量最低、最容易維護的。

有些公司的產品運營老是給不一樣平臺提不一樣需求，但這不是拒絕uni-app的理由。關鍵在於項目裏，複用的代碼多仍是個性的代碼多，正常都是複用的代碼多，因此仍然應該多端。而個性的代碼放到不一樣平臺的目錄下，差別化維護。