Revert "fix(h5): 小程序 nh=1 原生顶栏模式与 sbh 顶距(配 202608278)"

This reverts commit 580ba85b61.
This commit is contained in:
jackyu66git
2026-08-25 03:29:37 +08:00
parent 580ba85b61
commit db3669c595
6 changed files with 27 additions and 97 deletions
-25
View File
@@ -4,31 +4,6 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover" />
<title>愈心谷</title>
<script>
;(function () {
var q = location.search.slice(1).split('&')
var p = {}
for (var i = 0; i < q.length; i++) {
var kv = q[i].split('=')
if (kv[0]) p[kv[0]] = kv[1] || ''
}
if (p.mp === '1') {
document.documentElement.classList.add('mp-embed')
try { sessionStorage.setItem('yxg_mp_embed', '1') } catch (e) {}
}
if (p.nh === '1') {
document.documentElement.classList.add('mp-native-header')
try { sessionStorage.setItem('yxg_mp_native_header', '1') } catch (e) {}
var top = 4
if (p.sbh && /^\d+$/.test(p.sbh)) {
top = parseInt(p.sbh, 10)
try { sessionStorage.setItem('yxg_sbh', p.sbh) } catch (e) {}
}
document.documentElement.style.setProperty('--yxg-safe-top', '0px')
document.documentElement.style.setProperty('--yxg-page-top', top + 'px')
}
})()
</script>
<link rel="icon" type="image/png" href="/logo.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+3 -2
View File
@@ -17,9 +17,10 @@ import TabBar from './components/TabBar.vue'
import { isMpEmbed, isMpNativeHeader } from './lib/mpEmbed'
const mpEmbed = isMpEmbed()
const showHeader = !isMpNativeHeader()
const mpNativeHeader = isMpNativeHeader()
const showHeader = !mpNativeHeader
const shellClass = computed(() => ({
'mp-embed': mpEmbed,
'mp-native-header': isMpNativeHeader(),
'mp-native-header': mpNativeHeader,
}))
</script>
+1 -12
View File
@@ -28,7 +28,7 @@ describe('mpEmbed', () => {
expect(document.documentElement.style.getPropertyValue('--yxg-safe-top')).toBe('47px')
})
it('uses native mini-program cover header with ?nh=1', () => {
it('uses native mini-program header mode with ?nh=1', () => {
window.history.replaceState({}, '', '/psy/?mp=1&nh=1')
initMpEmbed()
expect(isMpNativeHeader()).toBe(true)
@@ -37,17 +37,6 @@ describe('mpEmbed', () => {
expect(document.documentElement.style.getPropertyValue('--yxg-page-top')).toBe('4px')
})
it('offsets content below native cover bar with ?nh=1&sbh=', () => {
window.history.replaceState({}, '', '/psy/?mp=1&nh=1&sbh=87')
initMpEmbed()
expect(isMpNativeHeader()).toBe(true)
expect(sessionStorage.getItem('yxg_sbh')).toBe('87')
expect(document.documentElement.style.getPropertyValue('--yxg-page-top')).toBe('87px')
window.history.replaceState({}, '', '/psy/?mp=1')
applyMpEmbedDom()
expect(document.documentElement.style.getPropertyValue('--yxg-page-top')).toBe('87px')
})
it('returns false without mp query', () => {
initMpEmbed()
expect(isMpEmbed()).toBe(false)
+8 -20
View File
@@ -7,17 +7,12 @@ const SBH_KEY = 'yxg_sbh'
const HEADER_H_PX = 50
const MP_CONTENT_TOP_PX = 4
/** 小程序 cover 顶栏承载 logoH5 顶栏仅留极小间距 */
/** Native cover-view handles logo; H5 only needs a tiny gap below web-view top. */
function applyNativeHeaderMode(): void {
applyNativeHeaderInset(MP_CONTENT_TOP_PX)
}
/** nh=1 且带 sbh 时,内容从原生顶栏下方开始 */
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', `${topPx}px`)
root.style.setProperty('--yxg-page-top', `${MP_CONTENT_TOP_PX}px`)
}
function applySafeTopInset(px: number): void {
@@ -35,29 +30,27 @@ 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')
const stored = readStoredSbh()
if (stored > 0) {
applyNativeHeaderInset(stored)
} else {
applyNativeHeaderMode()
}
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)
@@ -66,13 +59,7 @@ export function initMpEmbed(): void {
}
if (params.get(NH_QUERY) === '1') {
sessionStorage.setItem(MP_NATIVE_HEADER_KEY, '1')
const nativeSbh = params.get(SBH_QUERY)
if (nativeSbh && /^\d+$/.test(nativeSbh)) {
sessionStorage.setItem(SBH_KEY, nativeSbh)
applyNativeHeaderInset(parseInt(nativeSbh, 10))
} else {
applyNativeHeaderMode()
}
applyNativeHeaderMode()
}
if (!isMpNativeHeader()) {
const sbh = params.get(SBH_QUERY)
@@ -84,6 +71,7 @@ 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'
-8
View File
@@ -64,14 +64,6 @@ html.mp-embed body{
padding-top:var(--yxg-page-top);
min-height:100%;
}
html.mp-embed.mp-native-header .app-shell .home,
html.mp-embed.mp-native-header .app-shell .ps,
html.mp-embed.mp-native-header .app-shell .yxg-page{
padding-top:var(--yxg-page-top);
}
html.mp-embed.mp-native-header .app-header{
display:none !important;
}
.app-footer{
position:relative;
z-index:1;