大转盘抽奖小程序源码

源码介绍

大转盘抽奖小程序源码是一款基于 微信小程序 开发的互动抽奖系统，通过点击按钮触发转盘旋转，随机抽取奖品。其核心特点在于 跑马灯旋转效果 和 动态奖品展示，界面设计简洁酷炫。源

源码运行后的界面示意图：

技术实现与功能模块

1. 核心代码解析

以下代码片段展示了小程序的核心逻辑，包括 圆点位置初始化、奖品布局计算 和 抽奖动画控制：

// index.js
Page({
  data: {
    circleList: [],      // 圆点位置数组
    awardList: [],       // 奖品位置数组
    colorCircleFirst: '#FFDF2F', // 圆点颜色1
    colorCircleSecond: '#FE4D32', // 圆点颜色2
    colorAwardDefault: '#F5F0FC', // 奖品默认颜色
    colorAwardSelect: '#ffe400', // 奖品选中颜色
    indexSelect: 0,      // 当前选中奖品索引
    isRunning: false,    // 是否正在抽奖
    imageAward: [        // 奖品图片路径数组
      '../../images/1.jpg',
      '../../images/2.jpg',
      // ... 其余图片路径
    ],
  },

  onLoad: function () {
    // 初始化圆点位置
    var circleList = [];
    for (var i = 0; i < 24; i++) {
      // 计算圆点坐标并添加到数组
      // 省略具体计算逻辑
      circleList.push({ topCircle: topCircle, leftCircle: leftCircle });
    }
    this.setData({ circleList: circleList });

    // 奖品位置初始化
    var awardList = [];
    for (var j = 0; j < 8; j++) {
      // 计算奖品坐标并添加到数组
      // 省略具体计算逻辑
      awardList.push({ topAward: topAward, leftAward: leftAward, imageAward: imageAward });
    }
    this.setData({ awardList: awardList });

    // 圆点闪烁动画
    setInterval(() => {
      // 切换颜色实现闪烁效果
    }, 500);
  },

  startGame: function () {
    if (this.data.isRunning) return;
    this.setData({ isRunning: true });

    var timer = setInterval(() => {
      // 控制转盘旋转速度和停止逻辑
      // 随机选择奖品并弹出提示
      wx.showModal({
        title: '恭喜您',
        content: '获得了第' + (this.data.indexSelect + 1) + '个优惠券',
        success: (res) => {
          if (res.confirm) {
            this.setData({ isRunning: false });
          }
        }
      });
    }, 200 + i);
  }
});

2. 技术亮点

• 动态布局计算：通过 for 循环和坐标计算，实现圆点和奖品的环形分布，适配不同屏幕尺寸。
• 动画控制：使用 setInterval 控制转盘旋转速度，结合 wx.showModal 实现抽奖结果提示。
• 样式交互：通过颜色切换（如 colorCircleFirst 和 colorCircleSecond）增强视觉反馈，提升用户参与感。

部署与使用步骤

1. 开发环境要求

• 微信开发者工具：需安装最新版本的 微信小程序开发工具。
• 项目结构：源码包含 index.js、index.wxml、index.wxss 和资源文件（如图片、样式表）。

2. 部署流程

1. 导入源码：
   • 在微信开发者工具中创建新项目，选择源码目录作为项目路径。
2. 配置资源路径：
   • 检查 imageAward 数组中的图片路径，确保图片文件位于 images/ 目录下。
3. 运行测试：
   • 点击工具栏的 编译 按钮，观察模拟器中的转盘效果。
4. 发布上线：
   • 登录 微信公众平台，提交小程序审核并发布。

源码下载

本项目的完整源码可通过以下百度网盘链接下载：
大转盘抽奖小程序源码下载
提取码：mmti