# 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）