From db3669c595c7de1b61aff82f107c9893900fad87 Mon Sep 17 00:00:00 2001 From: jackyu66git Date: Tue, 25 Aug 2026 03:29:37 +0800 Subject: [PATCH] =?UTF-8?q?Revert=20"fix(h5):=20=E5=B0=8F=E7=A8=8B?= =?UTF-8?q?=E5=BA=8F=20nh=3D1=20=E5=8E=9F=E7=94=9F=E9=A1=B6=E6=A0=8F?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E4=B8=8E=20sbh=20=E9=A1=B6=E8=B7=9D=EF=BC=88?= =?UTF-8?q?=E9=85=8D=20202608278=EF=BC=89"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 580ba85b616e8116f776a9d19e496d7825cc6b9f. --- apps/user-h5/index.html | 25 ---------------- apps/user-h5/src/App.vue | 5 ++-- apps/user-h5/src/lib/mpEmbed.spec.ts | 13 +------- apps/user-h5/src/lib/mpEmbed.ts | 28 +++++------------ apps/user-h5/src/styles/app.css | 8 ----- docs/LOCAL-DEV-MINI-PROGRAM-H5.md | 45 ++++++++++------------------ 6 files changed, 27 insertions(+), 97 deletions(-) diff --git a/apps/user-h5/index.html b/apps/user-h5/index.html index 527df1b..d79c458 100644 --- a/apps/user-h5/index.html +++ b/apps/user-h5/index.html @@ -4,31 +4,6 @@ 愈心谷 - diff --git a/apps/user-h5/src/App.vue b/apps/user-h5/src/App.vue index 62c0e78..b2381ad 100644 --- a/apps/user-h5/src/App.vue +++ b/apps/user-h5/src/App.vue @@ -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, })) diff --git a/apps/user-h5/src/lib/mpEmbed.spec.ts b/apps/user-h5/src/lib/mpEmbed.spec.ts index 7a005eb..5750776 100644 --- a/apps/user-h5/src/lib/mpEmbed.spec.ts +++ b/apps/user-h5/src/lib/mpEmbed.spec.ts @@ -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) diff --git a/apps/user-h5/src/lib/mpEmbed.ts b/apps/user-h5/src/lib/mpEmbed.ts index d5f72b5..d9059b8 100644 --- a/apps/user-h5/src/lib/mpEmbed.ts +++ b/apps/user-h5/src/lib/mpEmbed.ts @@ -7,17 +7,12 @@ const SBH_KEY = 'yxg_sbh' const HEADER_H_PX = 50 const MP_CONTENT_TOP_PX = 4 -/** 小程序 cover 顶栏承载 logo，H5 顶栏仅留极小间距 */ +/** 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' diff --git a/apps/user-h5/src/styles/app.css b/apps/user-h5/src/styles/app.css index 5e24113..114d560 100644 --- a/apps/user-h5/src/styles/app.css +++ b/apps/user-h5/src/styles/app.css @@ -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; diff --git a/docs/LOCAL-DEV-MINI-PROGRAM-H5.md b/docs/LOCAL-DEV-MINI-PROGRAM-H5.md index f4458b9..673821c 100644 --- a/docs/LOCAL-DEV-MINI-PROGRAM-H5.md +++ b/docs/LOCAL-DEV-MINI-PROGRAM-H5.md @@ -1,35 +1,8 @@ # 愈心魔方 H5 · 本地联调（免每次改服务器） -## 模式 A：本地小程序 → 远程 H5（默认） +改 H5 时**不必**先部署线上；用本机 Vite + 微信开发者工具即可预览。 -只改小程序、不动 H5 时用这个。`util/yxgConfig.local.js` 保持： - -```js -export const USE_LOCAL_H5 = false -``` - -微信开发者工具 **编译运行** → 愈心魔方 Tab 加载 `https://h5.yuxingu.com.cn/psy/?mp=1&nh=1&v=…` - -**不必**开 `npm run dev:mp`；业务域名 / request 域名按线上一致（可不勾「不校验合法域名」）。 - -## 模式 B：本地小程序 → 本机 Vite - -改 H5 时要热更新： - -```bash -cd digital-psychology && npm run dev:mp -``` - -`util/yxgConfig.local.js`： - -```js -export const USE_LOCAL_H5 = true -export const LOCAL_H5_HOST = '192.168.x.x:5173' // 与 dev:mp 打印一致 -``` - -微信开发者工具：勾选「不校验合法域名、web-view…」。 - -## 日常流程（模式 B） +## 日常流程 ```bash # 终端 1：H5（会打印局域网 IP） @@ -46,7 +19,19 @@ npm run dev:api ├── 打开 yuxingu-Miniprogram-dev ├── 详情 → 本地设置 → 勾选「不校验合法域名、web-view…」 ├── 编译运行（开发模式，非发行） -└── 打开 Tab「愈心魔方」 +└── 打开 Tab「愈心魔方」→ 自动加载本机 http://<你的IP>:5173/psy/ +``` + +小程序侧规则（已配置）： + +- **开发编译**（`import.meta.env.DEV`）→ `util/yxgConfig.local.js` 里的局域网地址 +- **发行 / 上传体验版** → 自动使用 `https://h5.yuxingu.com.cn/psy/` + +只需改一次 `yuxingu-Miniprogram-dev/util/yxgConfig.local.js`： + +```js +export const LOCAL_H5_HOST = '192.168.x.x:5173' // 与 dev:mp 打印一致 +``` ## 浏览器自测 embed