2.6 KiB
2.6 KiB
小程序 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 |
提示小程序完成 |
| 分享 / 场景值 | 微信分享 | 未接 |
| 我的页子功能 | 跳转各页 | 已改为 同路径壳页（返回栈一致），非仅 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）
- 与小程序完全同款的订单/设置等表单页