uniapp开发鸿蒙：跨端兼容与条件编译实战

一、条件编译核心机制

条件编译是uni-app实现"一套代码多端运行"的核心技术，通过特殊的注释语法在编译阶段根据目标平台自动包含或排除代码块，有效解决跨端开发中的兼容性问题。

1.1 基础语法结构

条件编译使用#ifdef、#ifndef和#endif指令，语法格式如下：

复制代码

// #ifdef %PLATFORM%
// 平台专属代码
// #endif

// #ifndef %PLATFORM%
// 除指定平台外的代码
// #endif

参数说明：

#ifdef：if defined，仅在指定平台存在时编译
#ifndef：if not defined，除指定平台外均编译
%PLATFORM%：平台标识符

1.2 支持的平台标识

uni-app支持24个平台标识，常用标识如下：

标识符	对应平台	说明
`APP-PLUS`	App端	iOS/Android原生应用
`H5`	Web端	浏览器环境
`MP-WEIXIN`	微信小程序	微信小程序平台
`MP-ALIPAY`	支付宝小程序	支付宝小程序平台
`MP-BAIDU`	百度小程序	百度小程序平台
`MP-TOUTIAO`	抖音小程序	字节跳动小程序
`MP-QQ`	QQ小程序	QQ小程序平台
`MP`	所有小程序	小程序通用标识

二、条件编译实战应用

2.1 API调用差异化处理

不同平台的API调用方式存在差异，通过条件编译实现精准适配：

复制代码

// #ifdef H5
// H5平台使用浏览器API
window.location.href = 'https://example.com';
// #endif

// #ifdef MP-WEIXIN
// 微信小程序使用wx API
wx.navigateTo({ url: '/pages/index/index' });
// #endif

// #ifdef APP-PLUS
// App端使用plus API
plus.runtime.openURL('https://example.com');
// #endif

2.2 组件渲染差异化

在Vue模板中使用条件编译控制组件显示：

复制代码

<template>
  <view>
    <!-- 仅在微信小程序显示open-type按钮 -->
    <!-- #ifdef MP-WEIXIN -->
    <button open-type="getUserInfo" @getuserinfo="onUserInfo">
      获取用户信息
    </button>
    <!-- #endif -->
    
    <!-- 仅在App端显示原生分享按钮 -->
    <!-- #ifdef APP-PLUS -->
    <button @click="shareApp">分享应用</button>
    <!-- #endif -->
    
    <!-- 仅在H5显示网页广告 -->
    <!-- #ifdef H5 -->
    <div v-html="adCode"></div>
    <!-- #endif -->
  </view>
</template>

2.3 样式条件编译

在CSS中使用条件编译实现样式差异化：

复制代码

.container {
  padding: 20rpx;
  font-size: 28rpx;
}

/* 仅在H5平台生效的样式 */
/* #ifdef H5 */
.container {
  padding: 30px;
  font-size: 16px;
}
/* #endif */

/* 仅在App端生效的样式 */
/* #ifdef APP-PLUS */
.container {
  padding-top: 44px; /* 考虑状态栏高度 */
}
/* #endif */

2.4 配置文件条件编译

在pages.json中使用条件编译配置不同平台的路由：

复制代码

{
  "pages": [
    // #ifdef H5
    {
      "path": "pages/test1",
      "style": {
        "navigationBarTitleText": "测试1"
      }
    },
    // #endif
    
    // #ifdef MP-WEIXIN
    {
      "path": "pages/test2",
      "style": {
        "navigationBarTitleText": "测试2"
      }
    },
    // #endif
  ]
}

特别注意： JSON文件中的条件编译需要注意逗号分隔符，不能有多余的逗号，否则会导致编译失败。

三、静态资源条件编译

通过static目录的条件编译，可以按平台加载不同的静态资源：

复制代码

static/
├── mp-weixin/     # 仅微信小程序打包
│   └── logo.png
├── h5/            # 仅H5平台打包
│   └── banner.jpg
└── common/        # 所有平台打包
    └── bg.jpg

在代码中引用时，无需添加平台目录前缀：

复制代码

<image src="/static/logo.png"></image>

编译时，构建工具会自动根据当前平台选择对应的资源文件。

四、组合条件与高级用法

4.1 多平台组合判断

使用逻辑运算符实现多平台组合条件：

复制代码

// #ifdef H5 || MP-WEIXIN
// 在H5或微信小程序平台执行
console.log('这是H5或微信小程序平台');
// #endif

// #ifdef MP-WEIXIN && MP-ALIPAY
// 同时满足多个条件（实际场景较少）
// #endif

4.2 运行时平台判断

条件编译在编译时生效，如果需要运行时动态判断平台，可以使用uni.getSystemInfoSync()：

复制代码

const systemInfo = uni.getSystemInfoSync();
const platform = systemInfo.platform;
const uniPlatform = systemInfo.uniPlatform;

if (platform === 'ios') {
  console.log('当前平台是iOS');
} else if (platform === 'android') {
  console.log('当前平台是Android');
} else if (uniPlatform === 'mp-weixin') {
  console.log('当前平台是微信小程序');
}

4.3 自定义条件编译平台

在package.json中配置自定义平台：

复制代码

{
  "uni-app": {
    "scripts": {
      "custom-h5": {
        "title": "自定义H5平台",
        "env": {
          "UNI_PLATFORM": "h5"
        },
        "define": {
          "CUSTOM-H5": true
        }
      },
      "custom-mp": {
        "title": "自定义小程序平台",
        "env": {
          "UNI_PLATFORM": "mp-weixin"
        },
        "define": {
          "CUSTOM-MP": true
        }
      }
    }
  }
}

在代码中使用自定义平台标识：

复制代码

// #ifdef CUSTOM-MP
// 自定义微信小程序平台代码
// #endif

// #ifdef CUSTOM-H5
// 自定义H5平台代码
// #endif

注意： 只能扩展web和小程序平台，不能扩展app平台。

五、鸿蒙平台特殊适配

5.1 鸿蒙平台标识

针对HarmonyOS平台，使用以下标识：

复制代码

// #ifdef HARMONY
// 鸿蒙平台专属代码
// #endif

5.2 鸿蒙API调用

鸿蒙平台支持原生API调用，需通过条件编译隔离：

复制代码

// #ifdef HARMONY
// 调用鸿蒙原生API
const systemInfo = hmSystem.getSystemInfoSync();
console.log('鸿蒙设备信息:', systemInfo);
// #endif

5.3 鸿蒙样式适配

鸿蒙设备使用vp（视觉像素）单位，rpx会自动转换：

复制代码

.container {
  width: 750rpx; /* 鸿蒙设备自动转换为100%宽度 */
  padding: 20rpx;
}

/* 鸿蒙平台特殊样式 */
/* #ifdef HARMONY */
.container {
  padding-top: 48rpx; /* 考虑鸿蒙状态栏高度 */
}
/* #endif */

六、最佳实践与注意事项

6.1 注释语法规范

不同文件类型的注释写法不同：

JS/UTS文件 ：使用//单行注释
CSS文件 ：使用/* */多行注释
Vue模板 ：使用HTML注释

6.2 常见问题处理

问题1：条件编译不生效

检查平台标识拼写是否正确（区分大小写）
检查HBuilderX版本是否支持该平台标识
确认注释语法是否正确

问题2：JSON文件编译失败

检查JSON文件中是否有多余的逗号
确保条件编译块内的JSON语法正确

问题3：Android/iOS区分

条件编译不支持直接区分Android和iOS
使用运行时判断：uni.getSystemInfoSync().platform

6.3 性能优化建议

优先使用条件编译：处理平台差异较大的功能，减少运行时判断
合理使用static目录：按平台加载静态资源，减小包体积
避免在data中使用条件编译：改用方法或生命周期处理
使用HBuilderX优化功能：语法高亮、快速生成条件编译块

七、调试与测试

7.1 多平台调试

在HBuilderX中，可以通过以下方式调试不同平台：

点击菜单栏"运行" → 选择目标平台
在微信开发者工具中，通过"详情" → "条件编译"切换平台查看效果
使用真机调试功能，确保在不同设备上表现一致

7.2 代码折叠功能

HBuilderX支持条件编译代码折叠，可以折叠条件编译块，提高代码可读性。

总结

条件编译是uni-app实现跨端开发的核心技术，通过合理使用条件编译，可以在一套代码中优雅地处理多平台差异，提高开发效率和代码可维护性。在实际开发中，建议遵循"优先条件编译，辅以运行时判断"的原则，结合HBuilderX的优化功能，打造高质量的多端应用。