最可靠方法是在 pages.json 对应页面 style 中添加 H5 条件编译 titleNView: false,可彻底移除 uni-app 渲染的 H5 标题栏(含返回按钮、标题文字、胶囊),不依赖 JS 隐藏,不影响小程序和 App;禁用 navigationStyle: "custom" 以防小程序内容被状态栏遮挡及 H5 失去原生导航手势。

pages.json 里配 titleNView: false 最可靠
直接在对应页面的 pages.json 的 style 下加 H5 条件编译,就能彻底移除 H5 端由 uni-app 渲染的标题栏(含返回按钮、标题文字、胶囊),且不影响小程序和 App:
-
titleNView: false只对 H5 和 App 生效,小程序完全不受影响,原生导航照常显示 - 它不是靠 JS 隐藏 DOM,而是编译时跳过导航栏渲染逻辑,无渲染时机问题,也不依赖
onReady或setTimeout - 若全局所有 H5 页面都要去标题栏,可写在
h5子对象下;单页配置则放该页面 path 的style内
示例(单页):
{
"path": "pages/login/login",
"style": {
"h5": {
"titleNView": false
}
}
}
别用 navigationStyle: "custom" 单为去 H5 标题栏
这个配置会强制所有平台(包括微信小程序)关闭原生导航栏,但后果严重:
- 小程序端页面内容会顶到状态栏下,第一行文字被时间/信号图标遮住
- H5 端失去浏览器原生前进/后退手势支持,
history.back()虽可用,但体验割裂 - 你得自己实现标题、返回逻辑、安全区适配,成本远超需求
除非你本就计划全平台统一自定义导航,否则纯为“去个 H5 标题”开 custom 是典型过度设计。
DOM 操作隐藏只适合「保留标题但藏返回按钮」的边缘场景
如果必须保留 H5 标题文字,仅隐藏左上角返回按钮,才考虑操作 DOM:
- 目标元素是
.uni-page-head-hd,但不能在mounted立即查——H5 下它异步挂载,得等onReady+setTimeout(0)或this.$nextTick - 直接设
display: none会把整个头部(含标题)干掉;若只藏按钮,应更精确:.uni-page-head-hd .uni-icon-back - 注意:此法不解决微信浏览器自身的顶部标题栏(
<title>显示部分),双标题问题仍存在
微信 H5 双标题问题要单独处理
微信浏览器自带顶部导航栏(显示 <title>),uni-app 又渲染一个 <uni-page-head>,导致两层标题并存:
-
titleNView: false能干掉后者,但前者(微信原生栏)无法通过前端代码隐藏 - 若需视觉统一,只能改
<title>标签内容,或在微信开发者工具中确认是否启用了「网页顶部导航栏」相关设置(部分企业微信或内嵌 WebView 可控) - 真要彻底抹除双标题感,唯一稳妥路径是服务端配合,让页面以 PWA 或独立 Tab 打开,绕过微信浏览器限制
真正容易被忽略的是:H5 的标题栏是 uni-app 自己 patch 的 DOM,而微信浏览器顶部那条是你完全不可控的系统级 UI —— 两者不在同一控制域,不能指望一个配置同时搞定。


















