feat(h5): 小程序原生顶栏 + 本地联调与一键部署

nh=1 隐藏 H5 顶栏并由 cover 承载 logo;H5 仅 4px 顶距避免重复留白。新增 dev:mp、deploy:h5 与联调文档。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jackyu66git
2026-08-25 01:38:32 +08:00
co-authored by Cursor
parent f4bd57ce1b
commit 57687de360
12 changed files with 188 additions and 10 deletions
+2
View File
@@ -2,6 +2,8 @@
适用于:**微信小程序**`yuxingu-Miniprogram-dev`)嵌入 **愈心魔方 H5**`digital-psychology/apps/user-h5`)的展示期上线。
**本地联调(免每次改服务器)** → 见 [LOCAL-DEV-MINI-PROGRAM-H5.md](LOCAL-DEV-MINI-PROGRAM-H5.md) · `npm run dev:mp`
---
## 1. 架构
+56
View File
@@ -0,0 +1,56 @@
# 愈心魔方 H5 · 本地联调(免每次改服务器)
改 H5 时**不必**先部署线上;用本机 Vite + 微信开发者工具即可预览。
## 日常流程
```bash
# 终端 1:H5(会打印局域网 IP)
cd digital-psychology
npm run dev:mp
# 终端 2(需要登录/接口时)
npm run dev:api
# 或仅数据库: npm run deps:up && npm run dev:api
```
```text
微信开发者工具
├── 打开 yuxingu-Miniprogram-dev
├── 详情 → 本地设置 → 勾选「不校验合法域名、web-view…」
├── 编译运行(开发模式,非发行)
└── 打开 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
```text
http://localhost:5173/psy/?mp=1&sbh=88
```
## 确认要上线时(一条命令)
```bash
cp deploy.env.example deploy.env # 首次填写服务器
chmod +x scripts/deploy-h5.sh
./scripts/deploy-h5.sh
```
## 局限
| 项 | 说明 |
|----|------|
| 真机预览 | 手机与电脑同一 WiFi;开发者工具可勾选「真机调试」 |
| 业务域名 | 本地为 `http`,仅开发模式 + 关闭域名校验时可用 |
| 与线上一致 | 发行前仍建议在体验版走 HTTPS 域名验收一次 |