📋 项目背景

同学家里做珠宝手串生意，传统线下定制全靠口头描述 + 实物比划，顾客难以直观想象「这几种珠子搭在一起到底是什么样」，沟通成本高、成单效率低。

根据他的实际需求，我为其开发了一款微信小程序：顾客可自由搭配珠子 / 配饰 / 吊坠，实时预览环形手串效果，满意后一键下单定制；同时通过「广场」社区展示作品、引流复刻。

一句话总结：把线下手串定制搬到线上，用 Canvas 实时预览解决「搭起来什么样」的想象难题，并闭环到下单。

🎯 项目目标

• 自由拼装珠子 / 配饰 / 吊坠，Canvas 实时预览环形手串
• 基于真实物理的布局算法，所见即真实尺寸比例
• 广场社区：商家铺底 + 用户 UGC，一键复刻同款
• 购物车支持多串合并下单（亲子 / 情侣套装）
• 微信云开发承载登录、订单、购物车、社区全链路

🛠 技术选型

技术 / 方案	用途	选择理由
微信小程序原生	前端	Canvas 2D 性能最佳、发布简单、客服 / 分享能力原生
Canvas 2D（新 API）	实时预览	支持 clip / drawImage / 离屏 canvas，渲染流畅
微信云开发	后端	云函数 + 云数据库，免运维，天然集成微信登录
mm 物理单位	布局计算	保证「所见 = 真实尺寸比例」
Node 单元测试	算法验证	ring-layout 纯函数可独立测试

不选 Taro / uni-app：单平台（微信）、Canvas 密集，原生最直接，省一层抽象。

✨ 功能特性

• 🎨 设计页：拼装珠子 + 配饰（环上）+ 吊坠（挂环底），腕围定环，Canvas 实时预览
• 🔁 真实物理布局：等弧长挨着分布、最小间隔触顶、套装多串，所见即所得
• 🏪 广场社区：商家铺底 + 用户 UGC，一键「复刻」到设计页（接入 msgSecCheck / imgSecCheck 内容安全）
• 🛒 购物车：多串（亲子 / 情侣套装）暂存 + 合并下单
• 📦 订单管理：模拟支付，待付 / 制作中 / 完成 全流程
• 🔐 静默登录：微信云开发认证，无感登录

📐 核心算法：环形布局（工程亮点）

布局与渲染分离——ring-layout.js 是纯函数（输入珠子序列 → 输出坐标，不碰 canvas），可单元测试；canvas-render.js 只负责把布局结果画出来。未来换 3D 渲染层时，布局逻辑零改动。

输入: bracelet[]（珠子序列）, gap_mm, wrist_mm
算法: 等弧长排列（绳子长度 = 腕围固定，珠子串上去）
输出: 每颗珠子圆心坐标 + 贴图朝向角
     + 腕围三档反馈(tight/ok/loose) + 增减建议

用 Node 单测验证真实物理：腕围 160mm → 最多 12 颗 10mm 珠、腕围 100mm → 7 颗，保证预览尺寸可信。

📁 项目结构

zubao/
├── miniprogram/         前端（原生）
│   ├── pages/           首页 · 设计 · 广场 · 购物车 · 我的 · 订单
│   ├── components/      ring-preview（环形预览）· bead-lib（珠子库）
│   └── utils/           ring-layout · beads-data · cloud · auth · order
├── cloudfunctions/      login · createOrder · payOrder · 购物车 · 广场
├── tests/               ring-layout / beads-data 纯函数测试
└── docs/                设计文档 · 工程规划 · CEO 评审 · 重构计划

📊 项目进度

模块	状态	说明
设计页 + 实时预览	✅ 已完成	Canvas 环形布局 + 真实物理
购物车 + 合并下单	✅ 已完成	多串套装、订单模型
我的 / 订单	✅ 已完成	模拟支付全流程
广场 + UGC + 审核	🔄 进行中	内容安全检测、复刻引流

🔗 相关链接

• 源码：GitHub