当前位置：首页 > news >正文

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

news 2026/6/28 16:27:59

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 */