條件編譯是用特殊的注釋作為標記,在編譯時根據這些特殊的注釋,將注釋里面的代碼編譯到不同平台。
寫法:以 #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
