# H5 → 微信小程序迁移文档

> 完整的迁移规范、技术换算、交互改造指南  
> 最后更新：2026-03-17

---

## 📚 文档结构

### 主规范文档
**[`h5-to-mp-bridge.md`](./h5-to-mp-bridge.md)** - 完整迁移规范（1081行）

包含：
- **§1-4**：执行规程（输入输出、强制决策、能力分级）
- **§5-9**：技术换算（Spacing、字号、颜色、布局、装饰）
- **§10-12**：交互改造（WXML映射、数据驱动、API替换）
- **§13**：10步标准流程
- **§14**：附录索引

### 附录文档
**[`appendix/`](./appendix/)** - 详细字典

- [`index.md`](./appendix/index.md) - 附录索引
- [`spacing-dictionary.md`](./appendix/spacing-dictionary.md) - Spacing与尺寸字典（181行）
- [`typography-dictionary.md`](./appendix/typography-dictionary.md) - 字体与文本字典（267行）
- [`color-dictionary.md`](./appendix/color-dictionary.md) - 颜色字典（199行）
- [`layout-dictionary.md`](./appendix/layout-dictionary.md) - 布局类映射字典（205行）

---

## 🎯 使用指南

### 对于 AI 代码生成

**推荐流程**：
1. 先查阅 [`../QUICK-REFERENCE.md`](../QUICK-REFERENCE.md)（快速参考）
2. 需要详细说明时，加载本文档 [`h5-to-mp-bridge.md`](./h5-to-mp-bridge.md)
3. 查表时参考 [`appendix/`](./appendix/) 中的详细字典

### 对于开发者

**推荐流程**：
1. 阅读 [`h5-to-mp-bridge.md`](./h5-to-mp-bridge.md) 的 §1-4（执行规程）
2. 了解输入输出契约和强制决策
3. 按 §13 的 10 步标准流程执行
4. 查表时参考 §5-9 和 [`appendix/`](./appendix/)

---

## 🔑 核心要点

### 1. 单位策略
- **rpx 为主**：布局、容器、间距
- **px 为辅**：发丝线、阴影、小图标
- **换算公式**：`rpx = px × 1.8204`

### 2. line-height 关键发现 ⚠️
- 微信小程序的 `<text>` 组件不能直接设置 `line-height`
- 必须在外层 `<view>` 上设置，text 会自动继承
- 详见主规范 §2.6 和 §6.2

### 3. 数据驱动
- 禁止使用 DOM 操作（`document.*`、`element.classList.*`）
- 所有交互改为 `setData` + 条件渲染
- 详见主规范 §11

### 4. 能力分级
- **A 类**：可直接使用（flex、transition、animation 等）
- **B 类**：有条件使用（sticky、grid、backdrop-filter 等）
- **C 类**：禁止直迁（DOM API、浏览器 API 等）
- 详见主规范 §3

---

## 📖 快速链接

- [完整迁移规范](./h5-to-mp-bridge.md)
- [附录索引](./appendix/index.md)
- [Spacing 字典](./appendix/spacing-dictionary.md)
- [字体字典](./appendix/typography-dictionary.md)
- [颜色字典](./appendix/color-dictionary.md)
- [布局字典](./appendix/layout-dictionary.md)
- [返回总索引](../README.md)

---

**版本**：v3.0 | **最后更新**：2026-03-17