fix(h5): hide in-page nav titles that duplicate WeChat chrome
CI / verify (pull_request) Has been cancelled

Keep back buttons and header layout. mini-user only hides titles on H5; partner/shop hide .app-page-title and legal titles; shared PageHeader defaults showTitle=false.
This commit is contained in:
2026-07-16 08:05:44 +08:00
parent 7b14f4a0cc
commit 5a26841d3a
10 changed files with 66 additions and 16 deletions
+8
View File
@@ -3065,3 +3065,11 @@ body {
padding-top: 12px;
border-top: 1px dashed rgba(166, 29, 36, 0.15);
}
/* 微信 H5 系统标题已展示:隐藏页内重复标题,保留返回键与顶栏布局 */
.app-page-title {
visibility: hidden;
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
}
+5 -2
View File
@@ -35,8 +35,11 @@
.legal-h5-title {
margin: 0;
font-size: 17px;
font-weight: 600;
/* 与微信系统标题重复,仅保留顶栏高度与返回 */
visibility: hidden;
font-size: 0;
line-height: 0;
color: transparent;
}
.legal-h5-body {
+8
View File
@@ -2702,3 +2702,11 @@
cursor: pointer;
}
/* 微信 H5 系统标题已展示:隐藏页内重复标题,保留返回键与顶栏布局 */
.app-page-title {
visibility: hidden;
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
}
+5 -2
View File
@@ -35,8 +35,11 @@
.legal-h5-title {
margin: 0;
font-size: 17px;
font-weight: 600;
/* 与微信系统标题重复,仅保留顶栏高度与返回 */
visibility: hidden;
font-size: 0;
line-height: 0;
color: transparent;
}
.legal-h5-body {
+6 -2
View File
@@ -10,6 +10,8 @@ type PageNavBarProps = {
right?: ReactNode;
};
const isH5 = process.env.TARO_ENV === 'h5';
/** 内页自定义导航栏(返回 + 标题 + 右侧操作),适配刘海屏 */
export default function PageNavBar({
title,
@@ -19,16 +21,18 @@ export default function PageNavBar({
right,
}: PageNavBarProps) {
const metrics = useNavBarMetrics();
const showTitle = !isH5 && titleVisible;
return (
<View
className={`page-nav-bar${solid ? ' page-nav-bar--solid' : ''}`}
style={subPageNavBarStyle(metrics)}
aria-label={title}
>
<Text
className={`page-nav-bar__title${titleVisible ? ' page-nav-bar__title--visible' : ''}`}
className={`page-nav-bar__title${showTitle ? ' page-nav-bar__title--visible' : ''}`}
>
{title}
{showTitle ? title : ''}
</Text>
<View
className="page-nav-bar__content"
@@ -9,6 +9,8 @@ type SubPageHeaderProps = {
right?: ReactNode;
};
const isH5 = process.env.TARO_ENV === 'h5';
/** 子页面固定实底顶栏(确认订单 / 地址 / 支付 / 订单列表等) */
export default function SubPageHeader({ title, onBack, right }: SubPageHeaderProps) {
const metrics = useNavBarMetrics();
@@ -27,8 +29,8 @@ export default function SubPageHeader({ title, onBack, right }: SubPageHeaderPro
}
return (
<View className="sub-page-header" style={subPageNavBarStyle(metrics)}>
<Text className="sub-page-header__title">{title}</Text>
<View className="sub-page-header" style={subPageNavBarStyle(metrics)} aria-label={title}>
{!isH5 ? <Text className="sub-page-header__title">{title}</Text> : null}
<View
className="sub-page-header__content"
style={subPageNavContentStyle(metrics)}
@@ -7,13 +7,15 @@ type TabMainHeaderProps = {
extra?: ReactNode;
};
/** Tab 页顶栏:适配刘海屏 + 微信胶囊避让 */
const isH5 = process.env.TARO_ENV === 'h5';
/** Tab 页顶栏:适配刘海屏 + 微信胶囊避让;H5 不展示标题(与微信系统标题重复) */
export default function TabMainHeader({ title, extra }: TabMainHeaderProps) {
const metrics = useNavBarMetrics();
return (
<View className="tab-main-header" style={navBarStyle(metrics)}>
<Text className="tab-main-header__title">{title}</Text>
<View className="tab-main-header" style={navBarStyle(metrics)} aria-label={title}>
{!isH5 ? <Text className="tab-main-header__title">{title}</Text> : null}
<View
className="tab-main-header__content"
style={tabNavContentStyle(metrics)}
+4 -2
View File
@@ -63,8 +63,10 @@ export default function BenefitPage() {
return (
<PageShell variant="tab" className="benefit-page">
<View className="benefit-header" style={navBarStyle(metrics)}>
<Text className="benefit-header-title"></Text>
<View className="benefit-header" style={navBarStyle(metrics)} aria-label="好客权益">
{process.env.TARO_ENV !== 'h5' ? (
<Text className="benefit-header-title"></Text>
) : null}
<View
className="benefit-header__content"
style={tabNavContentStyle(metrics)}