Files

2026-03-18 05:14:35 +08:00

4.3 KiB

Raw Permalink Blame History

H5 原型 → 微信小程序迁移桥接规范（附录/字典层索引 v3.1）

作用：作为《H5到微信小程序迁移桥接规范_可执行版_v2》和《h5-to-mp-bridge.md》配套的查表层、token 层、机器可读字典层。
适用对象：AI 批量迁移、人工迁移、代码审查、样式回归。
适用范围：本项目上传的 H5 原型页面，尤其是基于 Tailwind CDN Play 模式编写的页面。
v3.1 更新：补充微信小程序 text 组件的 line-height 设置规则

1. 与主规范的关系

本附录不是替代主规范，而是补齐以下四类"高频查表能力"：

Spacing / 尺寸 token 的默认换算表
字号、行高、字重、文本属性的映射表
颜色字典与透明度变体映射
布局类的白名单映射表

主规范文档：

docs/miniprogram-dev/h5-to-mp-bridge-v3.md - 主规范（v3.0，合并版）

执行优先级：

主规范优先于附录。
当附录中的表格与页面真实视觉冲突时，以页面视觉验收结果为准。
当附录中的表格与微信小程序能力边界冲突时，以主规范中的能力分级和降级规则为准。

2. AI / 开发使用方式

2.1 推荐顺序

先按主规范完成页面拆解、状态梳理、交互改写。
再用本附录进行样式 token 替换和布局 class 映射。
最后回到真机对照 H5 验收图做微调。

2.2 严禁机械照抄的部分

以下内容只能当候选表，不是绝对硬规则：

arbitrary font-size 的 line-height
space-y-* 的结构选择器实现
grid / sticky / vh / line-clamp 的条件映射
任何需要保留 px 质感的细节尺寸
任何依赖滚动容器、父子层级、组件边界的 CSS 技巧

3. 文件清单

4. 附录级共识

4.1 单位策略

本项目仍然采用：

rpx 为主
px 为辅
以 412 CSS px 验收宽度为基准换算

换算公式：

rpx = H5_CSS_px × (750 / 412)
    ≈ H5_CSS_px × 1.8204

默认规则：

布局型尺寸：优先映射成整数 rpx
发丝线、阴影、微位移、小图标：优先保留 px
对视觉敏感值：允许偏离公式，以真机视觉为准

4.2 行高策略 ⚠️ v3.1 新增

关键发现：微信小程序的 <text> 组件不能直接设置 line-height，必须通过外层 <view> 设置。

全局设置（推荐）：

page {
  line-height: 1.5; /* Tailwind 默认行高 */
}

view {
  line-height: inherit;
}

局部覆盖：

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

4.3 KiB Raw Permalink Blame History Unescape Escape