去年等到今年更新了无数个版本uni-app HBuilderx的这个bug始终没解决

去年等到今年更新了无数个版本uni-app HBuilderx的这个bug始终没解决

操作步骤：

  • vue2改成vue3

预期结果：

  • 不要全屏，和vue2效果一致

实际结果：

  • 全屏

bug描述：

vue3下无论怎么设置，APP运行都是全屏，然后强行用代码调整

wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
    top: info.statusBarHeight, //此处是距离顶部的高度，应该是你页面的头部
    height: info.windowHeight - info.statusBarHeight, //webview的高度
});
plus.navigator.setFullscreen(false);

虽然不是全屏了，但是设置状态栏的背景色死活不生效；

plus.navigator.setStatusBarBackground('#ff66ff');  ---不起作用

如果改成vue2，则就不是全屏了，也不需要这些代码，运行的好好的，问题是现在要编译鸿蒙APP，必须是vue3，偏偏遇到这个全屏问题，搞不懂，dcloud的大老爷们儿，给看看咋处理呗！


### 表格
| 信息类别     | 信息内容         |
|--------------|------------------|
| 产品分类     | uniapp/App       |
| PC开发环境   | Windows          |
| PC操作系统版本 | win10            |
| HBuilderX类型 | 正式             |
| HBuilderX版本 | 4.71             |
| 手机系统     | Android          |
| 手机系统版本 | Android 16       |
| 手机厂商     | 华为             |
| 手机机型     | mate40 pro       |
| 页面类型     | vue              |
| vue版本      | vue3             |
| 打包方式     | 云端             |
| 项目创建方式 | HBuilderX        |

更多关于去年等到今年更新了无数个版本uni-app HBuilderx的这个bug始终没解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html

18 回复

帮你多邀请几个官方的

更多关于去年等到今年更新了无数个版本uni-app HBuilderx的这个bug始终没解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你使用这个非全屏的场景是什么？

我就是个普通APP，要啥全屏呢？

回复 3***@qq.com: 你这个全屏是什么意思？你使用 vue2 开发 app 不也是全屏？

回复 DCloud_UNI_yuhe: 就是状态栏要出现，不是所谓的沉浸式，vue2状态栏是正常出现的，改成vue3就遮住状态栏了， “immersed” : false 这个设置vue2下生效，vue3下无效

回复 3***@qq.com: 你提供一下图片说明

回复 DCloud_UNI_yuhe: 回复在下面了

vue2，正常：

vue3, 不正常：

你这 顶部的状态栏是你自定义的吧，你得看具体的代码逻辑有啥问题

回复 DCloud_UNI_yuhe: 我们这个所有内容都是一个网页，在webview里，现在顶到状态栏里了

现在问题是为啥vue2正常，改成vue3就不正常了，怎么设置才能正常？

回复 3***@qq.com: 使用 --status-bar-height https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-变量

回复 DCloud_UNI_yuhe: 这种方式试过了，是有效，但是带来另外一个问题，不能设置状态栏的背景色了，plus.navigator.setStatusBarBackground(’#ff66ff’); 不起作用，导致顶部不协调，割裂感

一般来说，状态栏背景色和APP顶部背景色是一致的，才协调

回复 3***@qq.com: css 样式里面不能设置颜色？

回复 DCloud_UNI_yuhe: 要动态设置，用户可以自定义颜色，APP加载时根据定义的颜色动态设置

页面很简单，就这么点： <template> <view> <web-view :src=“src” @message=“getH5Message”></web-view> </view> </template>

这是一个在uni-app中从Vue2迁移到Vue3时遇到的WebView全屏显示和状态栏配置问题。

在Vue3环境下，APP默认会全屏显示，需要通过代码手动调整布局。你使用的wv.setStyle方法正确设置了WebView的位置和高度，plus.navigator.setFullscreen(false)也成功取消了全屏模式。

状态栏背景色不生效的主要原因是：当使用setFullscreen(false)退出全屏后，状态栏的绘制控制权回到了系统层面。此时plus.navigator.setStatusBarBackground可能无法直接生效。

建议的解决方案：

  1. 使用原生导航栏配置：在pages.json中配置页面样式
{
  "pages": [{
    "path": "pages/your_page",
    "style": {
      "navigationBarTitleText": "页面标题",
      "navigationBarBackgroundColor": "#ff66ff"
    }
  }]
}
  1. 检查沉浸式状态栏设置：确保在manifest.json中正确配置
{
  "plus": {
    "statusbar": {
      "immersed": false
    }
  }
}
  1. 调整代码执行时机：确保状态栏设置代码在页面完全加载后执行
onMounted(() => {
  setTimeout(() => {
    plus.navigator.setStatusBarBackground('#ff66ff');
  }, 100);
});
回到顶部