uni-app-條件注釋

官方文檔

 

<!-- #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 -->
        <button @click="send">顯示</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                img_arr: []
            }
        },
        methods: {
            upload() {
                // let this_ = this
                uni.chooseImage({
                    success: res => {
                        this.img_arr = res.tempFilePaths
                        console.log(this.img_arr)
                    }
                })
            },
            preview(current){
                uni.previewImage({
                    current,
                    urls:this.img_arr,
                    indicator:'number',
                    loop:true,
                    success() {
                        console.log("成功")
                    }
                })
            },
            send(){
                // #ifdef H5
                console.log("h5打印")
                // #endif
                // #ifdef MP-WEIXIN
                console.log("微信小程序")
                // #endif
            }
        }
    }
</script>

<style>

/* #ifdef H5 */
view{
color: red;
}
/* #endif */
/* #ifdef MP-WEIXIN */
view{
color: blue;
}
/* #endif */

</style>