一款基于微信小程序的趣味转盘决策工具,帮助用户快速做出选择,解决"选择困难症"。
一、项目简介
转盘小程序是一个轻量级的微信小程序应用,通过可视化的转盘动画效果,让用户能够自定义选项并通过转盘随机抽取结果。适用于聚会游戏、日常决策、抽奖活动等多种场景。
二、功能特性
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:
-
新增自定义转盘功能;
-
新增收藏功能;
-
新增快速决定模式;
-
新增不重复抽取模式;
-
优化转盘动画效果;
-
新增多种预设场景;