vue2改成vue3
3***@qq.com
- 发布：2025-06-13 15:22
- 更新：2025-06-13 17:23
- 阅读：288
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 4.71
手机系统： Android
手机系统版本号： Android 16
手机厂商： 华为
手机机型： mate40 pro
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
不要全屏，和vue2效果一致
不要全屏，和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的大老爷们儿，给看看咋处理呗！
4 个回复
蔡cai - 开发的插件：https://ask.dcloud.net.cn/article/41539
帮你多邀请几个官方的
DCloud_UNI_yuhe
你使用这个非全屏的场景是什么？
3***@qq.com (作者)
我就是个普通APP，要啥全屏呢？
2025-06-13 16:08
DCloud_UNI_yuhe
回复 3***@qq.com: 你这个全屏是什么意思？你使用 vue2 开发 app 不也是全屏？
2025-06-13 16:19
3***@qq.com (作者)
回复 DCloud_UNI_yuhe: 就是状态栏要出现，不是所谓的沉浸式，vue2状态栏是正常出现的，改成vue3就遮住状态栏了， "immersed" : false 这个设置vue2下生效，vue3下无效
2025-06-13 16:33
DCloud_UNI_yuhe
回复 3***@qq.com: 你提供一下图片说明
2025-06-13 16:41
3***@qq.com (作者)
回复 DCloud_UNI_yuhe: 回复在下面了
2025-06-13 17:02
3***@qq.com (作者)
vue2，正常：
vue3, 不正常：
DCloud_UNI_yuhe
你这 顶部的状态栏是你自定义的吧，你得看具体的代码逻辑有啥问题
2025-06-13 17:14
3***@qq.com (作者)
回复 DCloud_UNI_yuhe: 我们这个所有内容都是一个网页，在webview里，现在顶到状态栏里了
2025-06-13 17:15
3***@qq.com (作者)
现在问题是为啥vue2正常，改成vue3就不正常了，怎么设置才能正常？
2025-06-13 17:17
DCloud_UNI_yuhe
回复 3***@qq.com: 使用 --status-bar-height https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-%E5%8F%98%E9%87%8F
2025-06-13 17:31
3***@qq.com (作者)
回复 DCloud_UNI_yuhe: 这种方式试过了，是有效，但是带来另外一个问题，不能设置状态栏的背景色了，plus.navigator.setStatusBarBackground('#ff66ff'); 不起作用，导致顶部不协调，割裂感
2025-06-13 17:35
3***@qq.com (作者)
一般来说，状态栏背景色和APP顶部背景色是一致的，才协调
2025-06-13 17:36
DCloud_UNI_yuhe
回复 3***@qq.com: css 样式里面不能设置颜色？
2025-06-13 17:45
3***@qq.com (作者)
回复 DCloud_UNI_yuhe: 要动态设置，用户可以自定义颜色，APP加载时根据定义的颜色动态设置
2025-06-13 17:49
3***@qq.com (作者)
页面很简单，就这么点：
<template>
<view>
<web-view :src="src" @message="getH5Message"></web-view>
</view>
</template>