在 UniApp 中实现跨三端（H5、小程序、App）兼容开发，需要针对不同平台的特性进行适配和优化。以下是关键点和具体实践指南：

---

一、跨端兼容的核心策略

1. 代码分层与条件编译

• 条件编译：使用 UniApp 特有的 #ifdef、#ifndef 区分平台代码。

  // 仅在小程序中生效
  #ifdef MP-WEIXIN
  wx.login();
  #endif
  
  // 仅在 App 中生效
  #ifdef APP-PLUS
  plus.device.getInfo();
  #endif

• 目录结构：按平台拆分文件（如 utils/h5.js、utils/mp.js）。

2. API 统一封装

• 适配层：封装跨平台 API，例如网络请求：

  export function request(url, options) {
    #ifdef H5
    return fetch(url, options);
    #endif
    #ifdef MP-WEIXIN
    return wx.request({ url, ...options });
    #endif
    #ifdef APP-PLUS
    return uni.request({ url, ...options });
    #endif
  }

3. 样式兼容

• 单位统一：使用 upx 或 rpx 适配不同屏幕（小程序和 App 默认支持，H5 需配置 postcss 转换）。
• 平台特有样式：

  /* 仅在小程序中生效 */
  #ifdef MP-WEIXIN
  .button { padding: 10rpx; }
  #endif

---

二、各端差异与处理方案

1. H5 端

• 路由差异：
  • H5 使用 History API，需配置 manifest.json 的 router 模式。
  • 小程序和 App 使用原生导航。
• DOM/BOM API：
  • 直接使用 document、window（需通过 #ifdef H5 隔离）。

2. 小程序端

• 生命周期：
  • 需兼容小程序特有的 onLoad、onShow 和 UniApp 的 onLaunch。
• 组件限制：
  • 部分组件（如 <scroll-view>）在小程序中有特殊属性，需适配。
• 分包加载：
  • 小程序需配置 subPackages，而 H5 和 App 可忽略。

3. App 端

• 原生能力：
  • 调用摄像头、蓝牙等需通过 plus API 或原生插件。
• 性能优化：
  • 长列表使用 <list> 或 <recycle-list>（需单独适配）。

---

三、常见兼容问题与解决方案

问题	解决方案
导航栏差异	使用 uni.navigateTo 统一导航，或通过条件编译定制样式。
登录授权	H5 用 OAuth2，小程序用 wx.login()，App 用第三方 SDK（如微信开放平台）。
支付流程	小程序用 wx.requestPayment，App 接入支付宝/微信 SDK，H5 用 PC 支付。
图片上传	统一使用 uni.chooseImage，但需处理各端返回格式差异。
本地存储	uni.setStorage 通用，但注意小程序有 10MB 限制，App 可扩展。
地图组件	高德/腾讯地图需分平台配置 manifest.json 的 SDK 密钥。

---

四、调试与发布

1. 调试工具

• H5：Chrome 开发者工具。
• 小程序：微信开发者工具（需开启 UniApp 调试模式）。
• App：HBuilderX 真机调试或 Android Studio/Xcode。

2. 发布流程

• H5：部署到 Web 服务器，注意路由模式（Hash/History）。
• 小程序：上传至微信后台，需配置合法域名。
• App：云打包或离线打包，区分 Android/iOS 证书。

---

五、性能优化建议

1. 减少条件编译：尽量使用跨平台 API，减少分支代码。
2. 按需加载：
   • 小程序和 App 使用分包（subPackages）。
   • H5 使用懒加载（动态 import()）。
3. 资源适配：
   • 图片使用 CDN，格式优先 WebP（H5/App）。
   • 小程序限制单包 2MB，需压缩资源。

---

六、实战示例

1. 跨端登录封装

export function login() {
  return new Promise((resolve, reject) => {
    #ifdef H5
    // H5 跳转 OAuth 页面
    window.location.href = 'https://api.example.com/oauth';
    #endif
    #ifdef MP-WEIXIN
    wx.login({ success: resolve, fail: reject });
    #endif
    #ifdef APP-PLUS
    uni.login({ provider: 'weixin', success: resolve, fail: reject });
    #endif
  });
}

2. 样式兼容（Flex 布局）

/* 通用样式 */
.container {
  display: flex;
  #ifdef MP-WEIXIN
  /* 小程序需加前缀 */
  display: -webkit-flex;
  #endif
}

---

七、推荐工具与插件

1. UI 框架：
   • uView UI：跨端组件库。
   • ThorUI：高性能模板。
2. 插件市场：
   • 支付插件：uni-pay
   • 地图插件：uni-map

---

总结

UniApp 跨三端开发的核心是：

1. 统一能统一的（如业务逻辑、UI 组件）。
2. 隔离需隔离的（如平台 API、性能优化）。
3. 测试全覆盖：真机验证各端行为。

通过合理设计代码结构、善用条件编译和分层适配，可高效实现“一次开发，多端发布”。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24