141 lines
4.3 KiB
Markdown
141 lines
4.3 KiB
Markdown
# H5 原型 → 微信小程序迁移桥接规范（附录/字典层索引 v3.1）
|
||
|
||
> 作用：作为《H5到微信小程序迁移桥接规范_可执行版_v2》和《h5-to-mp-bridge.md》配套的查表层、token 层、机器可读字典层。
|
||
> 适用对象：AI 批量迁移、人工迁移、代码审查、样式回归。
|
||
> 适用范围：本项目上传的 H5 原型页面，尤其是基于 Tailwind CDN Play 模式编写的页面。
|
||
> **v3.1 更新**：补充微信小程序 text 组件的 line-height 设置规则
|
||
|
||
---
|
||
|
||
## 1. 与主规范的关系
|
||
|
||
本附录不是替代主规范，而是补齐以下四类"高频查表能力"：
|
||
|
||
1. Spacing / 尺寸 token 的默认换算表
|
||
2. 字号、行高、字重、文本属性的映射表
|
||
3. 颜色字典与透明度变体映射
|
||
4. 布局类的白名单映射表
|
||
|
||
**主规范文档**：
|
||
- `docs/miniprogram-dev/h5-to-mp-bridge-v3.md` - 主规范（v3.0，合并版）
|
||
|
||
**执行优先级：**
|
||
- 主规范优先于附录。
|
||
- 当附录中的表格与页面真实视觉冲突时，以页面视觉验收结果为准。
|
||
- 当附录中的表格与微信小程序能力边界冲突时，以主规范中的能力分级和降级规则为准。
|
||
|
||
---
|
||
|
||
## 2. AI / 开发使用方式
|
||
|
||
### 2.1 推荐顺序
|
||
|
||
1. 先按主规范完成页面拆解、状态梳理、交互改写。
|
||
2. 再用本附录进行样式 token 替换和布局 class 映射。
|
||
3. 最后回到真机对照 H5 验收图做微调。
|
||
|
||
### 2.2 严禁机械照抄的部分
|
||
|
||
以下内容**只能当候选表，不是绝对硬规则**：
|
||
|
||
- arbitrary `font-size` 的 `line-height`
|
||
- `space-y-*` 的结构选择器实现
|
||
- `grid` / `sticky` / `vh` / `line-clamp` 的条件映射
|
||
- 任何需要保留 `px` 质感的细节尺寸
|
||
- 任何依赖滚动容器、父子层级、组件边界的 CSS 技巧
|
||
|
||
---
|
||
|
||
## 3. 文件清单
|
||
|
||
1. [附录A：Spacing 与尺寸字典](./appendix_a_spacing_and_sizing_dictionary_v3.md)
|
||
2. [附录B：字体与文本字典 v3.1](./appendix_b_typography_and_text_dictionary_v3.md) ⭐ 已更新
|
||
3. [附录C：颜色字典](./appendix_c_color_dictionary_v3.md)
|
||
4. [附录D：布局类映射字典](./appendix_d_layout_class_mapping_dictionary_v3.md)
|
||
|
||
---
|
||
|
||
## 4. 附录级共识
|
||
|
||
### 4.1 单位策略
|
||
|
||
本项目仍然采用：
|
||
|
||
- **`rpx` 为主**
|
||
- **`px` 为辅**
|
||
- **以 412 CSS px 验收宽度为基准换算**
|
||
|
||
换算公式：
|
||
|
||
```text
|
||
rpx = H5_CSS_px × (750 / 412)
|
||
≈ H5_CSS_px × 1.8204
|
||
```
|
||
|
||
默认规则：
|
||
|
||
- 布局型尺寸：优先映射成整数 `rpx`
|
||
- 发丝线、阴影、微位移、小图标：优先保留 `px`
|
||
- 对视觉敏感值：允许偏离公式，以真机视觉为准
|
||
|
||
### 4.2 行高策略 ⚠️ v3.1 新增
|
||
|
||
**关键发现**：微信小程序的 `<text>` 组件不能直接设置 `line-height`，必须通过外层 `<view>` 设置。
|
||
|
||
**全局设置（推荐）：**
|
||
```wxss
|
||
page {
|
||
line-height: 1.5; /* Tailwind 默认行高 */
|
||
}
|
||
|
||
view {
|
||
line-height: inherit;
|
||
}
|
||
```
|
||
|
||
**局部覆盖：**
|
||
```wxss
|
||
.section-title {
|
||
font-size: 26rpx;
|
||
line-height: 36rpx; /* 在 view 的 class 上设置 */
|
||
font-weight: 600;
|
||
}
|
||
```
|
||
|
||
**详细说明**：参见附录 B.2.3 和主规范 §2.1.1
|
||
|
||
### 4.3 颜色策略
|
||
|
||
- 颜色表优先保留**原始十六进制 / rgba 值**
|
||
- 不把 `var()` 写法作为唯一实现前提
|
||
- 是否额外建立 `theme token`，由项目后续工程层决定
|
||
|
||
### 4.4 频次信息说明
|
||
|
||
若附录表格中出现"频次"字段，其含义为：
|
||
|
||
- 来源于旧桥文档中的项目扫描结论
|
||
- 在本次附录中未重新逐文件复跑扫描
|
||
- 可用于判断优先级，但**不得作为强约束或验收依据**
|
||
|
||
---
|
||
|
||
## 5. 参考依据
|
||
|
||
- 微信小程序 WXSS 文档
|
||
- 微信小程序页面 / 动画 / 查询 API 文档
|
||
- Tailwind CSS v3 官方文档（spacing、font size、font weight、gap、space、width 等）
|
||
- 技术文章：
|
||
- CSDN：《小程序 · text设置line-height无效》
|
||
- 博客园：《微信小程序出现 text 设置行高 line-height 无效的问题》
|
||
- 掘金：《小程序文字行高，text 设置 line-height 行高无效的解决办法》
|
||
|
||
本索引文件不重复展开官方说明，具体说明已在主规范和各附录内以执行规则形式固化。
|
||
|
||
---
|
||
|
||
## 6. 更新记录
|
||
|
||
- **v3.0**：初始版本，建立附录索引和四个附录字典
|
||
- **v3.1**：补充微信小程序 text 组件的 line-height 设置规则（2026-03-14）
|