条件编译实现多端适配

条件编译实现多端适配

uni-app 的条件编译功能允许开发者根据不同平台编写特定代码，从而实现一套代码适配多端。通过特殊的注释语法，可以在编译阶段选择性保留或剔除代码块，解决不同平台间的 API 差异、样式兼容等问题。

条件编译基础语法

条件编译使用 // #ifdef 和 // #endif 作为基础语法结构，中间可插入平台标识符：

// #ifdef H5
console.log('这段代码只在H5平台出现');
// #endif

// #ifdef MP-WEIXIN
console.log('这段代码只在微信小程序平台出现');
// #endif

常用平台标识符包括：

• H5：Web 浏览器环境
• MP-WEIXIN：微信小程序
• MP-ALIPAY：支付宝小程序
• APP：App 原生环境
• APP-PLUS：包含 App 和 H5
• APP-NVUE：App nvue 页面

多条件组合判断

支持通过 || 和 && 进行复杂条件组合：

// #ifdef H5 || MP-WEIXIN
console.log('H5或微信小程序环境');
// #endif

// #ifdef APP && IOS
console.log('仅iOS原生环境');
// #endif

否定条件使用 #ifndef：

// #ifndef MP-ALIPAY
console.log('非支付宝小程序环境');
// #endif

样式文件的条件编译

在 style 标签中同样支持条件编译，解决不同平台的样式差异：

<style>
/* #ifdef H5 */
.container {
  padding: 20px;
}
/* #endif */

/* #ifdef MP-WEIXIN */
.container {
  padding: 10rpx;
}
/* #endif */
</style>

模板中的条件编译

模板结构也可以通过条件编译实现差异化：

<template>
  <view>
    <!-- #ifdef H5 -->
    <h1>网页端标题</h1>
    <!-- #endif -->
    
    <!-- #ifdef MP-WEIXIN -->
    <view class="wx-title">小程序标题</view>
    <!-- #endif -->
  </view>
</template>

配置文件的条件编译

pages.json 中可针对不同平台配置路由等参数：

{
  "pages": [
    {
      "path": "pages/index",
      "style": {
        "navigationBarTitleText": "首页",
        // #ifdef H5
        "titleNView": false
        // #endif
      }
    }
  ]
}

实际应用场景示例

平台特定组件加载

// #ifdef H5
import H5Video from './h5-video.vue';
// #endif

// #ifdef MP-WEIXIN
import WxVideo from './wx-video.vue';
// #endif

export default {
  components: {
    // #ifdef H5
    'my-video': H5Video,
    // #endif
    
    // #ifdef MP-WEIXIN
    'my-video': WxVideo
    // #endif
  }
}

API 差异处理

function getSystemInfo() {
  // #ifdef H5
  return {
    screenWidth: window.innerWidth,
    platform: 'h5'
  };
  // #endif
  
  // #ifdef MP-WEIXIN
  return wx.getSystemInfoSync();
  // #endif
  
  // #ifdef APP
  return plus.os.name;
  // #endif
}

动态样式处理

<template>
  <view :class="['container', platformClass]">
    <!-- 内容区 -->
  </view>
</template>

<script>
export default {
  computed: {
    platformClass() {
      // #ifdef H5
      return 'h5-container';
      // #endif
      
      // #ifdef MP-WEIXIN
      return 'wx-container';
      // #endif
    }
  }
}
</script>

高级用法：自定义条件编译

在 vue.config.js 中可扩展自定义条件：

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env.UNI_PLATFORM': JSON.stringify(process.env.UNI_PLATFORM),
        'process.env.CUSTOM_FLAG': '"YOUR_VALUE"'
      })
    ]
  }
}

然后在代码中使用：

// #ifdef CUSTOM_FLAG
console.log('自定义条件编译生效');
// #endif

条件编译的局限性

1. 调试困难：条件编译后的代码在开发工具中可能无法直接调试
2. 代码冗余：所有平台的代码都存在于源码中，可能影响可读性
3. 动态性不足：编译时确定内容，无法实现运行时动态切换

性能优化建议

1. 避免在频繁调用的函数中使用大量条件编译分支
2. 对于复杂平台差异，考虑拆分为独立文件：

// utils/h5.js
export function platformApi() { /* H5实现 */ }

// utils/weixin.js 
export function platformApi() { /* 微信实现 */ }

// 主文件
// #ifdef H5
import { platformApi } from './utils/h5';
// #endif

// #ifdef MP-WEIXIN
import { platformApi } from './utils/weixin';
// #endif

与跨端方案的结合

条件编译可与以下方案配合使用：

• uni-app 内置 API 差异抹平
• 第三方跨端库（如 taro、remax）
• 自定义运行时适配层

// 适配层示例
function request(url, options) {
  // #ifdef H5
  return fetch(url, options);
  // #endif
  
  // #ifdef MP-WEIXIN
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      ...options,
      success: resolve,
      fail: reject
    });
  });
  // #endif
}

版本控制与条件编译

结合版本号进行更精细控制：

// #ifdef H5 && VERSION > 2.0
console.log('H5平台2.0以上版本');
// #endif

在编译命令中注入版本变量：

cross-env VERSION=2.1 uni-build

静态分析与代码检查

由于条件编译会影响代码结构，建议：

1. 使用 ESLint 插件检查条件编译语法
2. 在 CI 流程中对各平台代码分别静态分析
3. 建立平台专属的测试用例集

// 示例测试代码
describe('H5特定功能', () => {
  // #ifdef H5
  it('应该正确执行H5方法', () => {
    expect(h5Function()).toBeTruthy();
  });
  // #endif
});

条件编译的最佳实践

1. 注释清晰：为每个条件块添加说明注释
2. 平台检测：运行时保留平台判断能力：

const isH5 = process.env.UNI_PLATFORM === 'h5';
const isWeixin = process.env.UNI_PLATFORM === 'mp-weixin';

3. 目录组织：按平台拆分大型模块：

src/
  platforms/
    h5/
      components/
      utils/
    weixin/
      components/ 
      utils/

4. 构建配置：通过不同构建命令生成多平台包：

{
  "scripts": {
    "build:h5": "uni-build --platform h5",
    "build:wx": "uni-build --platform mp-weixin"
  }
}