2.8 KiB
2.8 KiB
H5 → 微信小程序迁移文档
完整的迁移规范、技术换算、交互改造指南
最后更新：2026-03-17
📚 文档结构
主规范文档
h5-to-mp-bridge.md - 完整迁移规范（1081行）
包含：
- §1-4：执行规程（输入输出、强制决策、能力分级）
- §5-9：技术换算（Spacing、字号、颜色、布局、装饰）
- §10-12：交互改造（WXML映射、数据驱动、API替换）
- §13：10步标准流程
- §14：附录索引
附录文档
appendix/ - 详细字典
index.md- 附录索引spacing-dictionary.md- Spacing与尺寸字典（181行）typography-dictionary.md- 字体与文本字典（267行）color-dictionary.md- 颜色字典（199行）layout-dictionary.md- 布局类映射字典（205行）
🎯 使用指南
对于 AI 代码生成
推荐流程：
- 先查阅
../QUICK-REFERENCE.md（快速参考） - 需要详细说明时，加载本文档
h5-to-mp-bridge.md - 查表时参考
appendix/中的详细字典
对于开发者
推荐流程：
- 阅读
h5-to-mp-bridge.md的 §1-4（执行规程） - 了解输入输出契约和强制决策
- 按 §13 的 10 步标准流程执行
- 查表时参考 §5-9 和
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
📖 快速链接
版本：v3.0 | 最后更新：2026-03-17