基于微信小程序原生框架搭建的转盘小程序1.0（附源码）

一款基于微信小程序的趣味转盘决策工具，帮助用户快速做出选择，解决"选择困难症"。

一、项目简介

转盘小程序是一个轻量级的微信小程序应用，通过可视化的转盘动画效果，让用户能够自定义选项并通过转盘随机抽取结果。适用于聚会游戏、日常决策、抽奖活动等多种场景。

二、功能特性

1、核心功能：

转盘抽奖：支持自定义转盘选项，通过动画转盘随机抽取结果；
热门小决定：内置多种预设场景（真心话大冒险、吃什么、送什么礼物等）；
自定义转盘：支持创建、编辑、删除个人自定义转盘；
收藏功能：可收藏喜欢的小决定，方便快速使用；

2、高级设置：

音效开关：支持开启/关闭转盘转动音效；
快速决定：开启后转盘转动时间缩短，快速得出结果；
不重复抽取：开启后同一轮次不会重复抽到相同选项；
概率设置：支持为选项设置中奖概率（高级功能）；

3、技术特性

最多支持17个选项；
单个选项最多13个汉字；
流畅的 CSS3 动画效果；
本地数据存储，无需后端服务；

三、项目结构

复制代码

转盘小程序1.0├── app.js                 # 小程序入口文件├── app.json               # 小程序全局配置├── app.wxss               # 全局样式文件├── config.js              # 配置文件（预留）├── constants.js           # 常量定义（接口配置预留）├── project.config.json    # 项目配置文件│├── audio/                 # 音频资源│   ├── start.mp3          # 转盘开始音效│   ├── mid.mp3            # 转盘转动音效│   ├── mid2.mp3           # 转盘转动音效2│   ├── mid3.mp3           # 转盘转动音效3│   ├── mid4.mp3           # 转盘转动音效4（快速模式）│   └── stop.mp3           # 转盘停止音效│├── components/            # 组件目录│   ├── dialog/            # 弹窗组件│   │   ├── dialog.js│   │   ├── dialog.json│   │   ├── dialog.wxml│   │   └── dialog.wxss│   └── zhuanpan/          # 转盘核心组件│       ├── zhuanpan.js    # 转盘逻辑│       ├── zhuanpan.json│       ├── zhuanpan.wxml│       └── zhuanpan.wxss│├── images/                    # 图片资源│   ├── canvas_button_*.png    # 画布按钮图片│   ├── icon_edit_*.png        # 编辑页面图标│   ├── icon_list_*.png        # 列表页面图标│   ├── icon_set_*.png         # 设置页面图标│   └── icon_tab_*.png         # Tab栏图标│├── pages/                 # 页面目录│   ├── index/             # 首页（转盘主页面）│   │   ├── index.js│   │   ├── index.json│   │   ├── index.wxml│   │   └── index.wxss│   ├── list/              # 列表页（创建小决定）│   │   ├── list.js│   │   ├── list.json│   │   ├── list.wxml│   │   └── list.wxss│   ├── set/               # 设置页│   │   ├── set.js│   │   ├── set.json│   │   ├── set.wxml│   │   └── set.wxss│   ├── edit/              # 编辑页（创建/编辑转盘）│   │   ├── edit.js│   │   ├── edit.json│   │   ├── edit.wxml│   │   └── edit.wxss│   └── ceshi/             # 测试页│       ├── ceshi.js│       ├── ceshi.json│       ├── ceshi.wxml│       └── ceshi.wxss│└── utils/                 # 工具函数    ├── util.js            # 通用工具函数    └── xiaojueding.js     # 预设小决定数据

四、技术栈

框架：微信小程序原生框架；
视图层：WXML + WXSS；
逻辑层：JavaScript (ES6)；
存储：微信小程序本地存储 API；
动画：微信小程序 Animation API；

五、核心组件说明

1、转盘组件 (zhuanpan)

位于 `components/zhuanpan/`，是整个应用的核心组件。

1）组件属性

2）组件方法

3）组件事件

六、页面说明

1、首页 (pages/index)

转盘主页面，展示转盘和热门小决定列表。

主要功能：

显示转盘组件；
展示热门小决定列表；
切换不同的小决定；
显示抽奖结果；

2、列表页 (pages/list)

管理小决定页面，分为"热门"和"个人"两个标签。

主要功能：

浏览热门小决定；
收藏/取消收藏小决定；
管理个人创建的小决定；
跳转到编辑页面；

3、编辑页 (pages/edit)

创建或编辑小决定页面。

主要功能：

输入小决定名称；
添加/删除选项；
编辑选项内容；
保存到本地存储；

4、设置页 (pages/set)

应用设置页面。

主要功能：

开启/关闭音效；
开启/关闭快速决定；
开启/关闭不重复抽取；

七、数据存储

使用微信小程序本地存储 API 存储数据：

八、预设小决定

内置多种场景的小决定模板：

真心话大冒险 - 聚会游戏；
送什么礼物 - 礼物选择；
中午吃什么 - 餐饮决策；
周末去哪玩 - 娱乐选择；
谁去买单 - 社交场景；
今天穿什么 - 穿搭决策；
喝什么奶茶 - 饮品选择；
玩什么游戏 - 游戏选择；
运动项目 - 健身决策；
学习计划 - 学习安排；

九、使用说明

1、基本使用

启动应用：微信扫码或搜索小程序名称进入；
使用转盘：点击首页的"GO"按钮开始转动；
切换场景：在首页下方选择不同的小决定；
查看结果：转盘停止后显示中奖选项；

2、创建自定义转盘

进入"创建小决定"页面；
点击"添加"按钮；
输入小决定名称和选项；
点击保存；

3、收藏小决定

在"创建小决定"页面浏览热门列表；
点击心形图标收藏喜欢的小决定；
收藏后可在"个人"标签查看；

十、开发说明

1、环境要求

微信开发者工具；
微信小程序基础库 2.0+；

2、安装运行

下载项目代码（源码可滴滴）；
使用微信开发者工具打开项目目录；
点击"编译"按钮预览；

3、自定义配置

可在 `config.js` 中配置：

复制代码

```javascriptmodule.exports = {   // appId: '你的小程序AppID',}```

十一、更新日志

v1.0：

新增自定义转盘功能；
新增收藏功能；
新增快速决定模式；
新增不重复抽取模式；
优化转盘动画效果；
新增多种预设场景；