条件编译机制

条件编译机制是 uni-app 提供的一种基于平台、环境或自定义条件动态编译代码的能力。它允许开发者在同一套代码中针对不同平台或场景编写差异化逻辑，从而避免维护多套代码库的复杂性。

条件编译的基本语法

uni-app 的条件编译采用特殊注释语法实现，分为单行注释和多行注释两种形式：

// #ifdef 平台名称
平台特定代码
// #endif

/* #ifdef 平台名称 */
平台特定代码
/* #endif */

常用平台标识符包括：

• H5：Web 平台
• MP-WEIXIN：微信小程序
• APP：App 平台
• VUE3：Vue 3 项目

平台条件编译示例

不同平台样式处理

/* 仅在H5平台生效 */
/* #ifdef H5 */
.header {
  height: 88px;
}
/* #endif */

/* 微信小程序特有样式 */
/* #ifdef MP-WEIXIN */
.header {
  height: 64rpx;
}
/* #endif */

平台特定组件

<template>
  <!-- 通用组件 -->
  <view class="container">
    <!-- 仅在小程序显示 -->
    <!-- #ifdef MP-WEIXIN -->
    <ad unit-id="123"></ad>
    <!-- #endif -->
    
    <!-- 仅App端显示 -->
    <!-- #ifdef APP -->
    <native-ad></native-ad>
    <!-- #endif -->
  </view>
</template>

环境条件编译

除了平台区分，还可以根据开发环境进行条件编译：

// #ifdef DEVELOPMENT
console.log('调试信息');
// #endif

// #ifdef PRODUCTION
// 生产环境不输出日志
// #endif

自定义条件编译

uni-app 支持通过 process.env.UNI_CUSTOM 定义自定义条件：

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env.UNI_CUSTOM': JSON.stringify({
          'CUSTOM_FEATURE': true
        })
      })
    ]
  }
}

使用示例：

// #ifdef CUSTOM_FEATURE
console.log('启用自定义功能');
// #endif

复杂条件组合

支持使用逻辑运算符组合多个条件：

// 同时满足微信小程序和开发环境
// #ifdef MP-WEIXIN && DEVELOPMENT
wx.showToast({
  title: '开发调试'
})
// #endif

// 满足任一条件
// #ifdef H5 || APP
console.log('运行在H5或App平台');
// #endif

条件编译的嵌套使用

条件编译支持多层嵌套，适合处理复杂场景：

// #ifdef MP-WEIXIN
  // #ifdef DEVELOPMENT
  const baseURL = 'https://dev.api.com'
  // #else
  const baseURL = 'https://api.com'
  // #endif
// #elif H5
const baseURL = '/api'
// #endif

条件编译在脚本中的使用

JavaScript/TypeScript 中同样支持条件编译：

function getPlatform() {
  // #ifdef H5
  return 'web'
  // #endif
  
  // #ifdef MP-WEIXIN
  return 'wechat'
  // #endif
  
  // #ifdef APP
  return 'app'
  // #endif
}

条件编译的注意事项

1. 作用域限制：条件编译块内声明的变量在外部不可访问

   // #ifdef H5
   const h5Var = 'h5' // 仅在H5平台存在
   // #endif
   
   console.log(h5Var) // 其他平台会报错
   

2. 语法完整性：每个条件块必须完整包含语法结构

   // 错误示例
   function test() {
     // #ifdef H5
     return 'h5'
   }
   // #endif
   

3. 预处理特性：条件编译是在代码压缩前处理的，与运行时条件判断不同

条件编译与动态导入结合

可以配合动态导入实现按平台加载模块：

// #ifdef H5
import('./h5-module.js').then(module => {
  module.init()
})
// #endif

// #ifdef MP-WEIXIN
import('./wechat-module.js').then(module => {
  module.init()
})
// #endif

条件编译的性能优化

合理使用条件编译可以显著优化包体积：

1. 排除未使用平台的组件
2. 移除平台无关的polyfill
3. 避免打包未使用的第三方库

// #ifndef H5
// 非H5平台使用轻量级日期库
import dayjs from 'dayjs'
// #endif

// #ifdef H5
// H5平台使用完整moment.js
import moment from 'moment'
// #endif

条件编译的调试技巧

1. 查看预处理结果：

   # 查看H5平台预处理结果
   npx cross-env UNI_PLATFORM=h5 vue-cli-service uni-build --watch
   

2. 使用环境变量调试：

   // 临时启用调试模式
   // #ifdef DEBUG || DEVELOPMENT
   console.log('调试信息')
   // #endif
   

条件编译的进阶用法

平台特性检测

function useFeature() {
  // #ifdef MP-WEIXIN
  if (wx.canIUse('feature-name')) {
    return true
  }
  // #endif
  
  // #ifdef APP
  return uni.getSystemInfoSync().platform === 'ios'
  // #endif
  
  return false
}

多平台兼容组件

<template>
  <view>
    <!-- #ifdef H5 -->
    <button @click="handleClick">HTML按钮</button>
    <!-- #endif -->
    
    <!-- #ifdef MP-WEIXIN -->
    <button @click="handleClick" size="mini">小程序按钮</button>
    <!-- #endif -->
  </view>
</template>

CSS变量与条件编译结合

:root {
  /* #ifdef H5 */
  --primary-color: #1890ff;
  /* #endif */
  
  /* #ifdef MP-WEIXIN */
  --primary-color: #07C160;
  /* #endif */
}

.button {
  background-color: var(--primary-color);
}

条件编译的工程化实践

1. 目录结构组织：

   /src
     /platform
       /h5
         index.js
       /mp-weixin
         index.js
     App.vue
   

2. 自动化平台检测：

   // platform.js
   export function getApiBase() {
     // #ifdef H5
     return '/api'
     // #endif
     
     // #ifdef MP-WEIXIN
     return 'https://wechat.api.com'
     // #endif
   }
   

3. 构建配置扩展：

   // vue.config.js
   module.exports = {
     chainWebpack(config) {
       // #ifdef H5
       config.plugin('html').tap(args => {
         args[0].title = 'H5专属标题'
         return args
       })
       // #endif
     }
   }