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

发布于 1周前 作者 sinazl 来自 Uni-App

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

产品分类:

uniapp/App

PC开发环境操作系统:

Windows

PC开发环境操作系统版本号:

win11

HBuilderX类型:

正式

HBuilderX版本号:

4.24

手机系统:

Android

手机系统版本号:

Android 11

手机厂商:

未知

手机机型:

未知

页面类型:

vue

vue版本:

vue2

打包方式:

云端

项目创建方式:

HBuilderX

示例代码:

无代码

操作步骤:

必现

预期结果:

内容显示

实际结果:

内容不显示

bug描述:

初始项目,真机运行Android内容不显示,导航栏也不显示,只有tabbar显示。第一次运行到真机上时:提示android system webview屡次被禁止。android system webview版本为83.几


9 回复

真机设备上面是否安装了杀毒软件、安全管家等


没有。杀毒软件、安全管家什么也没有。而且我使用离线打包放到android studio运行也不行。但是我换个设备不管是通过hbuilderx运行还是离线打包都可以正常显示。

回复 1***@qq.com: 提供一些更详细的设备信息

你好, 可以试一下设置webview的最低版本设置 webview 设置。

感谢你的解决方案,但是依然没有解决我的问题。内容区域还是显示白屏。

回复 1***@qq.com: 提供一下更详细的设备信息, 然后抓一下日志发一下

回复 BFC: 目前nvue是可以正常运行的 当通过tabbar跳转到vue页面时会提示:Waiting to navigate to: /pages/test/test, do not operate continuously: /pages/index/index. 具体运行日志的话是什么日志?

是这个日志嘛

在使用uni-app开发应用时,遇到真机运行Android时内容不显示、导航栏也不显示,但TabBar显示的问题,通常与页面的样式设置或者页面结构有关。以下是一些可能导致此问题的代码检查点和修正示例:

1. 检查pages.json配置

首先确保pages.json中页面配置正确,特别是navigationBarTitleTextnavigationBarBackgroundColor等属性是否设置。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#FFFFFF",
        "navigationBarTextStyle": "black"
      }
    },
    // 其他页面配置...
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      // 其他tab项...
    ]
  }
}

2. 检查页面样式

确保页面内容没有被CSS样式隐藏或者定位到了屏幕之外。例如,检查是否有全局或页面特定的CSS规则设置了display: none;visibility: hidden;position: absolute; top: -9999px;等。

/* 示例:避免隐藏内容 */
page {
  display: block;
  visibility: visible;
  position: static; /* 或者根据需求设置合适的定位 */
}

3. 使用条件编译

检查是否有条件编译代码块错误地排除了Android平台的代码。

// #ifdef APP-PLUS
// 特定于App平台的代码,确保这部分代码包含了对Android的支持
// #endif

4. 检查App.vue或main.js

确保App.vue或main.js中没有逻辑错误导致页面内容未能正确渲染。

// main.js 示例
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

5. 清理和重建项目

有时候,简单的清理和重建项目可以解决缓存或构建过程中引入的问题。

# 清理并重建
npm run clean # 如果有定义清理脚本
npm run dev:mp-weixin # 或者其他平台构建命令,根据需求调整

确保以上配置和代码无误后,再次尝试在Android真机上运行应用。如果问题依旧存在,建议检查uni-app和HBuilderX的更新日志,看是否有相关的已知问题和修复。同时,也可以考虑在开发者社区寻求更具体的帮助。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!