c78a0d531f
- Updated the login modal to include a user agreement section with clickable links to the user agreement and privacy policy. - Improved button styling and layout for better user experience. - Refactored avatar selection process to utilize local image paths, enhancing compatibility and reliability across different environments. - Added utility functions for resolving avatar file paths and selecting images from the gallery or camera. This update aims to streamline user interactions during login and avatar selection, ensuring a smoother experience.
45 lines
2.7 KiB
Markdown
45 lines
2.7 KiB
Markdown
# 小程序 vs H5（reactH5）功能与样式对照
|
||
|
||
**真源**：以 `miniprogram/` 为模板；H5 为浏览器环境，无微信 `wx.*` 能力，差异在「能等价实现的」与「必须降级/仅小程序」两类。
|
||
|
||
## 1. 全局
|
||
|
||
| 项目 | 小程序 | H5 现状 | 说明 |
|
||
|------|--------|---------|------|
|
||
| 基座 API | `soulapi.quwanzhi.com` + `app.request` | 同域 `/api` 代理 + `request.ts` | 路径与小程序一致 `/api/miniprogram/*` |
|
||
| 主题/变量 | `app.wxss` 中 `page` | `app-global.css` 中 `:root,html,body,#root` | 已同步 wxss；`rpx` 经 postcss-750 |
|
||
| 底部 Tab | `custom-tab-bar` + `getConfig` | `TabBar` + `global.configCache` / `features` | 文案支持 `mpUi.tabBar` |
|
||
| 根布局 | 真机全屏 | `#root` 全宽、大屏 max-width 430px | 避免桌面过宽走样 |
|
||
|
||
## 2. 页面覆盖（功能）
|
||
|
||
| 小程序页面 | H5 路由 | 完成度 |
|
||
|------------|---------|--------|
|
||
| index / chapters / match / my | `/` `/chapters` `/match` `/my` | **P1 已实现**（与小程序同接口主流程；个别交互见下表） |
|
||
| read / search / vip / mentors… | 占位或 P2 壳页 | **未 1:1 业务**（仅导航壳或提示） |
|
||
| agreement / privacy | `/agreement` `/privacy` | **已实现**：顶栏 + 文档卡片，文案与 wxml 一致 |
|
||
| 我的子页（订单/代付/余额/阅读记录等） | 见 `router.tsx` 中 `/purchases`… | **壳页**：同小程序路径与标题，可返回；业务表单仍以小程序为准 |
|
||
| dev-login | `/login` | 手机号登录，非微信 getPhoneNumber |
|
||
| 登录弹窗 | — | 标题「登录 卡若创业派对」+ 协议勾选 + 用户协议/隐私链，与 wxml 结构一致 |
|
||
|
||
## 3. 四 Tab 功能差异（要点）
|
||
|
||
| 能力 | 小程序 | H5 |
|
||
|------|--------|-----|
|
||
| 登录 | 微信手机号组件 + 协议勾选 | 手机号 + `/h5/login-by-phone`；弹窗**强制协议勾选**与小程序流程对齐 |
|
||
| 支付 | `wx.requestPayment` | 提示使用小程序；不下发真实支付 |
|
||
| 一键收款 / 商户转账 | 微信 `requestMerchantTransfer` | 提示小程序完成 |
|
||
| 分享 / 场景值 | 微信分享、`onShareAppMessage` | **H5 独立方案**：Web Share、`h5Share` 工具、`docs/H5_SHARE.md` |
|
||
| 我的页子功能 | 跳转各页 | 已改为 **同路径壳页**（返回栈一致），非仅 Toast |
|
||
|
||
## 4. 样式 1:1 策略
|
||
|
||
- 页面/组件 wxss 通过 `scripts/sync_styles_from_miniprogram.py` 覆写为对应 `css`。
|
||
- **iconfont 字体文件**（woff2/woff/ttf）需自行放入 `public/static/`，与小程序 iconfont 工程一致，否则仅 SVG/字形回退有效。
|
||
|
||
## 5. 后续可迭代（非本文件范围）
|
||
|
||
- `read` 阅读器整页
|
||
- 微信开放能力 / JS-SDK（如需微信内 H5）
|
||
- 与小程序完全同款的订单/设置等表单页
|