官方文件

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

示例，如下公眾號關注元件僅會在微信小程式中出現：

<view>
    <view>微信公眾號關注元件</view>
    <view>
        <!-- uni-app未封裝，但可直接使用微信原生的official-account元件-->
        <!-- #ifdef MP-WEIXIN -->
                <official-account></official-account>
            <!-- #endif -->
    </view>
</view>
 

樣式的條件編譯

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

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

正確寫法

錯誤寫法

pages.json 的條件編譯

下面的頁面，只有執行至 App 時才會編譯進去。

不同平臺下的特有功能，以及小程式平臺的分包，都可以通過 pages.json 的條件編譯來更好地實現。這樣，就不會在其它平臺產生多餘的資源，進而減小包體積。

json的條件編譯，如不同平臺的key名稱相同，cli專案下開發者自己安裝的校驗器會報錯，需自行關閉這些校驗器對json相同key的校驗規則。如果使用HBuilderX的校驗器，無需在意此問題，HBuilderX的語法校驗器為此優化過。

static 目錄的條件編譯

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

如以下目錄結構，a.png只有在微信小程式平臺才會編譯進去，b.png在所有平臺都會被編譯。

    
┌─static                
│  ├─mp-weixin
│  │  └─a.png     
│  └─b.png
├─main.js        
├─App.vue      
├─manifest.json 
└─pages.json     
    
 

整體目錄條件編譯

如果想把各平臺的頁面檔案更徹底的分開，也可以在uni-app專案根目錄建立platforms目錄，然後在下面進一步建立app-plus、mp-weixin等子目錄，存放不同平臺的檔案。

注意

• platforms目錄下只支援放置頁面檔案（即頁面vue檔案），如果需要對其他資源條件編譯建議使用static 目錄的條件編譯

HBuilderX 支援

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

程式碼塊支援

在 HBuilderX 中開發uni-app時，通過輸入ifdef可快速生成條件編譯的程式碼片段

語法高亮

在 HBuilderX 中對條件編譯的程式碼註釋部分提供了語法高亮，可分辨出寫法是否正確，使得程式碼更加清晰（獨立js檔案需在編輯器右下角切換javascript es6+編輯器，獨立css檔案暫不支援高亮，但不高亮不影響使用）

正確註釋和快速選中

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

點選ifdef或endif可快速選中條件編譯部分；點選左側的摺疊圖示，可摺疊條件編譯部分程式碼。

注意

• Android 和 iOS 平臺不支援通過條件編譯來區分，如果需要區分 Android、iOS 平臺，請通過呼叫 uni.getSystemInfo 來獲取平臺資訊。支援ifios、ifAndroid程式碼塊，可方便編寫判斷。
• 有些跨端工具可以提供js的條件編譯或多型，但這對於實際開發遠遠不夠。uni-app不止是處理js，任何程式碼都可以多端條件編譯，才能真正解決實際專案的跨端問題。另外所謂多型在實際開發中會造成大量冗餘程式碼，很不利於複用和維護。舉例，微信小程式主題色是綠色，而百度支付寶小程式是藍色，你的應用想分平臺適配顏色，只有條件編譯是程式碼量最低、最容易維護的。
• 有些公司的產品運營總是給不同平臺提不同需求，但這不是拒絕uni-app的理由。關鍵在於專案裡，複用的程式碼多還是個性的程式碼多，正常都是複用的程式碼多，所以仍然應該多端。而個性的程式碼放到不同平臺的目錄下，差異化維護。

<template>
    <view>
        <button type="primary" @click="upload">上傳圖片</button>
        <image v-for="item in img_arr" :src="item" @click="preview(item)"></image>
        <!-- #ifdef H5 -->
        <view>旨在h5</view>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <view>旨在小程式</view>
        <!-- #endif -->
    </view>
</template>