小程序迁移静态页面完成！！！

2026-03-18 05:14:35 +08:00
parent 72bb11b34f
commit 075caf067f
124 changed files with 10407 additions and 2738 deletions
--- a/docs/miniprogram-dev/h5-migration/appendix/index.md
+++ b/docs/miniprogram-dev/h5-migration/appendix/index.md
@@ -0,0 +1,140 @@
+# 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）