在使用 Vue 3 + UniApp 开发跨平台应用（兼容小程序、H5、安卓和 iOS）时，开发者可能会遇到一些常见的兼容性问题。以下是基于最新搜索结果的踩坑记录和解决方案：

1. 屏幕适配与样式问题

• 字体大小适配：在 App.vue 中动态设置 font-size，但需要注意 H5 平台的样式编译规则。可以通过 CSS 变量和全局样式文件来解决。

  document.documentElement.style.setProperty("--global-font-size", width / 750 + 'px');
  

  在 public.css 中定义全局变量：

  html {
    --global-font-size: 0.45px;
  }
  

• 状态栏和安全区域适配：通过 uni.getSystemInfo 获取状态栏高度和安全区域信息，并动态设置样式。

  uni.getSystemInfo({
    success: (res) => {
      document.documentElement.style.setProperty("--statusBarHeight", res.statusBarHeight + 'px');
      if (res.platform === "ios") {
        document.documentElement.style.setProperty("--safe-area", res.screenHeight - res.safeArea.bottom + 'px');
      }
    }
  });
  

• 样式兼容性：小程序端不支持某些 CSS 选择器（如 * 通配符），需要避免使用。

2. 事件处理问题

• position: fixed 在 iOS 上失效：iOS 的 position: fixed 是基于最近的滚动容器定位的。如果需要在滚动视图中使用固定定位，可以通过自定义样式（如 overflow: auto）来实现。

3. 网络请求问题

• 跨平台请求适配：使用 axios 时，需要为小程序适配请求适配器。

  import axios from 'axios';
  import axiosMiniprogramAdapter from 'axios-miniprogram-adapter';
  axios.defaults.adapter = axiosMiniprogramAdapter;
  

4. 表单与数据处理问题

• 表单数据序列化问题：在处理表单数据时，可能会遇到 TypeError: Converting circular structure to JSON 的问题。需要确保表单数据中没有循环引用。

5. UI 组件与交互问题

• 按钮默认边框样式去除：在小程序和 H5 中，按钮默认会有边框样式，可以通过以下样式去除：

  button::after {
    border: none;
  }
  

• 自定义 Tabbar：如果项目中使用了自定义 Tabbar，需要在每个 Tabbar 页面的 onShow 方法中调用 uni.hideTabBar()。

6. 性能与渲染问题

• 渲染优化：避免使用过于复杂的样式和动画效果，以减少渲染负担。针对不同平台的渲染机制进行适配，例如调整 CSS 样式。
• 图片加载优化：在 H5 平台中，优化图片加载和页面渲染逻辑，提升页面加载速度。

7. 平台判断与条件编译

• 编译期判断：使用条件编译来区分不同平台的代码。

  // #ifdef H5
  console.log('H5 平台');
  // #endif
  

• 运行期判断：通过 uni.getSystemInfoSync() 获取平台信息，并动态调整逻辑。

  const platform = uni.getSystemInfoSync().platform;
  if (platform === 'android') {
    console.log('运行在 Android 上');
  } else if (platform === 'ios') {
    console.log('运行在 iOS 上');
  }
  

总结

在使用 Vue 3 + UniApp 开发跨平台应用时，开发者需要关注屏幕适配、事件处理、网络请求、表单数据处理、UI 组件交互以及性能优化等问题。通过合理使用条件编译、动态样式、平台判断等技术手段，可以有效解决跨平台兼容性问题，提升用户体验。