123 lines
3.0 KiB
Markdown
123 lines
3.0 KiB
Markdown
# 半自动模式 & 新页面开发
|
||
|
||
> 合并原 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 配置模板
|
||
|
||
```json
|
||
{
|
||
"navigationBarTitleText": "页面标题",
|
||
"usingComponents": {
|
||
"t-button": "tdesign-miniprogram/button/button",
|
||
"t-icon": "tdesign-miniprogram/icon/icon"
|
||
}
|
||
}
|
||
```
|
||
|
||
### TS mock 数据
|
||
|
||
```typescript
|
||
Page({
|
||
data: { /* mock 数据，结构贴近真实 API */ },
|
||
onLoad() {
|
||
// TODO: 替换为真实 API 调用
|
||
this.setData({ /* ... */ });
|
||
}
|
||
});
|
||
```
|
||
|
||
### 完成检查
|
||
|
||
见 fileMatch steering `mp-h5-dev.md` 中的「新页面 Checklist」。
|