uniapp条件编译

1.说明

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

配置不同端协议的时候经常用到。

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

1  #ifdef：if defined 仅在某平台存在
2  #ifndef：if not defined 除了某平台均存在
3  %PLATFORM%：平台名称

写法说明
#ifdef APP-PLUS
需条件编译的代码  
#endif		    仅出现在 App 平台下的代码

#ifndef H5 
需条件编译的代码       

#endif

除了 H5 平台，其它平台均存在的代码

#ifdef H5 || MP-WEIXIN              
需条件编译的代码     

#endif

在 H5 平台或微信小程序平台存在的代码

（这里只有||，不可能出现&&，因为没有交集）

2.常用值

值

平台

APP-PLUSAPP
APP-PLUS-NVUEAPP nvue
H5H5
MP-WEIXIN微信小程序
MP-ALIPAY支付宝小程序
MP-BAIDU百度小程序
MP-TOUTIAO字节跳动小程序
MP-QQQQ小程序
MP-360360小程序
MP

微信小程序/支付宝小程序/百度小程序/字节跳动小程序

/QQ小程序/360小程序

quickapp-webview快应用通用（联盟、华为）
quickapp-webview-union快应用联盟
quickapp-webview-huawei快应用华为

3.举例

1）CSS里面判断不同的端

APP：APP端
 
            /*#ifdef APP-PLUS*/
            top:0;
            /*#endif*/
 
H5：H5端
            /*#ifdef H5*/
            top:88rpx;
            /*#endif*/
 
MP：小程序
            /*#ifdef MP*/
            top:0;
            /*#endif*/

2）JS里面判断不同的端

APP：APP端
 
            /*#ifdef APP-PLUS*/
            console.log('APP端')
            /*#endif*/
 
H5：H5端
            /*#ifdef H5*/
            console.log('H5端')
            /*#endif*/
 
MP：小程序
            /*#ifdef MP*/
            console.log('微信小程序端')
            /*#endif*/

3）在页面上判断不同的端

APP：APP端
 
            <!-- #ifdef APP-PLUS -->
            <view> APP端 </view>
            <!-- #endif -->
 
H5：H5端
            <!-- #ifdef H5 -->
            <view> H5端 </view>
            <!-- #endif -->
 
MP：小程序
           <!-- #ifdef MP -->
            <view> 小程序端 </view>
            <!-- #endif -->