Uni-app条件编译：跨端开发终极指南

🌟 Uni-app 每日进阶：彻底掌握「条件编译」

在跨端开发中，"一套代码多端运行"是理想，但"平台差异"是现实。条件编译就是 Uni-app 提供的核心解决方案，它允许我们在同一套代码中，针对不同平台书写特有的逻辑，且不会在其他平台产生冗余代码。

一、什么是条件编译？

条件编译是用特殊的注释作为标记，在编译时根据编译目标平台，将注释里的代码剔除或保留。

优点：解决平台差异、优化包体积、不影响代码逻辑整洁。

二、核心语法速查表

语法类型	代码注释格式
Template (HTML)	`...`
Script (JS/TS)	`// #ifdef PLATFORM ... // #endif`
Style (CSS)	`/* #ifdef PLATFORM / ... / #endif */`
pages.json	`// #ifdef PLATFORM ... // #endif` (同样适用)

常用平台常量 (PLATFORM)

H5：浏览器环境
MP-WEIXIN：微信小程序
APP-PLUS：App 端 (iOS/Android)
MP-ALIPAY：支付宝小程序
MP：所有小程序平台
逻辑运算符 ：支持 || (或)、&& (与)、! (非)。

三、全维度代码演示

1. UI 层的平台差异 (Template)

html 复制代码

<template>
    <view>
        <button open-type="contact">联系微信客服</button>
        <view @click="startScan">扫一扫</view>
        </view>
</template>

2. 逻辑层的平台适配 (JavaScript)

javascript 复制代码

onLoad() {
    // #ifdef APP-PLUS
    console.log("当前是 App 环境，准备调用原生插件");
    const pinia = plus.push.getClientInfo(); 
    // #endif

    // #ifdef H5
    console.log("当前是 H5 环境，处理 URL 参数");
    const urlParams = new URLSearchParams(window.location.search);
    // #endif
}

3. 样式层的细节微调 (CSS)

css 复制代码

.container {
    /* 在 H5 端，由于有顶部导航栏，可能需要调整间距 */
    /* #ifdef H5 */
    padding-top: 44px;
    /* #endif */

    /* 在小程序端，针对不同品牌微调颜色 */
    /* #ifdef MP-ALIPAY */
    color: #00A0E9; /* 支付宝蓝 */
    /* #endif */
}

四、进阶：目录级条件编译 (更优雅的方案)

当某个平台的逻辑极其复杂时，满屏的 #ifdef 会让代码难以维护。此时建议使用目录条件编译：

在项目根目录创建 platforms 文件夹。
建立对应平台目录，如 platforms/mp-weixin/。
在该目录下编写同名文件。

编译时，Uni-app 会优先加载当前运行平台目录下的文件，自动覆盖公共文件。 这种方式能保持主业务逻辑的绝对纯净。

五、避坑与经验指南

拼写敏感 ：MP-WEIXIN 必须大写，错一个字母都不会生效。
注释位置 ：注释必须包裹完整的代码块。在 JS 中，// #endif 后面建议空一行，防止编译器解析异常。
pages.json 别忘了 ：底部 TabBar、原生导航栏按钮、下拉刷新配置等，都可以通过条件编译在 pages.json 中针对性开启。
优先通用 API ：只有当 uni.xxx 通用 API 无法满足需求，或者需要调用平台特有功能（如 plus、wx 对象）时，才使用条件编译。

Uni-app条件编译：跨端开发终极指南

🌟 Uni-app 每日进阶：彻底掌握「条件编译」

一、 什么是条件编译？

二、 核心语法速查表