hlx 发表于 2026-7-15 15:38:31

拼豆制图小程序

拼豆制图君 - Bead Pattern Creator
基于 Taro + React 的微信小程序,用于创建和管理拼豆(Perler Beads / Fuse Beads)图案。

技术栈
前端: Taro 3.x + React 18 + TypeScript + SCSS
后端: 微信云开发 (WeChat Cloud Base)
设计: 750px 设计稿,暖色调配色
项目结构
bead-artist/
├── src/
│   ├── pages/          # 21 个页面(主包 + 分包)
│   ├── components/   # 核心组件(BeadGrid、CustomTabBar等)
│   ├── utils/          # 工具函数(调色板、棋盘、图案计算)
│   ├── services/       # API 服务层(云函数调用)
│   ├── types/          # TypeScript 类型定义
│   ├── data/         # 内置模板和合集数据
│   ├── app.config.ts   # 小程序配置
│   ├── app.tsx         # 应用入口
│   └── app.scss      # 全局样式
├── cloud/
│   ├── functions/      # 29 个云函数
│   └── database/       # 数据库初始化脚本
├── config/             # Taro 编译配置
└── assets/             # 图标、缩略图等静态资源
核心功能
拼豆网格编辑器:7 种工具、对称绘制、撤销/重做
模板广场:29 个内置模板 + 云端模板
作品管理:保存、编辑、分享作品
颜色库存:管理拼豆材料库存
引导模式:逐步完成图案
3D 预览:3D 效果预览
导出:图片导出、色号清单、材料清单
开始开发
npm install -g @tarojs/cli
npm install
npm run dev:weapp
云函数部署
右键 cloud/functions 目录 -> 上传并部署所有云函数

数据库
在云开发控制台创建集合后,运行 cloud/database/init/init.js 初始化数据。当前初始化脚本会创建 templates、works、users、collections、work_collections、inventory、production_runs、submissions、favorites、config、analytics、admin_config、refine_stats 等集合

开源地址:https://gitee.com/j326598/bead-artist

http://cdn.u1.huluxia.com/g4/M02/94/A1/rBAAdmpXOPKAZPnKAAOQpqyaWYU463.jpg
http://cdn.u1.huluxia.com/g4/M02/94/A1/rBAAdmpXOPOAdQyYAAQmB7DQoak664.jpg
http://cdn.u1.huluxia.com/g4/M02/94/A1/rBAAdmpXOPOAezGcAAM-uhgcRg0129.jpg
http://cdn.u1.huluxia.com/g4/M02/94/A1/rBAAdmpXOPSABu7iAAJP8_8PwCk860.jpg
http://cdn.u1.huluxia.com/g4/M02/94/A1/rBAAdmpXOPSABoJRAAUApaS4SZ8656.jpg
http://cdn.u1.huluxia.com/g4/M02/94/A1/rBAAdmpXOPWAU4IJAAVGzxv1WGs508.jpg
http://cdn.u1.huluxia.com/g4/M02/94/A1/rBAAdmpXOPaAB7YGAANctqLxj_A045.jpg
页: [1]
查看完整版本: 拼豆制图小程序