微信小程序活动抽奖简单实现，包教包会

问题：

针对用户使用活动抽奖，获得抽奖得到商品的成就以及满足感，那么我们应该怎么去实现小程序去转盘抽奖活动呢

例如：项目需要抽奖实现相应的奖品奖励

---

实现方法

实现的效果如下：

 实现的主要代码：

Page({

  data: {
    dotList: [],
    dotColor1: 'pink', //圆点颜色1  
    dotColor2: 'linear-gradient(180deg, #1BFCE2 0%, #DBF5FF 100%)', //圆点颜色2  
    remian_num: 5, //剩余抽奖的次数
    prize_list: [],
    lock: false, //防止重复点击
    prizeListIndex: [0, 1, 2, 4, 7, 6, 5, 3], //抽奖顺序的索引
    prizeListIndex1: [0, 1, 2, 7, 3, 6, 5, 4], //奖品索引
    over: false, //是否加载完奖品数据
    start_btn: true, //是否有抽奖机会
    innerAudioContext: "", //按钮音
  },

  // 范围随机数
  randomRange(lower, upper) {
    return Math.floor(Math.random() * (upper - lower)) + lower;
  },
  onLoad: function (options) {
    this.init()
  },
  init() {
    //圆点设置  
    var leftCircle = 7.5;
    var topCircle = 8;
    var dotList = [];
    for (var i = 0; i < 28; i++) {
      if (i == 0) {
        topCircle = 8;
        leftCircle = 64;
      } else if (i < 8) {
        topCircle = 8;
        leftCircle = leftCircle + 72;
      } else if (i == 8) {
        topCircle = 54
        leftCircle = 626;
      } else if (i < 14) {
        topCircle = topCircle + 86;
        leftCircle = 626;
      } else if (i == 14) {
        topCircle = 538;
        leftCircle = 570;
      } else if (i < 22) {
        topCircle = 538;
        leftCircle = leftCircle - 72;
      } else if (i == 22) {
        topCircle = 484;
        leftCircle = 10;
      } else if (i < 28) {
        topCircle = topCircle - 86;
        leftCircle = 10;
      } else {
        return
      }
      dotList.push({
        topCircle: topCircle,
        leftCircle: leftCircle
      });
    }
    this.setData({
      dotList: dotList
    })

    // 圆点闪烁  
    setInterval(() => {
      if (this.data.dotColor1 == 'pink') {
        this.setData({
          dotColor1: 'linear-gradient(180deg, #1BFCE2 0%, #DBF5FF 100%)',
          dotColor2: 'pink',
        })
      } else {
        this.setData({
          dotColor1: 'pink',
          dotColor2: 'linear-gradient(180deg, #1BFCE2 0%, #DBF5FF 100%)',
        })
      }
    }, 500)
  },

  onShow: function () {
    this.getData();
  },
  getData() {
    var list = [{
      id: "001",
      icon: '/img/wuliu_icon5.png',
      name: '奖品一',
    },
    {
      id: "002",
      icon: '/img/wuliu_icon5.png',
      name: '谢谢惠顾',
    },
    {
      id: "003",
      icon: '/img/wuliu_icon5.png',
      name: '奖品二',
    },
    {
      id: "004",
      icon: '/img/wuliu_icon5.png',
      name: '奖品三',
    },
    {
      id: "005",
      icon: '/img/wuliu_icon5.png',
      name: '奖品四',
    },
    {
      id: "006",
      icon: '/img/wuliu_icon5.png',
      name: '谢谢惠顾',
    },
    {
      id: "007",
      icon: '/img/wuliu_icon5.png',
      name: '奖品五',
    },
    {
      id: "008",
      icon: '/img/wuliu_icon5.png',
      name: '奖品六',
    },
    ];
    let prize_list = list;
    let pIndex = this.data.prizeListIndex1;
    for (let i in prize_list) {
      prize_list[i].active = false;
      prize_list[i].index = pIndex[i];
    }
    this.setData({
      prize_list,
      over: true
    })
  },

  // 抽奖动画
  Timer: null,
  LotteryEnd: false, //抽奖结束
  nowRunIndex: 0, //ative样式的索引，
  luckChose(luckIndex) {
    return new Promise((resolve, reject) => {
      let that = this
      let maxTime = this.randomRange(2500,4000);
      let time_speed = 0.01; //速率
      if (this.nowRunIndex == 0) { //初始化从索引0开始显示抽奖激活的边框
        this.setData({
          'prize_list.[0].active': true
        })
      }
      function lotteryRun(time) {
        that.Timer = setTimeout(() => {
          let list = that.data.prize_list;
          ++that.nowRunIndex;
          that.nowRunIndex >= that.data.prizeListIndex.length ? that.nowRunIndex = 0 : '';
          let Pindex = that.data.prizeListIndex[that.nowRunIndex];
          console.log(Pindex)
          list.map((item, index) => {
            item.active = Pindex == index;
          })
          that.setData({
            prize_list: list
          })
          if (that.LotteryEnd && luckIndex == that.nowRunIndex) {
            clearTimeout(that.Timer);
            that.LotteryEnd = false;
            that.setData({
              lock: false
            })
            resolve(list.filter(v => {
              return v.active
            }))
          } else {
            time_speed += 0.5;
            lotteryRun(time + (time_speed));
          }
        }, time);
      }

      lotteryRun(80);
      setTimeout(() => {
        this.LotteryEnd = true;
      }, maxTime);
    })
  },
  audioPlay() {
    const innerAudioContext = wx.createInnerAudioContext()
    innerAudioContext.autoplay = false // 是否自动开始播放，默认为 false
    innerAudioContext.loop = true // 是否循环播放，默认为 false
    wx.setInnerAudioOption({ // ios在静音状态下能够正常播放音效
      obeyMuteSwitch: false, // 是否遵循系统静音开关，默认为 true。当此参数为 false 时，即使用户打开了静音开关，也能继续发出声音。
      success: function (e) { },
      fail: function (e) { }
    })
    innerAudioContext.src = "/pages/jsCase/img/btnaudio.mp3"
    innerAudioContext.play();
    this.setData({
      innerAudioContext,
    })
  },

  lottery() {
    if (!this.data.over) return
    // 防止重复点击
    if (this.data.lock) return
    this.setData({
      lock: true
    })
    let {
      prize_list
    } = this.data;
    if (this.data.remian_num.length <= 0 || this.data.prize_list.length === 0) return;
    this.audioPlay()
    let id = "005",
      currIndex = "";
    for (let i in prize_list) {
      if (id == prize_list[i].id) {
        currIndex = prize_list[i].index
      }
    }
    this.luckChose(currIndex).then(res => {
      this.data.innerAudioContext.stop()
      wx.showToast({
        title: '你抽中了' + res[0].name,
        icon: 'none'
      })
    })
  },
})

活动转盘抽奖，实现起来比较简单，但是细节也是挺多的，比如抽奖声音的播放以及停止

活动的转盘特效以及活动抽奖中了之后需要展示的效果以及处理等。

总结

为了方便大家，节约大家的时间，下面我将源码推送给你们，包教包会哈，拿来直接可以使用，不懂的可以私聊我

资源下载