fix(h5): 统一 nh=1 与 sbh 顶距逻辑,与 index.html 首屏一致

applyMpEmbedDom 在原生顶栏模式读取 session sbh;补充 nh+sbh 单测。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jackyu66git
2026-08-25 04:21:52 +08:00
co-authored by Cursor
parent e7290ed726
commit fc53be22f8
2 changed files with 34 additions and 9 deletions
+14
View File
@@ -4,6 +4,9 @@ import { applyMpEmbedDom, initMpEmbed, isMpEmbed, isMpNativeHeader } from './mpE
describe('mpEmbed', () => {
beforeEach(() => {
sessionStorage.clear()
document.documentElement.className = ''
document.documentElement.style.removeProperty('--yxg-safe-top')
document.documentElement.style.removeProperty('--yxg-page-top')
window.history.replaceState({}, '', '/psy/')
})
@@ -37,6 +40,17 @@ describe('mpEmbed', () => {
expect(document.documentElement.style.getPropertyValue('--yxg-page-top')).toBe('4px')
})
it('applies sbh in native header mode with ?nh=1&sbh=', () => {
window.history.replaceState({}, '', '/psy/?mp=1&nh=1&sbh=12')
initMpEmbed()
expect(isMpNativeHeader()).toBe(true)
expect(sessionStorage.getItem('yxg_sbh')).toBe('12')
expect(document.documentElement.style.getPropertyValue('--yxg-page-top')).toBe('12px')
window.history.replaceState({}, '', '/psy/?mp=1&nh=1')
applyMpEmbedDom()
expect(document.documentElement.style.getPropertyValue('--yxg-page-top')).toBe('12px')
})
it('returns false without mp query', () => {
initMpEmbed()
expect(isMpEmbed()).toBe(false)
+20 -9
View File
@@ -7,12 +7,16 @@ const SBH_KEY = 'yxg_sbh'
const HEADER_H_PX = 50
const MP_CONTENT_TOP_PX = 4
/** Native cover-view handles logo; H5 only needs a tiny gap below web-view top. */
function applyNativeHeaderMode(): void {
/** 小程序顶栏在 web-view 外,H5 内容区仅留极小顶距 */
function applyNativeHeaderInset(topPx: number): void {
if (typeof document === 'undefined') return
const root = document.documentElement
root.style.setProperty('--yxg-safe-top', '0px')
root.style.setProperty('--yxg-page-top', `${MP_CONTENT_TOP_PX}px`)
root.style.setProperty('--yxg-page-top', `${topPx}px`)
}
function applyNativeHeaderMode(): void {
applyNativeHeaderInset(MP_CONTENT_TOP_PX)
}
function applySafeTopInset(px: number): void {
@@ -30,27 +34,29 @@ function readStoredSbh(): number {
return parseInt(raw, 10)
}
/** True when mini-program renders the brand header above web-view. */
export function isMpNativeHeader(): boolean {
if (typeof window === 'undefined') return false
return sessionStorage.getItem(MP_NATIVE_HEADER_KEY) === '1'
}
/** Apply document-level embed chrome (safe-area wash, hide HTML title). */
export function applyMpEmbedDom(): void {
if (typeof document === 'undefined' || !isMpEmbed()) return
document.title = '\u200b'
document.documentElement.classList.add('mp-embed')
if (isMpNativeHeader()) {
document.documentElement.classList.add('mp-native-header')
applyNativeHeaderMode()
const stored = readStoredSbh()
if (stored > 0) {
applyNativeHeaderInset(stored)
} else {
applyNativeHeaderMode()
}
return
}
const stored = readStoredSbh()
if (stored > 0) applySafeTopInset(stored)
}
/** Persist ?mp=1 from mini-program web-view entry. Call once before router mount. */
export function initMpEmbed(): void {
if (typeof window === 'undefined') return
const params = new URLSearchParams(window.location.search)
@@ -59,7 +65,13 @@ export function initMpEmbed(): void {
}
if (params.get(NH_QUERY) === '1') {
sessionStorage.setItem(MP_NATIVE_HEADER_KEY, '1')
applyNativeHeaderMode()
const nativeSbh = params.get(SBH_QUERY)
if (nativeSbh && /^\d+$/.test(nativeSbh)) {
sessionStorage.setItem(SBH_KEY, nativeSbh)
applyNativeHeaderInset(parseInt(nativeSbh, 10))
} else {
applyNativeHeaderMode()
}
}
if (!isMpNativeHeader()) {
const sbh = params.get(SBH_QUERY)
@@ -71,7 +83,6 @@ export function initMpEmbed(): void {
applyMpEmbedDom()
}
/** True when H5 runs inside WeChat mini-program web-view (no H5 tab bar). */
export function isMpEmbed(): boolean {
if (typeof window === 'undefined') return false
return sessionStorage.getItem(MP_EMBED_KEY) === '1'