专为拼豆爱好者打造的微信小程序,支持图片一键转图纸、自由绘制、颜色统计与购物清单生成。基于Taro+React+TypeScript与微信云开发,提供编辑器、作品管理、模板画展等功能,让拼豆创作更高效便捷。
拼豆制图君 — 微信小程序项目简介
一、项目概述
拼豆制图君 是一款面向拼豆(Perler Beads / Fuse Beads)爱好者的微信小程序,核心目标是将图片、灵感与像素画快速转换为可落地制作的拼豆图纸。用户可通过图片转图纸、拍照创作、自由绘制等方式生成拼豆作品,并查看颜色用量、购物清单与制作参考。
项目基于 Taro + React + TypeScript 开发,借助 微信云开发(云函数、云数据库、云存储)提供后端能力。
二、核心功能
1. 📷 图片转拼豆
- 从相册选择图片或直接拍照
- 自动将图片转换为拼豆图纸,按格子对应,方便实体制作
2. 🎨 自由创作
- 创建空白画布
- 自定义拼豆规格、板子尺寸、拼接模式、色系、板型
- 在编辑器中自由绘制图案
3. ✏️ 拼豆编辑器
表格
| 功能模块 | 说明 |
|---|---|
| 画笔 / 橡皮擦 | 基础绘制与擦除 |
| 滑动连续上色 / 擦除 | 长按滑动,提升效率 |
| 颜色选择 | 丰富调色盘 |
| 吸管取色 | 从画布吸取已有颜色 |
| 替换颜色 | 一键批量替换 |
| 撤销 / 重做 | 历史操作回退与恢复 |
| 缩放画布 | 放大缩小查看细节 |
| 棋盘配置 | 自定义棋盘样式 |
| 圆形 / 方形板 | 支持不同板型 |
| 拼接模式 | 多板拼接预览 |
4. 📊 颜色统计与导出
- 使用颜色数量统计
- 每种颜色用量明细
- 拼豆颗数汇总
- 自动生成 购物清单
- 制作参考信息导出
5. 📁 作品管理
- 保存作品至个人库
- "我的作品"中查看、管理、继续编辑
6. 🖼️ 模板与画展
- 浏览推荐图纸、模板与合集
- 收藏喜欢的作品
7. 🎨 颜色库存
- 记录已有拼豆颜色库存
- 创作时优先参考已有颜色,减少重复购买
8. 👤 我的页面
包含以下入口:
用户头像与昵称 / 作品统计 / 收藏 / 作品 / 颜色库存 / 教程与帮助 / 隐私政策 / 用户协议 / 关于应用 / 管理员后台入口
⚡ 管理员账号可额外看到 后台管理 入口。
三、技术栈
表格
| 类别 | 技术 |
|---|---|
| 前端框架 | Taro 3.6.22 + React 18 + TypeScript |
| 样式方案 | SCSS / Sass |
| 组件体系 | 微信小程序原生组件 + 统一 SvgIcon 图标组件 |
| 后端服务 | 微信云开发(云函数 + 云数据库 + 云存储) |
| 构建工具 | Webpack 5 + Taro CLI |
四、项目特点
- 场景聚焦 — 功能围绕拼豆创作全流程设计,不做通用绘图
- 快速转换 — 图片一键转拼豆图纸,降低门槛
- 细粒度编辑 — 滑动绘制、缩放、棋盘、颜色替换等体验精细
- 实用统计 — 颜色用量 + 购物清单,直接服务实际制作
- 云开发驱动 — 免去自建服务器,部署轻量
- 跨端一致 — 统一
SvgIcon组件替代 emoji,多端显示统一
五、适用场景
- 🧩 拼豆爱好者日常制作图纸
- 👨👩👧👦 亲子手工活动配图
- 🖌️ 像素画转拼豆创作
- 📖 手作教程配图素材
- 🛒 拼豆材料采购前用量统计
- 📦 拼豆作品收藏与分类管理


