最干净可靠的方式是用// #ifdef条件编译注释实现平台代码分离，必须严格遵循语法规范，仅在编译时生效，支持script/template/style三端差异化处理。

要在HBuilderX中为uni-app项目实现App、H5和微信小程序三端差异化逻辑，必须在编译阶段就剔除非目标平台代码，避免运行时报错、包体积膨胀和类型检查失效——这一步不做，后续调试会反复卡在wx未定义、plus不存在、H5跳转白屏等硬性报错上。

基础语法与平台标识符确认

打开任意.vue或.js文件，在需要差异化的位置输入#ifdef后按回车，HBuilderX会自动补全完整结构；平台标识符必须严格使用官方大写格式，例如APP-PLUS（不是app、appplus或app-plus），小写或拼写错误会导致条件编译失效，该段代码将被所有平台保留或全部剔除。

支持的平台标识符有：APP-PLUS（5+ App）、H5（浏览器）、MP-WEIXIN（微信小程序）、MP-ALIPAY（支付宝小程序）等；【%PLATFORM%必须紧贴#ifdef或#ifndef之后，中间不能有空格】。

模板层（.vue文件<template>中）差异化写法

方法一：直接包裹DOM节点

在<template>内插入如下结构，HBuilderX会高亮显示条件编译区域：

<!-- #ifdef H5 -->
<view class="h5-only">仅H5可见的按钮</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<button open-type="getUserInfo">微信授权登录</button>
<!-- #endif -->

方法二：嵌套在通用结构中

把条件块放在通用容器内部，避免重复写<view>标签：

<view class="content">
<!-- #ifdef APP-PLUS -->
<text>App端专属提示</text>
<!-- #endif -->
<!-- #ifdef H5 -->
<div class="h5-banner"></div>
<!-- #endif -->
</view>

逻辑层（<script>中）平台专属API调用

第一步：判断平台并执行对应初始化

// #ifdef H5
document.title = 'H5管理后台';
localStorage.setItem('entry', 'h5');
// #endif

第二步：调用平台特有API且不污染其他端

// #ifdef MP-WEIXIN
uni.login({
  provider: 'weixin',
  success: res => {
    console.log('微信登录code:', res.code);
  }
});
// #endif

第三步：App端调用plus对象（H5和小程序中plus未定义，此处不加条件编译必报错）

// #ifdef APP-PLUS
const channel = plus.push.getClientInfo().clientid;
console.log('App设备ID:', channel);
// #endif

注意：不能在同一个函数体内混用多端API，比如在onLoad里同时写wx.login()和plus.push——即使加了条件编译，TS类型检查仍会报错，应拆分为独立方法或用不同生命周期钩子隔离。

样式层（<style>中）平台专属CSS规则

方法一：单行条件注释（推荐用于简单覆盖）

/* #ifdef H5 */
.header { padding-top: env(safe-area-inset-top); }
/* #endif */
/* #ifdef MP-WEIXIN */
.header { background: linear-gradient(135deg, #07c160, #00a47f); }
/* #endif */

方法二：整块样式区块（适合复杂布局适配）

/* #ifdef APP-PLUS */
.video-player {
  width: 100%;
  height: 400px;
  position: relative;
}
/* #endif */

提示：HBuilderX对.vue中<style>内的条件编译支持高亮，但独立.css文件需手动切换编辑器模式为“CSS”才能识别注释语法，否则可能误报语法错误。

配置与资源文件差异化方案

第一步：在static目录下建平台专用配置文件

创建static/config-h5.js和static/config-mp-weixin.js，内容分别为：

// static/config-h5.js
export default { apiBase: 'https://h5-api.example.com', logo: '/static/h5-logo.png' };

// static/config-mp-weixin.js
export default { apiBase: 'https://mp-api.example.com', logo: '/static/mp-logo.png' };

第二步：在main.js中按平台动态导入

// #ifdef H5
import config from '@/static/config-h5.js';
// #endif
// #ifdef MP-WEIXIN
import config from '@/static/config-mp-weixin.js';
// #endif
Vue.prototype.$config = config;

第三步：确保template.h5.html中引入H5专用JS，而小程序无此操作——这是物理隔离，比纯条件编译更彻底，避免H5配置被误打包进小程序。