uniapp条件编译

2025年10月22日 Uniapp
#Uniapp #小程序 #H5

uniapp 在不同平台条件编译所需的代码，公司的项目老板一会要个 H5，一会要个小程序，一会打个 app。但是每个平台的代码是有差异的，需要在不同平台编译所需要代码，这时候就用上了条件编译 官方文档：https://uniapp.dcloud.net.cn/tutorial/platform.html#preprocessor

条件编译

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

使用方法

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

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

条件编译写法说明
#ifdef APP-PLUS 需条件编译的代码 #endif仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif除了 H5 平台，其它平台均存在的代码（注意if后面有个n）
#ifdef H5 || MP-WEIXIN 需条件编译的代码 #endif在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）

%PLATFORM% 可取值：

值生效条件版本支持
VUE3uni-app js引擎版用于区分vue2和3，详情HBuilderX 3.2.0+
VUE2uni-app js引擎版用于区分vue2和3，详情
UNI-APP-X用于区分是否是uni-app x项目 详情HBuilderX 3.9.0+
uniVersion用于区分编译器的版本 详情HBuilderX 3.9.0+
APPApp
APP-PLUSuni-app js引擎版编译为App时
APP-PLUS-NVUE或APP-NVUEApp nvue 页面
APP-ANDROIDApp Android 平台 详情
APP-IOSApp iOS 平台 详情
APP-HARMONYApp HarmonyOS Next 平台
H5H5（推荐使用 WEB）
WEBweb（同H5）HBuilderX 3.6.3+
MP-WEIXIN微信小程序
MP-ALIPAY支付宝小程序
MP-BAIDU百度小程序
MP-TOUTIAO抖音小程序
MP-LARK飞书小程序
MP-QQQQ小程序
MP-KUAISHOU快手小程序
MP-JD京东小程序
MP-360360小程序
MP-HARMONY鸿蒙元服务HBuilderX 4.34+
MP-XHS小红书小程序
MP微信小程序/支付宝小程序/百度小程序/抖音小程序/飞书小程序/QQ小程序/360小程序/鸿蒙元服务/小红书小程序/京东小程序/快手小程序
QUICKAPP-WEBVIEW快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION快应用联盟
QUICKAPP-WEBVIEW-HUAWEI快应用华为

json使用

{
  "key": "a",
  // #ifdef MP-WEIXIN
  "key": "b"
  // #endif
}

js使用

// #ifdef MP-WEIXIN
import a from "a/wx";
// #endif
// #ifndef MP-WEIXIN
import a from "a/index";
// #endif

标签使用

<view>
    <view>微信公众号关注组件</view>
    <view>
        <!-- uni-app未封装，但可直接使用微信原生的official-account组件-->
        <!-- #ifdef MP-WEIXIN -->
        	<official-account></official-account>
        <!-- #endif -->
    </view>
</view>

样式使用

/*  #ifdef   MP-WEIXIN  */
平台特有样式
/*  #endif  */
↑
0%