<template>
<view class="">
<web-view
id="web-view"
ref="webview"
:src="orderUrl"
@message="handleMessage"
></web-view>
</view>
</template>
<script>
export default {
name: 'applyToJoin',
data() {
return {
orderUrl: 'https://hellouniapp.dcloud.net.cn/pages/tabBar/extUI/extUI'
// userInfo: uni.getStorageSync('userInfo') || {},
};
},
onLoad() {
const userInfo = uni.getStorageSync('userInfo');
// this.orderUrl = `${config.orderUrl}/#/?phone=${userInfo.phone}`;
},
methods: {
handleMessage(e) {
if (e && e.detail && e.detail.data) {
const data = e.detail.data[0];
if (data.action === 'goBack') {
uni.navigateBack();
}
}
}
},
onUnload() {}
};
</script>
6***@qq.com
- 发布：2025-07-25 09:45
- 更新：2025-07-25 11:09
- 阅读：302
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： sequoia 15.5
HBuilderX类型： 正式
HBuilderX版本号： 4.75
手机系统： Android
手机系统版本号： Android 13
手机厂商： 小米
手机机型： 红米note 13
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
如上，我直接新建了一个项目引入h5的地址，直接在代码在附件里面可以运行。
如上，我直接新建了一个项目引入h5的地址，直接在代码在附件里面可以运行。
预期结果：
h5的navbar不与状态栏重合
h5的navbar不与状态栏重合
实际结果：
h5的navbar与状态栏重合
h5的navbar与状态栏重合
bug描述：
真机测试的时候打到手机上的app通过web-view引用同为uniapp开发的h5的页面，安卓端h5的页面导航栏获取不到status-bar的高度，但是iOS是可以的，为啥？我用plus.navigator.getStatusbarHeight()是可以获取到的，但是uni自带的那些方法还有变量都是为0。我其实就是想解决一下跳入h5页面，app和h5存在双navbar的问题，所以app的web-view页面的的导航栏我设置为custom，使用h5的navbar，但是安卓端的navbar直接冲顶了，跟状态栏重叠在一起。
如图。
6***@qq.com (作者)
我认为pages.json导航栏不需要再去特殊处理吧,不是会自动去获取状态栏的高度吗？为什么还要去获取高度？我给的demo是可以验证到我说的这种问题，在web-view引用的h5页面，具体状态栏高度获取用uni.getSystemInfoSync().statusBarHeight 和 plus.navigator.getStatusbarHeight() 对比就行，安卓的手机用plus.可以获取到，uni.的获取不到状态栏高度，但是iOS是可以的。
2025-07-25 17:12
DCloud_UNI_yuhe
回复 6***@qq.com: 等我看一下这个问题的
2025-07-25 19:06