Uniapp 多端适配指南：H5、小程序与 App

1. 引言

Uniapp 作为一个跨端开发框架，可以同时支持 H5、微信小程序、iOS 和 Android App。然而，由于不同平台的特性差异，代码需要针对性地进行适配。本教程将介绍 Uniapp 多端适配的核心方法，帮助开发者构建真正兼容多端的应用。

2. 平台差异概览

3. 通用适配方案

3.1 平台判断

Uniapp 提供 uni.getSystemInfoSync() 和 process.env.UNI_PLATFORM 来获取当前平台信息。

const systemInfo = uni.getSystemInfoSync();
const platform = process.env.UNI_PLATFORM;
console.log('当前平台：', platform);

3.2 条件编译

条件编译是 Uniapp 处理多端差异的核心方式。

// #ifdef H5
console.log('H5 端代码');
// #endif

// #ifdef MP-WEIXIN
console.log('微信小程序端代码');
// #endif

// #ifdef APP-PLUS
console.log('App 端代码');
// #endif

4. 具体适配方案

4.1 适配 H5

• 处理浏览器兼容性，例如 localStorage、sessionStorage。
• 处理返回事件，例如 uni.navigateBack() 需要额外兼容 window.history.back()。

4.2 适配小程序

• 使用小程序 API 时，建议用 uni.xxx 而不是 wx.xxx，保证兼容性。
• 组件和 DOM 结构不同，例如 swiper 在小程序中的 bindchange 事件对应 @change。

4.3 适配 App

• 需要调用原生 API，如 push 通知、文件存储等。
• 使用 plus 对象处理原生能力，例如 plus.navigator.closeSplashscreen();。

5. 运行与优化

1. 在 manifest.json 中配置不同平台的相关参数。
2. 使用 uni.getSystemInfo() 获取设备信息，进行自适应调整。
3. 结合 flex 和 rpx 单位，保证不同设备上的 UI 适配。

6. 结论

本教程介绍了 Uniapp 的多端适配方法，包括平台判断、条件编译以及具体的 H5、小程序和 App 适配方案。通过这些技巧，你可以开发出更兼容、更高效的跨平台应用。