问题：如何在 UniApp 中正确使用 #ifdef 判断 H5 和 App 平台？

Question

在 UniApp 开发过程中，经常需要根据不同的运行平台（如 H5、App）执行相应的代码逻辑。开发者常使用条件编译语法 `#ifdef` 来实现平台判断，但容易出现平台标识符使用错误或逻辑判断不准确的问题。例如，如何正确书写 `#ifdef H5` 和 `#ifdef APP-PLUS` 才能有效区分 H5 和 App 平台？是否可以在 `` 和 `<script></script>

Answer 1

一、UniApp 条件编译基础概念

UniApp 提供了条件编译功能，允许开发者根据不同的运行平台编写差异化的代码逻辑。主要通过预定义的平台标识符，例如 H5、APP-PLUS、MP-WEIXIN 等来区分不同平台。

条件编译语法通常以 #ifdef、#ifndef、#endif 等宏定义形式存在。例如：

#ifdef H5
  console.log('当前是 H5 平台');
#endif
  

开发者在使用过程中容易出现平台标识符拼写错误、平台判断逻辑混乱等问题，导致代码行为异常。

二、常见平台标识符及使用方式

以下是一些常见的 UniApp 平台标识符及其含义：

标识符	说明
H5	HTML5 页面
APP-PLUS	5+ App 运行环境
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序

例如，判断是否为 H5 平台的写法如下：

#ifdef H5
  // H5 特有逻辑
#endif
  

判断是否为 App 平台（5+ App）的写法如下：

#ifdef APP-PLUS
  // App 特有逻辑
#endif
  

注意：平台标识符必须全大写，且不能拼写错误，否则条件编译将失效。

三、条件编译在不同代码块中的使用

条件编译不仅可以在 <script> 中使用，在 <template> 和 <style> 中也支持使用。

• 在 <template> 中使用示例：

<view>
  #ifdef H5
    <button>H5按钮</button>
  #endif
  #ifdef APP-PLUS
    <button>App按钮</button>
  #endif
</view>
  

• 在 <script> 中使用示例：

export default {
  methods: {
    doSomething() {
      #ifdef H5
        console.log('H5平台执行');
      #endif
      #ifdef APP-PLUS
        console.log('App平台执行');
      #endif
    }
  }
}
  

注意：在 Vue 单文件组件中，条件编译必须位于代码块的最外层，不能嵌套在函数或变量定义内部。

四、不同打包环境下的平台标识一致性问题

在不同构建环境（如开发环境、生产环境、自定义打包）中，平台标识符的行为是否一致，是开发者常遇到的问题之一。

UniApp 的条件编译是在编译阶段进行处理的，也就是说，编译器会根据目标平台选择性地保留或移除代码块。因此，平台标识符的判断是基于编译时的构建目标，而非运行时。

例如，当使用 HBuilderX 构建到 H5 时，所有 #ifdef H5 的代码块会被保留，而 #ifdef APP-PLUS 的代码块会被移除。

因此，开发者需要确保在不同打包环境中明确指定目标平台，避免因构建配置错误导致平台标识误判。

五、避免平台判断错误的最佳实践

为了减少因平台标识符使用错误导致的功能异常，建议遵循以下最佳实践：

1. 统一平台标识符命名规范，使用官方文档中推荐的标识符。
2. 避免在多个条件编译块中重复逻辑，尽量使用互斥条件，如：

#if H5
  // H5 逻辑
#elif APP-PLUS
  // App 逻辑
#else
  // 默认逻辑
#endif
  

1. 使用 uni.getSystemInfoSync() 获取运行时平台信息，作为辅助判断。
2. 在开发过程中使用日志输出当前平台标识，便于调试。
3. 建立统一的平台适配层，将平台差异封装为独立模块。

此外，可以借助 IDE 插件或脚本工具自动检测平台标识符拼写错误，提高开发效率。

六、平台判断错误导致的常见问题与调试流程

当平台判断错误时，可能会出现以下问题：

• 调用平台特有 API 报错（如 App 端调用 uni.getSystemInfoSync() 成功，H5 端失败）。
• 样式或组件在某些平台不显示。
• 某些功能模块未正确启用或禁用。

调试流程建议如下：

graph TD
    A[启动调试] --> B{是否使用条件编译?}
    B -->|否| C[检查平台判断逻辑]
    B -->|是| D[检查标识符拼写]
    D --> E[是否匹配构建目标?]
    E -->|否| F[修改标识符或构建配置]
    E -->|是| G[输出日志确认平台]
    G --> H[是否逻辑正确?]
    H -->|否| I[调整条件编译结构]
    H -->|是| J[功能正常]