uni-app 跨端适配：条件编译优先，运行时判断兜底

在 uni-app 项目里，平台差异处理的核心思路可以概括为一句话：大分支用条件编译，细分支用运行时判断。

这样做的好处很直接：目标平台只打包自己需要的代码，运行时逻辑更干净，后期维护成本也更低。

💎 编译期方案：条件编译

处理 H5、小程序、App 差异时，优先使用条件编译。它发生在构建阶段，最终产物不会带上其他平台的冗余代码。

基础语法

模板 (Template)： ... 
脚本 (Script)：// #ifdef 平台名 ... // #endif
样式 (Style)：/* #ifdef 平台名 */ ... /* #endif */

常用平台标识

标签	对应平台	标签	对应平台
`H5`	H5 端	`APP-PLUS`	App（iOS/Android）
`MP-WEIXIN`	微信小程序	`APP-ANDROID` / `APP-IOS`	安卓 / iOS App
`MP-ALIPAY`	支付宝小程序	`APP-HARMONY`	鸿蒙 App
`MP-BAIDU`	百度小程序	`QUICKAPP-WEBVIEW`	快应用
`MP-QQ`	QQ 小程序

💻 实战示例

JavaScript / TypeScript

getUserInfo() {
  // #ifdef MP-WEIXIN
  console.log("微信小程序: 调用 wx.login");
  // #endif

  // #ifdef APP-PLUS
  console.log("App: 调用 uni.login 或原生 SDK");
  // #endif

  // #ifdef H5
  console.log("H5: 跳转公众号授权页");
  // #endif
}

Vue Template

<template>
  <view>
    <!-- #ifdef H5 -->
    <view>这段内容只在 H5 显示</view>
    <!-- #endif -->

    <!-- #ifdef MP-WEIXIN -->
    <button open-type="contact">联系微信客服</button>
    <!-- #endif -->

    <!-- #ifdef APP-PLUS || H5 -->
    <custom-price :price="item.price" />
    <!-- #endif -->
  </view>
</template>

CSS / SCSS

/* #ifdef H5 */
.container {
  padding-top: 44px;
}
/* #endif */

/* #ifdef MP-WEIXIN */
.button {
  background-color: #07c160;
}
/* #endif */

.footer-btn {
  position: fixed;
  bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

文件级条件编译

当同一页面的平台差异非常大时，推荐直接拆分文件，避免一个文件里出现大量 #ifdef：

建立平台专属文件：index.h5.vue、index.mp-weixin.vue。
构建时由 uni-app 自动选择并优先加载对应平台文件。

🚀 运行时方案：用于设备级细分

有些逻辑在打包后才能决定，比如 App 内区分 iOS 和 Android，这时再使用运行时判断。

const systemInfo = uni.getSystemInfoSync();

if (systemInfo.platform === "ios") {
  console.log("当前运行在 iOS 设备");
} else if (systemInfo.platform === "android") {
  console.log("当前运行在 Android 设备");
}

if (systemInfo.model === "iPhone X") {
  console.log("进行 iPhone X 特殊适配");
}

uni.getSystemInfoSync().platform 在开发工具里可能返回 devtools，不适合做 H5 / 小程序 / App 这类大平台判断。大类分支请始终交给条件编译。

✅ 结论

平台大类差异：全部交给条件编译，保持产物纯净。
设备细节差异：运行时判断补齐。
复杂页面：优先拆成平台文件，减少条件块嵌套。

这套组合在实际项目里可读性和可维护性都更稳定，也更适合长期迭代。