# Doodle Mini 小程序 - 现有产品功能清单

> 定位：3-8 岁早教 A4 纸打印资料小程序
> 最后更新：2026-03-24

---

## 一、产品概览

Doodle Mini 是一款面向 3-8 岁儿童的微信小程序，核心能力是通过 Canvas 动态生成可打印的 A4 教育资料（PNG 图片），涵盖数感启蒙、专注力培养、识字和练字四大模块。用户在小程序内选择题型、配置参数后，即可预览并保存到相册，打印后供孩子使用。

### 产品架构图

```
┌──────────────────────────────────────────────┐
│                  底部 TabBar                   │
├───────────┬───────────┬──────────┬────────────┤
│  数感启蒙  │ 专注力培养 │   识字    │    练字    │
│ mathIndex │focusIndex │  index   │  copyBook  │
└─────┬─────┴─────┬─────┴────┬─────┴─────┬──────┘
      │           │          │           │
      ▼           ▼          ▼           ▼
  26种数学    13种专注力   涂色识字卡   笔顺练字贴
  题型页面    题型页面     自定义生成    自定义生成
  (分包)      (分包)     (主包)       (主包)
```

---

## 二、Tab 1：数感启蒙（26 种题型）

入口页 `pages/mathIndex/mathIndex`，以卡片网格展示所有数学题型，点击进入对应 Canvas 生成页。

### 2.1 认识数字（基础阶段）

| # | 功能 ID | 标题 | 描述 | 对应页面 |
|---|---------|------|------|----------|
| 1 | `number-find` | 找数字，涂一涂 | 在数字方阵中找出目标数字并涂色 | numberFind |
| 2 | `number-write` | 看数字，写一写 | 按笔画顺序练习书写数字 | numberFind |
| 3 | `number-coloring` | 按数字，涂颜色 | 按指定数字给对应圆圈涂色 | countMatch |

### 2.2 数数与计数

| # | 功能 ID | 标题 | 描述 | 对应页面 |
|---|---------|------|------|----------|
| 4 | `counting-matching` | 数一数，连一连 | 连线配对数字和对应数量图形 | countMatch |
| 5 | `number-object-match` | 数物连线 | 连线相同数量的物品和数字 | numberObjectMatch |
| 6 | `number-object-fill` | 数物填写 | 数物品数量，填写对应数字 | numberObjectMatch |
| 7 | `counting-select` | 数一数，选一选 | 数出物品数量，圈出正确答案 | countingSelect |
| 8 | `counting-fill` | 数一数，填一填 | 数出物品数量，填写数字 | countingSelect |
| 9 | `compare` | 数一数，比大小 | 比较数量，填入 ＞＜＝ | compare |

### 2.3 数字序列

| # | 功能 ID | 标题 | 描述 | 对应页面 |
|---|---------|------|------|----------|
| 10 | `number-sort` | 数字排序 | 写出正确的数字顺序 | numberSort |
| 11 | `missing-number` | 填上缺少的数字 | 在数列中找出并填写缺失数字 | missingNumber |

### 2.4 数的分与合

| # | 功能 ID | 标题 | 描述 | 对应页面 |
|---|---------|------|------|----------|
| 12 | `number-decompose` | 10以内数的分与合 | 把数字分一分，合一合 | numberDecompose |
| 13 | `number-decompose-20` | 20以内数的分与合 | 把数字分一分，合一合 | numberDecompose |

### 2.5 简单运算（图形化）

| # | 功能 ID | 标题 | 描述 | 对应页面 |
|---|---------|------|------|----------|
| 14 | `one-digit-addition` | 一位数加法 | 通过圆点学习一位数加法运算 | oneDigitAddition |
| 15 | `addition-5` | 5以内加法 | 图形化展示 5 以内加法 | addition |
| 16 | `addition-10` | 10以内加法 | 图形化展示 10 以内加法 | addition |
| 17 | `subtraction-10` | 10以内减法 | 图形化展示 10 以内减法 | addition |
| 18 | `addition-subtraction-10` | 10以内加减法 | 加减法混合运算 | addition |

### 2.6 进阶运算方法

| # | 功能 ID | 标题 | 描述 | 对应页面 |
|---|---------|------|------|----------|
| 19 | `make-ten` | 凑十法练习 | 20 以内进位加法 | makeTen |
| 20 | `break-ten` | 破十法练习 | 20 以内退位减法 | breakTen |
| 21 | `flat-ten` | 平十法练习 | 20 以内退位减法 | flatTen |
| 22 | `borrow-ten` | 借十法练习 | 20 以上退位减法 | borrowTen |

### 2.7 综合计算练习

| # | 功能 ID | 标题 | 描述 | 对应页面 |
|---|---------|------|------|----------|
| 23 | `practice-addition` | 加法运算 | 10/20/50/100 以内加法 | calculationPractice |
| 24 | `practice-subtraction` | 减法运算 | 10/20/50/100 以内减法 | calculationPractice |
| 25 | `practice-mixed` | 混合运算 | 10/20/50/100 以内加减法混合 | calculationPractice |
| 26 | `multiplication-table` | 九九乘法表 | 学习九九乘法口诀 | multiplicationTable |

### 数学模块共用能力

- Canvas 预览 → 保存图片到相册 → 打印
- 随机生成题目（可重复随机）
- 题型/模式选择器
- 分享小程序给微信好友或朋友圈
- 原生广告展示

---

## 三、Tab 2：专注力培养（13 种题型）

入口页 `pages/focusIndex/focusIndex`，以卡片网格展示。

| # | 功能 ID | 标题 | 描述 | 对应页面 |
|---|---------|------|------|----------|
| 1 | `color-shape-match` | 根据颜色画图形 | 根据颜色画出对应图形 | colorShapeMatch |
| 2 | `shape-symbol` | 图形符号配对 | 根据图形画对应符号 | shapeSymbol |
| 3 | `shape-recognition` | 识别形状 | 识别形状，涂一涂 | shape |
| 4 | `position-coloring` | 方位涂涂乐 | 观察位置，在方格中涂色 | positionColoring |
| 5 | `color-pattern` | 颜色找规律 | 观察颜色规律，在空白图形中涂色 | colorPattern |
| 6 | `match-connect` | 连连看 | 根据物品连一连 | matchConnect |
| 7 | `line-recognition` | 线条识别 | 认识不同线条，画出颜色对应的线条 | lineRecognition |
| 8 | `grid-reasoning` | 方格推理 | 推理出合并方格并连线 | gridReasoning |
| 9 | `code-connect` | 译码连线 | 按数字顺序将数字对应颜色连线 | codeConnect |
| 10 | `dot-connect` | 数字点连线 | 按数字顺序连点成图 | dotConnect |
| 11 | `grid-drawing-3x3` | 格子仿画 3×3 | 简单有趣，培养专注力 | gridDrawing |
| 12 | `grid-drawing-5x5` | 格子仿画 5×5 | 创意挑战，提升观察力 | gridDrawing |
| 13 | `grid-drawing-7x7` | 格子仿画 7×7 | 大师挑战，锻炼耐心 | gridDrawing |

---

## 四、Tab 3：识字

入口页 `pages/index/index`

### 核心流程

1. **输入/选择汉字**：最多选 6 个字
   - 手动输入汉字
   - 从分类词库中选择（基础独体字、生活高频字、自然与动作、常用量词/颜色/动物/食物等 8+ 分类）
2. **个性化配色**：从 24 色水彩调色盘中为每个字卡选择颜色
3. **选择模板**：
   - `grid` 模板：识字网格布局
   - `find` 模板：找一找布局
4. **Canvas 预览**：实时预览 A4 打印效果
5. **操作**：
   - 随机生成字卡
   - 清空重选
   - 保存图片到相册
   - 分享给好友

### 词库分类

| 类别 | 示例 |
|------|------|
| 基础独体字 | 人、口、手、上、下、日、月、水、火、山... |
| 生活高频字 | 爸、妈、书、包、吃、喝、走、跑... |
| 自然与动作 | 风、雪、星、光、春、夏、秋、冬... |
| 常用量词/颜色/动物/食物等 | 多个子分类 |

---

## 五、Tab 4：练字

入口页 `pages/copyBook/copyBook`

### 核心流程

1. **输入/选择汉字**：最多选 11 个字
2. **获取笔画数据**：从网络加载汉字 SVG 笔画数据
3. **Canvas 绘制**：
   - 田字格底纹
   - 笔顺展示（第一个格完整描红，后续格逐步减淡）
   - A4 纸面排版
4. **导出**：保存到相册 → 打印

---

## 六、通用能力与技术架构

### 6.1 通用功能

| 能力 | 说明 |
|------|------|
| 打印配置 | 页眉样式可选（微信码/无Logo/Logo图片/极简），可配置应用名称 |
| Canvas 导出 | 统一的 Canvas → 临时文件 → 保存相册流程 |
| 分享 | 支持分享给好友、分享到朋友圈（含 CDN 分享图） |
| 新手引导 | 识字页有多步骤新手引导弹窗 |
| 添加提示 | 首次使用提示添加到「我的小程序」 |
| 广告 | 原生广告展示（数学/专注力子页面） |
| Debug 模式 | 非 release 环境可调试打印配置、真机调试开关 |
| 埋点追踪 | `tracker` 工具跟踪用户行为 |

### 6.2 技术栈

| 技术 | 说明 |
|------|------|
| 框架 | 微信小程序原生（TypeScript + Less） |
| 渲染 | Skyline + Glass-Easel 组件框架 |
| UI 库 | Vant Weapp |
| 分包 | 主包 + mathPages 分包 + focusPages 分包 |
| 云开发 | 云函数 `doodle`（获取 OpenID、实验性 PDF 生成） |
| 绘制服务 | DrawService 工厂模式，各题型独立 Draw 服务 |
| 预加载 | 所有 Tab 页预加载两个分包 |

### 6.3 页面架构

| 模式 | 说明 |
|------|------|
| pageMixin | 基础页面混入：Canvas 初始化、导出图片、分享配置、页面信息初始化 |
| mathPageMixin | 数学页面混入：继承 pageMixin，增加数学题型选择、随机生成 |
| focusPageMixin | 专注力页面混入：与数学对称，专注力题型的共用逻辑 |
| drawServiceFactory | 根据 functionId 创建对应的绘制服务实例 |

---

## 七、功能统计

| 模块 | 题型/功能数量 |
|------|-------------|
| 数感启蒙 | 26 种题型 |
| 专注力培养 | 13 种题型 |
| 识字 | 1 个功能（含 2 种模板） |
| 练字 | 1 个功能 |
| **合计** | **41 种可打印资料** |