半自动模式 & 新页面开发

合并原 user-guided.md / new-page.md / page-dev.md。硬性规则和开发参考值已在 steering mp-h5-rules.md + mp-h5-dev.md 中。

一、半自动模式

用户直接指定页面/区域/任务，AI 按需执行。

意图解析

解析用户输入，确定：目标页面 → 目标范围（整页/step/区域/组件）→ 任务类型（开发/修正/审计/验证）

意图不明确时追问一轮即可（不进入完整审问模式）。

按需加载

任务类型	加载
视觉还原（截图+审计+修正）	`readSteering("action-manual.md")`
仅审计	`readSteering("action-manual.md")` §二
仅修正（已有审计报告）	`readSteering("action-manual.md")` §三+§四
仅截图	`readSteering("action-manual.md")` §一
新页面开发	本文件 §二/§三

始终加载：readSteering("power-integration.md")

与批量模式的区别

不需要按批次顺序
可跳过不相关步骤
修正范围由用户指定
完成后提示是否更新 PROGRESS.md

经验沉淀

发现新踩坑点 → 向用户提出建议 → 确认后录入 docs/miniprogram-dev/05-lessons/pitfalls.md

二、新页面开发（有 H5 原型）

流程

1. 前置加载
   H5 源码 + design-tokens.json + icon-mapping.md + 交互说明
   激活 wechat-miniprogram Power（view-layer.md + tdesign.md）

2. H5 结构分析
   全局结构识别（safe-area/bottomNav/ai-float 等）
   CSS 风险特性扫描
   组件清单（TDesign 可覆盖 vs 自定义）

3. MP 页面骨架搭建（见 §四）

4. 视觉比对审计（推荐）
   → readSteering("action-manual.md")

必须遵守

mock 数据必须与 H5 原型完全一致
TDesign 优先原则
所有规则见 always-on steering mp-h5-rules.md

三、新页面开发（无 H5 原型）

从 spec/PRD 直接开发，无视觉比对。

1. 需求确认（用途、数据来源、导航关系、是否 tabBar）
2. 设计参考（design-tokens.json + 现有页面风格 + TDesign 选型）
3. 页面开发（见 §四）
4. 功能验证（微信开发者工具预览 + 交互流程 + 空/加载/错误态）

四、页面骨架搭建

文件结构

apps/miniprogram/miniprogram/pages/<page>/
├── <page>.wxml    # 结构
├── <page>.wxss    # 样式
├── <page>.ts      # 逻辑 + mock
└── <page>.json    # 配置（navigationBarTitleText + usingComponents）

.json 配置模板

{
  "navigationBarTitleText": "页面标题",
  "usingComponents": {
    "t-button": "tdesign-miniprogram/button/button",
    "t-icon": "tdesign-miniprogram/icon/icon"
  }
}

TS mock 数据

Page({
  data: { /* mock 数据，结构贴近真实 API */ },
  onLoad() {
    // TODO: 替换为真实 API 调用
    this.setData({ /* ... */ });
  }
});

完成检查

见 fileMatch steering mp-h5-dev.md 中的「新页面 Checklist」。

3.0 KiB Raw Permalink Blame History Unescape Escape