uni-app跨平台-條件編譯#ifdef的寫法


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

寫法:以 #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
在 H5 平台或微信小程序平台存在的代碼(這里只有||,不可能出現&&,因為沒有交集)

%PLATFORM% 可取值如下:

平台
APP-PLUS App
APP-PLUS-NVUE或APP-NVUE App nvue
H5 H5
MP-WEIXIN 微信小程序
MP-ALIPAY 支付寶小程序
MP-BAIDU 百度小程序
MP-TOUTIAO 字節跳動小程序
MP-QQ QQ小程序
MP-360 360小程序
MP 微信小程序/支付寶小程序/百度小程序/字節跳動小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW 快應用通用(包含聯盟、華為)
QUICKAPP-WEBVIEW-UNION 快應用聯盟
QUICKAPP-WEBVIEW-HUAWEI 快應用華為

支持的文件

  • .vue
  • .js
  • .css
  • pages.json
  • 各預編譯語言文件,如:.scss、.less、.stylus、.ts、.pug

注意:

  • 條件編譯是利用注釋實現的,在不同語法里注釋寫法不一樣,js使用 // 注釋、css 使用 /* 注釋 */、vue/nvue 模板里使用 <!-- 注釋 -->
  • 條件編譯APP-PLUS包含APP-NVUE和APP-VUE,APP-PLUS-NVUE和APP-NVUE沒什么區別,為了簡寫后面出了APP-NVUE ;
  • 使用條件編譯請保證編譯前編譯后文件的正確性,比如json文件中不能有多余的逗號;

API 的條件編譯

// #ifdef  %PLATFORM%
平台特有的API實現
// #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 等預編譯語言中,必須使用 /*注釋*/ 的寫法。

 

參照網址:https://uniapp.dcloud.io/platform?id=%e8%b7%a8%e7%ab%af%e5%85%bc%e5%ae%b9

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM