uni-app条件编译-CSDN博客

本文链接：https://blog.csdn.net/x15514104477/article/details/147400855

uni-app条件编译

1. 条件编译的基本原理

条件编译是通过在代码中添加特定格式的注释（如 // #ifdef、// #endif），在构建时根据目标平台自动过滤掉非当前平台的代码。
本质：通过编译器（如 HBuilderX）识别这些注释，在打包时只保留目标平台的代码，其他平台的代码会被剔除。

2. 条件编译的语法

(1) 基本语法

平台标识符：
MP-WEIXIN（微信小程序）、H5、APP、APP-PLUS（所有 App 端）、VUE3（Vue3 项目）等。
完整标识符列表见 uni-app 官方文档。

基本格式：

// #ifdef 平台标识符
该平台需要执行的代码
// #endif

// #ifndef 平台标识符（非该平台时生效）
非该平台需要执行的代码
// #endif

(2) 多平台判断

支持逻辑运算符（||、&&）：

// #ifdef MP-WEIXIN || H5
// 微信小程序或 H5 端生效
// #endif

3. 应用场景

(1) 不同平台的 API 调用

// 微信小程序调用登录接口
// #ifdef MP-WEIXIN
wx.login({
  success(res) { ... }
});
// #endif

// 其他平台使用 uni-app 统一 API
// #ifndef MP-WEIXIN
uni.login({
  provider: 'weixin',
  success(res) { ... }
});
// #endif

(2) 组件差异

不同平台使用不同组件：

<!-- 微信小程序用原生组件 -->
// #ifdef MP-WEIXIN
<official-account></official-account>
// #endif

<!-- H5 端用 div 替代 -->
// #ifdef H5
<div class="placeholder"></div>
// #endif

(3) 样式适配

在 <style> 中按平台调整样式：

/* 所有平台通用样式 */
.text {
  font-size: 16px;
}

/* 仅 App 端生效 */
// #ifdef APP
.text {
  font-size: 18px;
}
// #endif

(4) JSON 配置差异

在 pages.json 中按平台配置：

{
  "pages": [
    // 通用页面
    { "path": "pages/index/index" }
  ],
  // 仅微信小程序启用下拉刷新
  // #ifdef MP-WEIXIN
  "globalStyle": {
    "enablePullDownRefresh": true
  }
  // #endif
}

4. 注意事项

(1) 注释符号的严格性

必须使用单行注释：
// #ifdef 是严格格式，不可用 /* ... */ 多行注释。
缩进问题：
条件编译注释必须顶格写（不能有缩进），否则可能失效。

(2) 文件类型支持

支持的文件类型：
.js、.vue（包括 <template>、<style>、<script>）、.json、.css、.scss 等。
特殊文件：
pages.json 中也可使用条件编译，但需注意 JSON 格式的合法性（不能有注释，需用 // 包裹条件编译）。

(3) 平台标识符的准确性

错误示例：MP-WECHAT（正确应为 MP-WEIXIN）。
可通过 process.env.UNI_PLATFORM 动态获取当前平台标识符。

5. 开发技巧

(1) HBuilderX 的语法提示

高亮与折叠：
HBuilderX 会自动对条件编译代码块进行高亮和折叠，提升可读性。
快速输入：
输入 ifdef 后，编辑器会自动补全条件编译语法。

(2) 减少冗余代码

优先使用跨平台 API：
如能用 uni.request 代替 wx.request 或 ajax，则无需条件编译。

封装平台差异逻辑：
将平台差异代码封装到独立文件或工具函数中，例如：

// utils/login.js
export function login() {
  // #ifdef MP-WEIXIN
  return wx.login();
  // #endif

  // #ifndef MP-WEIXIN
  return uni.login({ provider: 'weixin' });
  // #endif
}

(3) 调试技巧

指定平台编译：
在 HBuilderX 中选择运行到特定平台（如“运行到微信小程序”），编译器会自动过滤其他平台代码。
查看编译后代码：
在项目的 /dist 目录下查看编译后的平台专属代码，验证条件编译是否生效。

6. 示例：完整条件编译场景

模板（Template）

<template>
  <view>
    <!-- 所有平台通用内容 -->
    <text>Hello World</text>

    <!-- 仅微信小程序显示按钮 -->
    // #ifdef MP-WEIXIN
    <button @click="scanQRCode">扫码</button>
    // #endif

    <!-- H5 端显示提示 -->
    // #ifdef H5
    <div class="tip">请在微信中打开小程序</div>
    // #endif
  </view>
</template>

脚本（Script）

export default {
  methods: {
    scanQRCode() {
      // 微信小程序调用原生扫码
      // #ifdef MP-WEIXIN
      wx.scanCode({
        success(res) { ... }
      });
      // #endif

      // 其他平台使用 uni 扫码
      // #ifndef MP-WEIXIN
      uni.scanCode({
        success(res) { ... }
      });
      // #endif
    }
  }
}