跨端兼容https://uniapp.dcloud.io/platform
uni-app 已將常用的組件、JS API 封裝到框架中，開發者按照 uni-app 規范開發即可保證多平台兼容，大部分業務均可直接滿足。
但每個平台有自己的一些特性，因此會存在一些無法跨平台的情況。
大量寫 if else，會造成代碼執行性能低下和管理混亂。編譯到不同的工程后二次修改，會讓后續升級變的很麻煩。在 C 語言中，通過 #ifdef、#ifndef的方式，為 windows、mac 等不同 os 編譯不同的代碼。 uni-app 參考這個思路，為 uni-app 提供了條件編譯手段，在一個工程里優雅的完成了平台個性化實現。
條件編譯條件編譯是用特殊的注釋作為標記，在編譯時根據這些特殊的注釋，將注釋里面的代碼編譯到不同平台。
寫法：以 #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
需條件編譯的代碼
#endifAPP-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小程序
支持的文件
.vue.js.csspages.json各預編譯語言文件，如：.scss、.less、.stylus、.ts、.pug
注意： 條件編譯是利用注釋實現的，在不同語法里注釋寫法不一樣，js使用 // 注釋、css 使用 /* 注釋 */、vue/nvue 模板里使用 <!-- 注釋 -->；API 的條件編譯
// #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的理由。關鍵在於項目里，復用的代碼多還是個性的代碼多，正常都是復用的代碼多，所以仍然應該多端。而個性的代碼放到不同平台的目錄下，差異化維護。
❤️ 不要忘記留下你學習的腳印 [點贊 收藏 評論]
作者Info：
【作者】：Jeskson
【原創公眾號】：達達前端
【福利】：公眾號回復 “資料” 送自學資料大禮包（進群分享，想要啥就說哈，看我有沒有）！
【轉載說明】：轉載請說明出處，謝謝合作！~
大前端開發，定位前端開發技術棧博客，PHP后台知識點，web全棧技術領域，數據結構與算法、網絡原理等通俗易懂的呈現給小伙伴。謝謝支持，承蒙厚愛！！！
若本號內容有做得不到位的地方（比如：涉及版權或其他問題），請及時聯系我們進行整改即可，會在第一時間進行處理。
請點贊！因為你們的贊同/鼓勵是我寫作的最大動力！
歡迎關注達達的CSDN！
這是一個有質量，有態度的博客
