Revert "fix(h5): 小程序 nh=1 原生顶栏模式与 sbh 顶距(配 202608278)"
This reverts commit 580ba85b61.
This commit is contained in:
@@ -4,31 +4,6 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover" />
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover" />
|
||||||
<title>愈心谷</title>
|
<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="icon" type="image/png" href="/logo.png" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
|||||||
@@ -17,9 +17,10 @@ import TabBar from './components/TabBar.vue'
|
|||||||
import { isMpEmbed, isMpNativeHeader } from './lib/mpEmbed'
|
import { isMpEmbed, isMpNativeHeader } from './lib/mpEmbed'
|
||||||
|
|
||||||
const mpEmbed = isMpEmbed()
|
const mpEmbed = isMpEmbed()
|
||||||
const showHeader = !isMpNativeHeader()
|
const mpNativeHeader = isMpNativeHeader()
|
||||||
|
const showHeader = !mpNativeHeader
|
||||||
const shellClass = computed(() => ({
|
const shellClass = computed(() => ({
|
||||||
'mp-embed': mpEmbed,
|
'mp-embed': mpEmbed,
|
||||||
'mp-native-header': isMpNativeHeader(),
|
'mp-native-header': mpNativeHeader,
|
||||||
}))
|
}))
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ describe('mpEmbed', () => {
|
|||||||
expect(document.documentElement.style.getPropertyValue('--yxg-safe-top')).toBe('47px')
|
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')
|
window.history.replaceState({}, '', '/psy/?mp=1&nh=1')
|
||||||
initMpEmbed()
|
initMpEmbed()
|
||||||
expect(isMpNativeHeader()).toBe(true)
|
expect(isMpNativeHeader()).toBe(true)
|
||||||
@@ -37,17 +37,6 @@ describe('mpEmbed', () => {
|
|||||||
expect(document.documentElement.style.getPropertyValue('--yxg-page-top')).toBe('4px')
|
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', () => {
|
it('returns false without mp query', () => {
|
||||||
initMpEmbed()
|
initMpEmbed()
|
||||||
expect(isMpEmbed()).toBe(false)
|
expect(isMpEmbed()).toBe(false)
|
||||||
|
|||||||
@@ -7,17 +7,12 @@ const SBH_KEY = 'yxg_sbh'
|
|||||||
const HEADER_H_PX = 50
|
const HEADER_H_PX = 50
|
||||||
const MP_CONTENT_TOP_PX = 4
|
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 {
|
function applyNativeHeaderMode(): void {
|
||||||
applyNativeHeaderInset(MP_CONTENT_TOP_PX)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** nh=1 且带 sbh 时,内容从原生顶栏下方开始 */
|
|
||||||
function applyNativeHeaderInset(topPx: number): void {
|
|
||||||
if (typeof document === 'undefined') return
|
if (typeof document === 'undefined') return
|
||||||
const root = document.documentElement
|
const root = document.documentElement
|
||||||
root.style.setProperty('--yxg-safe-top', '0px')
|
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 {
|
function applySafeTopInset(px: number): void {
|
||||||
@@ -35,29 +30,27 @@ function readStoredSbh(): number {
|
|||||||
return parseInt(raw, 10)
|
return parseInt(raw, 10)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** True when mini-program renders the brand header above web-view. */
|
||||||
export function isMpNativeHeader(): boolean {
|
export function isMpNativeHeader(): boolean {
|
||||||
if (typeof window === 'undefined') return false
|
if (typeof window === 'undefined') return false
|
||||||
return sessionStorage.getItem(MP_NATIVE_HEADER_KEY) === '1'
|
return sessionStorage.getItem(MP_NATIVE_HEADER_KEY) === '1'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Apply document-level embed chrome (safe-area wash, hide HTML title). */
|
||||||
export function applyMpEmbedDom(): void {
|
export function applyMpEmbedDom(): void {
|
||||||
if (typeof document === 'undefined' || !isMpEmbed()) return
|
if (typeof document === 'undefined' || !isMpEmbed()) return
|
||||||
document.title = '\u200b'
|
document.title = '\u200b'
|
||||||
document.documentElement.classList.add('mp-embed')
|
document.documentElement.classList.add('mp-embed')
|
||||||
if (isMpNativeHeader()) {
|
if (isMpNativeHeader()) {
|
||||||
document.documentElement.classList.add('mp-native-header')
|
document.documentElement.classList.add('mp-native-header')
|
||||||
const stored = readStoredSbh()
|
|
||||||
if (stored > 0) {
|
|
||||||
applyNativeHeaderInset(stored)
|
|
||||||
} else {
|
|
||||||
applyNativeHeaderMode()
|
applyNativeHeaderMode()
|
||||||
}
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const stored = readStoredSbh()
|
const stored = readStoredSbh()
|
||||||
if (stored > 0) applySafeTopInset(stored)
|
if (stored > 0) applySafeTopInset(stored)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Persist ?mp=1 from mini-program web-view entry. Call once before router mount. */
|
||||||
export function initMpEmbed(): void {
|
export function initMpEmbed(): void {
|
||||||
if (typeof window === 'undefined') return
|
if (typeof window === 'undefined') return
|
||||||
const params = new URLSearchParams(window.location.search)
|
const params = new URLSearchParams(window.location.search)
|
||||||
@@ -66,14 +59,8 @@ export function initMpEmbed(): void {
|
|||||||
}
|
}
|
||||||
if (params.get(NH_QUERY) === '1') {
|
if (params.get(NH_QUERY) === '1') {
|
||||||
sessionStorage.setItem(MP_NATIVE_HEADER_KEY, '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()) {
|
if (!isMpNativeHeader()) {
|
||||||
const sbh = params.get(SBH_QUERY)
|
const sbh = params.get(SBH_QUERY)
|
||||||
if (sbh && /^\d+$/.test(sbh)) {
|
if (sbh && /^\d+$/.test(sbh)) {
|
||||||
@@ -84,6 +71,7 @@ export function initMpEmbed(): void {
|
|||||||
applyMpEmbedDom()
|
applyMpEmbedDom()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** True when H5 runs inside WeChat mini-program web-view (no H5 tab bar). */
|
||||||
export function isMpEmbed(): boolean {
|
export function isMpEmbed(): boolean {
|
||||||
if (typeof window === 'undefined') return false
|
if (typeof window === 'undefined') return false
|
||||||
return sessionStorage.getItem(MP_EMBED_KEY) === '1'
|
return sessionStorage.getItem(MP_EMBED_KEY) === '1'
|
||||||
|
|||||||
@@ -64,14 +64,6 @@ html.mp-embed body{
|
|||||||
padding-top:var(--yxg-page-top);
|
padding-top:var(--yxg-page-top);
|
||||||
min-height:100%;
|
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{
|
.app-footer{
|
||||||
position:relative;
|
position:relative;
|
||||||
z-index:1;
|
z-index:1;
|
||||||
|
|||||||
@@ -1,35 +1,8 @@
|
|||||||
# 愈心魔方 H5 · 本地联调(免每次改服务器)
|
# 愈心魔方 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
|
```bash
|
||||||
# 终端 1:H5(会打印局域网 IP)
|
# 终端 1:H5(会打印局域网 IP)
|
||||||
@@ -46,7 +19,19 @@ npm run dev:api
|
|||||||
├── 打开 yuxingu-Miniprogram-dev
|
├── 打开 yuxingu-Miniprogram-dev
|
||||||
├── 详情 → 本地设置 → 勾选「不校验合法域名、web-view…」
|
├── 详情 → 本地设置 → 勾选「不校验合法域名、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
|
## 浏览器自测 embed
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user