feat:优化图片生产质量，减少打印耗时
This commit is contained in:
R524809
+220
@@ -0,0 +1,220 @@
|
||||
# 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
Block a user