基于微信小程序原生框架搭建的转盘小程序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:

  • 新增自定义转盘功能;

  • 新增收藏功能;

  • 新增快速决定模式;

  • 新增不重复抽取模式;

  • 优化转盘动画效果;

  • 新增多种预设场景;

相关推荐
Emma_Maria2 小时前
【小程序】插件申请成功,待插件提供方确认通过申请后才能使用
微信小程序
捕捉一只前端小白2 小时前
cpolar内网穿透以及微信小程序域名设置
前端·vue.js·微信小程序·小程序
demo007x16 小时前
如何提高 AI 做小程序的效率?
微信小程序·ai编程·claude
2601_9520137616 小时前
新麦同城到家预约上门小程序V3全开源版 vueadmin+unipp开源前端+小程序端
小程序
土土哥V_araolin18 小时前
双迪大健康模式系统开发
小程序·个人开发·零售
2501_9160074719 小时前
HTTPS 抓包的流程,代理抓包、设备数据线直连抓包、TCP 数据分析
网络协议·tcp/ip·ios·小程序·https·uni-app·iphone
css在哪里20 小时前
小程序版 Three.js 入门 Demo(完整可运行)
3d·小程序·threejs
游戏开发爱好者820 小时前
React Native iOS 代码如何加密,JS 打包 和 IPA 混淆
android·javascript·react native·ios·小程序·uni-app·iphone
CHU72903521 小时前
社区生鲜买菜小程序前端功能版块设计及玩法介绍
前端·小程序