# 小程序前端页面开发与原型迁移指南

> 操作文档已迁移至 Kiro Power `miniprogram-h5-conversion`，通过关键词自动激活。
> 本目录仅保留实时更新的仓库驻留文件（进度、经验、页面结构等）。

---

## Power 使用方式

操作文档（调度手册、子代理手册、转换规则、WXSS 规范、CSS 风险清单、Power 集成指南）已打包为 Kiro Power：

- Power 名称：`miniprogram-h5-conversion`
- 激活方式：对话中提及"小程序页面"、"H5转换"、"wxml"、"wxss"、"rpx"等关键词时自动激活
- 手动激活：`kiroPowers action="activate" powerName="miniprogram-h5-conversion"`
- 查看 steering 列表：激活后在返回的 `steeringFiles` 中选择需要的文件

Power 包含 12 个 steering 文件，按职能分三层：

| 层 | 文件 | 说明 |
|----|------|------|
| 调度层 | `batch-auto.md` | 89 单元批量编排 |
| 调度层 | `user-guided.md` | 半自动模式 |
| 调度层 | `new-page.md` | 新页面开发 |
| 行动层 | `screenshot.md` | 截图代理手册 |
| 行动层 | `audit.md` | 审计代理手册 |
| 行动层 | `fix.md` | 修正代理手册 |
| 行动层 | `verify.md` | 验证代理手册 |
| 行动层 | `page-dev.md` | 页面开发代理手册 |
| 参考层 | `conversion-rules.md` | 核心转换规则 |
| 参考层 | `wxss-rules.md` | WXSS 标准值速查 |
| 参考层 | `css-risk.md` | CSS 风险特性清单 |
| 参考层 | `power-integration.md` | Power 调用规范 |

---

## 仓库驻留文件（实时更新，不在 Power 内）

```
docs/miniprogram-dev/
├── README.md                          ← 你在这里
├── 03-reference/
│   ├── page-structure-map.md          # 各页面特殊结构速查（新增页面时更新）
│   └── benchmark-history.md           # 基准测试历史记录
├── 04-audit/
│   ├── PROGRESS.md                    # 89 单元迁移进度（每次会话必读）
│   └── CHANGELOG.md                   # 文档体系版本变更
└── 05-lessons/
    ├── pitfalls.md                    # 踩坑速查（实战经验，持续更新）
    └── convergence-patterns.md        # 收敛模式 + 不可消除差异白名单
```

---

## Power 依赖清单

| Power | 用途 |
|-------|------|
| `wechat-miniprogram` | 小程序开发规范（WXML/WXSS/API/TDesign） |
| `pixel-audit` | 像素间距测量 + rpx 换算 |
| `playwright` | H5 端截图 |
| `weixin-devtools` | MP 端截图 + 页面操作 |

---

## 关联资源

| 资源 | 路径 |
|------|------|
| H5 原型页面 | `docs/h5_ui/pages/*.html` |
| 设计 Token | `docs/h5_ui/design-tokens.json` |
| 图标映射表 | `docs/h5_ui/icon-mapping.md` |
| 截图产物 | `docs/h5_ui/compare/<page>/` |
| 小程序源码 | `apps/miniprogram/miniprogram/pages/` |
| 辅助脚本 | `scripts/ops/measure_gaps.py`、`scripts/ops/anchor_compare.py` |