一、项目概述

定位：一款集成多种娱乐转盘功能的轻量级工具，帮助用户解决选择困难，提供趣味互动体验。

核心价值：

• 快速决策：预设转盘（美食、游戏、旅行等）一键使用。
• 个性化定制：支持用户自定义转盘内容和样式。
• 趣味社交：内置“真心话大冒险”题库，增强娱乐性。

二、目标用户

主要场景：

• 个人用户：日常选择（如午餐吃什么、旅行目的地）。
• 社交场景：聚会游戏（真心话大冒险）。
• 企业/团体：自定义转盘用于活动抽奖、任务分配等。

用户画像：

• 18-35岁年轻群体，追求便捷与趣味性。
• 社交活跃用户，常参与聚会或线上互动。

三、核心功能

预设转盘

• 分类：美食、游戏、旅行、今日运势、随机任务等。
• 默认选项：每个分类包含10+预设选项（可后台配置）。

交互流程：

• 用户选择分类 → 点击“开始旋转” → 展示动画 → 显示结果。
• 支持结果分享至微信好友或朋友圈。

自定义转盘

功能点：

• 用户可输入文字选项（最多12项）。
• 保存模板：用户可命名并存储自定义转盘。
• 模板分享：生成链接或二维码供他人使用。

真心话大冒险

模式：

• 系统题库：内置100+条问题（50%真心话，50%大冒险）。
• 自定义题库：用户可添加个性化内容。

交互：

• 点击“开始”随机抽取题目，标记已选内容避免重复。

四、技术选型

使用DeepSeek开发搭建转盘小程序。

五、核心功能实现方案

1. 转盘基础功能

实现步骤：

转盘绘制

开始旋转

// 使用Canvas绘制转盘
const ctx = wx.createCanvasContext('wheelCanvas')
const sectors = 8 // 默认8等分
const colors = ['#FF6B6B','#4ECDC4','#45B7D1','#96CEB4','#FFEEAD','#D4A5A5']

sectors.forEach((item, index) => {
  ctx.beginPath()
  ctx.arc(centerX, centerY, radius, startAngle, endAngle)
  ctx.setFillStyle(colors[index % colors.length])
  ctx.fill()
  // 添加文字
  ctx.rotate(-Math.PI/sectors)
  ctx.fillText(item.text, textX, textY)
})
ctx.draw()

旋转动画

// 使用CSS3动画实现平滑旋转
const animation = wx.createAnimation({
  duration: 4000,
  timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)'
})

this.animation = animation.rotate(360 * 5 + targetAngle).step()
this.setData({
  wheelAnimation: this.animation.export()
})

结果计算

// 根据停止角度计算结果
const getResult = (stopAngle) => {
  const sectorAngle = 360 / sectors.length
  const normalizedAngle = (stopAngle % 360 + 360) % 360
  return sectors[Math.floor(normalizedAngle / sectorAngle)]
}

2. 自定义转盘功能

技术要点：

• 数据存储结构：

{
  "_id": "custom_123",
  "userId": "wx_abc123",
  "title": "晚餐选择",
  "options": ["火锅","烧烤","日料","家常菜"],
  "style": {
    "colors": ["#FF0000","#00FF00"],
    "fontSize": 16
  },
  "createTime": "2023-08-20T10:00:00Z"
}

• 云函数示例（保存转盘）：

// cloudfunctions/saveCustomWheel/index.js
const cloud = require('wx-server-sdk')
cloud.init()

exports.main = async (event) => {
  const db = cloud.database()
  return await db.collection('custom_wheels').add({
    data: {
      ...event.data,
      createTime: db.serverDate()
    }
  })
}

3. 真心话大冒险模块

实现方案：

题库管理：

// 使用云数据库分库存储
const truthCollection = db.collection('truth_questions')
const dareCollection = db.collection('dare_questions')

// 随机获取题目
const getRandomQuestion = async (type) => {
  const countRes = await db.collection(type).count()
  const total = countRes.total
  const random = Math.floor(Math.random() * total)
  return db.collection(type).skip(random).limit(1).get()
}

使用记录缓存：

// 本地缓存已选题目ID
const usedQuestions = wx.getStorageSync('usedQuestions') || []
if(usedQuestions.length >= 50) {
  usedQuestions.splice(0, 20) // 清理早期记录
}

六、关键技术难点解决方案

1. 流畅动画优化

• 性能优化方案：
• 使用transform: rotate()替代直接修改rotation属性
• 启用硬件加速：

.wheel {
  will-change: transform;
  transform: translateZ(0);
}

• 帧率控制：使用requestAnimationFrame进行动画更新

2. 多设备适配

/* 使用rpx单位适配不同屏幕 */
.wheel-container {
  width: 600rpx;
  height: 600rpx;
  margin: 40rpx auto;
}

/* 媒体查询适配平板 */
@media (min-width: 768px) {
  .wheel-container {
    width: 700rpx;
    height: 700rpx;
  }
}

3. 敏感词过滤

// 调用微信内容安全接口
const checkText = (content) => {
  return new Promise((resolve) => {
    wx.cloud.callFunction({
      name: 'msgSecCheck',
      data: {
        content: content
      }
    }).then(res => {
      resolve(res.result.errCode === 0)
    })
  })
}

七、项目目录

├── miniprogram/        # 小程序源码
│   ├── components/     # 公共组件
│   ├── pages/          # 页面目录
│   └── utils/          # 工具类
├── cloudfunctions/     # 云函数
├── project.config.json # 项目配置
└── README.md           # 开发文档