基于微信小程序原生框架搭建的转盘小程序1.0(附源码)
- 2026-09-22 08:46:15
一款基于微信小程序的趣味转盘决策工具，帮助用户快速做出选择，解决"选择困难症"。
一、项目简介
转盘小程序是一个轻量级的微信小程序应用，通过可视化的转盘动画效果，让用户能够自定义选项并通过转盘随机抽取结果。适用于聚会游戏、日常决策、抽奖活动等多种场景。
二、功能特性
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',}```
十一、源码获取方式
点赞+留言后，后台私信获取转盘小程序源码
