Files
Neo-ZQYY/_DEL/miniprogram-h5-conversion/steering/user-guided.md
2026-03-15 10:15:02 +08:00

3.0 KiB
Raw Blame History

半自动模式 & 新页面开发

合并原 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 Powerview-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」。