uni-app默认初始项目真机运行Android内容不显示白屏且导航栏不显示只有tabbar显示

uni-app默认初始项目真机运行Android内容不显示白屏且导航栏不显示只有tabbar显示

hbuilder版本：4.24  
设备版本：android 11 ，Android system webview 83.2  
项目：v2  

新建项目后，运行到设备上表现为白屏。tabbar可以正常显示。  
App.vue生命周期onLaunch onShow onHide里的打印也都有执行。就是.vue不显示。.nvue是可以正常显示。  
官方提供的hellow uni-app也是只有首页可以正常显示，其他.vue页面不显示。  
使用x5的webview获取到的ua里一直没有MQQBrowser，一直用的是系统内核。  
附件是运行日志。

| 信息类型 | 信息内容 |
|----------|----------|
| 开发环境 | hbuilder版本：4.24 |
|          | 设备版本：android 11 ，Android system webview 83.2 |
| 项目     | 项目：v2 |

更多关于uni-app默认初始项目真机运行Android内容不显示白屏且导航栏不显示只有tabbar显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app默认初始项目真机运行Android内容不显示白屏且导航栏不显示只有tabbar显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


针对你提到的uni-app在真机运行Android时出现内容不显示（白屏）且导航栏不显示只有tabBar显示的问题，这通常涉及到页面渲染、组件加载或者配置问题。下面是一些可能的代码检查和调整方案，帮助你定位和解决这一问题。

1. 检查manifest.json配置

确保manifest.json中关于App的配置正确，特别是与状态栏和导航栏相关的设置。

{
  "mp-weixin": {},
  "app-plus": {
    "distribute": {},
    "usingComponents": true,
    "window": {
      "defaultTitle": "应用名称",
      "navigationBarTitleText": "首页",
      "navigationBarBackgroundColor": "#FFFFFF",
      "navigationBarTextStyle": "black",
      "backgroundTextStyle": "light",
      "enablePullDownRefresh": false
    },
    "tabBar": {
      "color": "#7A7E83",
      "selectedColor": "#3cc51f",
      "borderStyle": "black",
      "backgroundColor": "#ffffff",
      "list": [
        // tabBar列表配置
      ]
    }
  }
}

2. 检查pages.json配置

确保pages.json中页面路径正确，且页面组件正确加载。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": false
      }
    },
    // 其他页面配置
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      // 其他tab项配置
    ]
  }
}

3. 检查页面组件代码

确保页面组件（如pages/index/index.vue）中有实际内容渲染，且没有导致渲染失败的错误。

<template>
  <view>
    <text>Hello, uni-app!</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 页面数据
    };
  },
  onLoad() {
    // 页面加载逻辑
  }
};
</script>

<style>
/* 页面样式 */
</style>

4. 调试和日志

使用Android Studio或uni-app提供的真机调试工具，查看应用运行时的日志输出，检查是否有错误或警告信息，这有助于进一步定位问题。

总结

确保配置文件正确无误，页面组件正确渲染，以及利用调试工具查看日志输出，是解决此类问题的关键步骤。如果以上检查均无误，但问题依旧存在，可能需要考虑是否有第三方插件或库导致的兼容性问题，或者尝试清理项目并重新构建。

回到顶部