uni-app android13 白屏问题 只显示TAB不显示页面内容

在 Uni-App 开发中，遇到 Android 13 设备上只显示 TabBar 但页面内容白屏的问题，可能是由于多种原因引起的。以下是一些常见的排查和解决方法：

1. 检查页面路由配置

确保 pages.json 中的路由配置正确，尤其是 TabBar 页面的路径和组件路径是否匹配。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/user/user",
      "style": {
        "navigationBarTitleText": "用户中心"
      }
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/user/user",
        "text": "用户中心"
      }
    ]
  }
}

2. 检查页面组件是否存在

确保 TabBar 对应的页面组件（如 index.vue 或 user.vue）存在，并且路径正确。

3. 检查页面生命周期

在页面组件的 onLoad 或 onShow 生命周期中，检查是否有逻辑导致页面渲染失败。例如：

export default {
  onLoad() {
    console.log('页面加载');
  },
  onShow() {
    console.log('页面显示');
  }
}

如果这些生命周期函数没有执行，可能是路由跳转或页面加载出了问题。

4. 检查样式问题

确保页面样式没有导致内容被隐藏。例如，检查是否有以下问题：

• display: none 或 visibility: hidden 导致内容不可见。
• 高度或宽度为 0，导致内容无法显示。

5. 检查网络请求

如果页面内容依赖网络请求，确保请求成功并正确渲染数据。可以在请求失败时添加错误处理逻辑：

uni.request({
  url: 'https://example.com/api/data',
  success: (res) => {
    console.log('请求成功', res.data);
  },
  fail: (err) => {
    console.error('请求失败', err);
  }
});