# HTML 与微信小程序实现

沿用已有设计说明，并按 [测量与校准](calibration.md) 固定参考基线。组件与素材的划分使用主流程；需要裁图、重绘或透明素材时转到 [素材流程](reference-assets.md)。

## 独立 HTML

用语义 HTML、CSS 与必要的 JavaScript 建立页面。采用正常文档流、Grid 或 Flex 组织区块，重复组件共用样式；不要用整图背景或大量任意定位承载正文与操作。完整长页先覆盖所有区块。

交互对应真实用途，覆盖主要操作及其状态。视觉演示没有后端能力时，明确演示边界，不伪造提交成功或可用服务。

## 微信小程序

直接使用目标项目的文件模型，不先生成 HTML 再机械转换：

| 文件 | 职责 |
| --- | --- |
| `*.wxml` | 结构、卡片、控件与文字 |
| `*.wxss` | 布局、rpx 尺寸、字体和视觉样式 |
| `*.ts`／`*.js` | 页面数据、状态与交互 |
| `${miniprogramRoot}/assets/` | 独立图片素材，沿用项目目录约定 |

优先使用现有组件和图标。简单装饰用 WXSS；复杂插画使用质量足够的独立素材，是否重绘由素材流程判断。

资源路径从配置中的 `miniprogramRoot` 解析。例如该值为 `miniprogram/` 时，文件放在 `miniprogram/assets/`，WXML 引用：

```xml
<image class="hero" src="/assets/hero.png" mode="aspectFit" />
<image class="banner" src="/assets/banner.png" mode="widthFix" />
```

`aspectFit` 用于固定容器内完整显示主体；`widthFix` 用于按宽度保持图片比例。每次只选一个合法 mode，明确容器宽度与页面重排方式。

小程序渲染必须在微信开发者工具或对应真机环境验证，普通浏览器只能验证 HTML 原型。自动化能力可使用 `miniprogram-automator`；固定设备预设、页面视口与 DPR，截图仅取与参考一致的页面区域，排除状态栏、胶囊和工具栏。像素对比走校准文档的非 DOM 分支，交互仍在小程序内实际操作；模拟器与真机结果分开记录。

## 排版实现要点

| 项目 | 实现时关注 |
| --- | --- |
| 字体 | 标题、正文、导航分别匹配家族和字重；使用实际可用字体并配置 fallback，近似字体注明差异 |
| 文本块 | 同时调整字号、行高、容器宽度和换行；必要时按词组拆分，不只匹配单行高度 |
| 细字与颜色 | 对照字距、文字灰度、按钮居中；不以模糊阴影模拟生成字形噪声 |
| 图片与装饰 | 明确容器比例、主体位置与窄屏裁切；斜边等装饰不改变正文的布局基准 |

校准次序、采集命令与验收项目以校准文档为准。实现文件只记录本项目取舍，不另建同义检查表。