joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b2f5b203f8d91e46b0987548d2d70112ffefbdfe
doodle-mini/docs/现有功能清单.md
T

9.5 KiB
Raw Blame History

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 种可打印资料
Reference in New Issue View Git Blame Copy Permalink