uni-app 移动端开发用hbuilder自带的调试工具Webview打开页面时 项目的tabbar和标题导航项消失 只显示内容 真机或者模拟器上可以正常看到

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

uni-app 移动端开发用hbuilder自带的调试工具Webview打开页面时 项目的tabbar和标题导航项消失 只显示内容 真机或者模拟器上可以正常看到

示例代码

{  
    "pages": [ 
        {  
            "path": "pages/index/index",  
            "style": {  
                "navigationBarTitleText": "首页1"  
            }  
        },  
        {  
            "path": "pages/configuration/configuration",  
            "style": {  
                "navigationBarTitleText": "云组态1"  
            }  
        },  
        {  
            "path": "pages/user/user",  
            "style": {  
                "navigationBarTitleText": "我的1"  
            }  
        }  
    ],  
    "tabBar": {  
        "color": "#707070",  
        "selectedColor": "#1890FF",  
        "list": [{  
                "pagePath": "pages/index/index",  
                "iconPath": "static/image/index.png",  
                "selectedIconPath": "static/image/index_se.png",  
                "text": "首页2"  
            },  
            {  
                "pagePath": "pages/configuration/configuration",  
                "iconPath": "static/image/configuration.png",  
                "selectedIconPath": "static/image/configuration_se.png",  
                "text": "云组态2"  
            },  
            {  
                "pagePath": "pages/user/user",  
                "iconPath": "static/image/user.png",  
                "selectedIconPath": "static/image/user_se.png",  
                "text": "我的2"  
            }  
        ]  
    },  
    "globalStyle": {  
        "navigationBarTextStyle": "black",  
        "navigationBarTitleText": "uni-app",  
        "navigationBarBackgroundColor": "#F8F8F8",  
        "backgroundColor": "#F8F8F82"  
    },  
    "uniIdRouter": {}  
}

操作步骤

  1. 新建tabBar对应的三组页面
  2. 配置pages.json

预期结果

显示标题导航栏，内容，tabBar三个模块

实际结果

hbuilder自带的移动端inspect调试页面只显示内容，真机调试正常显示三个模块

Bug描述

【报Bug】移动端开发用hbuilder自带的调试工具Webview打开页面，项目的tabbar和标题导航项消失，只显示内容，真机或者模拟上可以正常看到

Image Image Image

开发环境信息

项目创建方式 PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 手机系统 手机系统版本号 手机厂商 手机机型 页面类型 vue版本 打包方式
HBuilderX Windows Windows 10 专业版 正式 3.8.4 Android Android 10 vivo V2057A vue vue3 离线

Harmonyos Next教程
3 回复

已解决。 通过咨询其他人得到的结果：原生组件在chrome调试中不显示。


你调试的一个具体的页面，具体的页面不包含其他页面结构

在uni-app开发过程中，遇到使用HBuilder自带的调试工具（如HBuilderX的内置Webview）打开页面时，项目的tabbar和标题导航项消失的问题，通常是由于调试环境与真机或模拟器环境渲染差异导致的。这类问题通常不会影响到最终发布的App，但确实会影响开发过程中的调试效率。

以下是一个可能的解决方案，通过代码示例展示如何在页面切换时手动管理tabbar和标题导航项的显示状态。虽然这不能直接解决HBuilderX调试工具的问题，但提供了一种思路，即在特定情况下手动控制UI组件的显示。

示例代码

  1. 确保每个页面组件正确注册

    确保你的每个页面都在pages.json中正确注册，并且tabbar项也配置正确。

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

  2. 在页面脚本中管理tabbar显示（如果需要）

    虽然uni-app通常自动管理tabbar，但在某些特殊情况下，你可能需要手动控制。这可以通过全局状态管理（如Vuex）或在页面间传递参数来实现。以下是一个简单的示例，展示如何在页面加载时检查并尝试恢复tabbar：

    // 假设你有一个全局状态管理来控制tabbar显示
const store = {
  state: {
    showTabBar: true
  },
  mutations: {
    setTabBarVisibility(state, visibility) {
      state.showTabBar = visibility;
    }
  }
};

// 在页面加载时检查tabbar状态
export default {
  mounted() {
    if (!store.state.showTabBar) {
      // 这里可以根据需要恢复tabbar显示，比如通过导航到首页
      uni.switchTab({ url: '/pages/index/index' });
    }
  }
};

  3. 调试建议

    • 确保HBuilderX和uni-app框架都是最新版本，因为新版本可能修复了旧版本的bug。
    • 尝试使用不同的浏览器或WebView环境进行调试，看是否能复现问题，这有助于确定问题是否与特定环境相关。
    • 如果问题依旧存在，考虑在uni-app社区或GitHub仓库提交issue，寻求官方或社区的帮助。

请注意，上述代码主要提供了一种可能的解决方案思路，并非直接针对HBuilderX调试工具问题的官方解决方案。在实际开发中，应根据具体情况调整代码。

回到顶部