微信小程序轮盘抽奖功能的实现方法与技巧-快创小站

微信小程序轮盘抽奖功能实现详解

　　为了吸引用户，商家经常会通过赠送或充值积分的方式，推出抽奖活动。今天，我们就来聊聊如何在微信小程序中实现轮盘抽奖功能。先来看一张效果图：

　　![轮盘抽奖效果图]

　　从图中可以看到，轮盘上一共有六个奖项，其中一个是不中奖，其余五个都是奖品。奖品的标题、类型（实物或积分）、中奖概率以及每次抽奖所需的积分，都可以在后台进行设置。具体设置界面如下：

　　![后台设置界面]

抽奖机制解析

　　每次用户抽奖时，系统会扣除相应的积分。奖品的类型分为两种：积分和实物。如果抽中的是积分，系统会直接增加用户账户中的积分；如果是实物，则会生成一个关联商品的礼品订单。

中奖率设置：整个抽奖活动被分为1万份，因此最低的中奖率可以设置为0.01%。如果不想让用户抽到某个奖项，可以将其概率设置为0%，这样用户就永远无法抽到该奖项。后台接口使用的语言和计算中奖率的代码如下：

$=(1,); // 从1到随机一个数

_ = 1000; // 例如中奖率是10%，则_的值为1000

　　特别提醒：不中奖的概率是由100%减去其他五个奖项的概率自动生成的。因此，当后台修改某个奖项的概率时，不中奖的概率也需要同步更新。

小程序代码实现

({

// 奖品配置

prizeConfig: {

isClickable: true, // 是否允许点击抽奖

prizeList: [

{ id: 0, name: '300积分' },

{ id: 1, name: '某商品' },

{ id: 2, name: '1000积分' },

{ id: 3, name: '100积分' },

{ id: 4, name: '不中奖' },

{ id: 5, name: '某实物' }

]

},

onLoad: function () {

this.init();

},

// 画抽奖圆盘

drawWheel: function () {

var ctx = wx.createCanvasContext('wheelCanvas');

var prizeList = this.data.prizeList;

var angle = 1 / prizeList.length; // 文字旋转角度

for (var i = 0; i < prizeList.length; i++) {

ctx.fillText(prizeList[i].name, i  angle + '', i  angle + angle / 2 + '');

}

ctx.draw();

},

// 发起抽奖

startDraw: function () {

var prizeIndex = 2; // 中奖索引

var rotateCount = 8; // 旋转8周

var duration = 4000; // 时长

var rotateAngle = this.data.rotateAngle || 0;

rotateAngle = rotateAngle + (360 - rotateAngle % 360) + (360  rotateCount - prizeIndex  (360 / 6));

var animation = wx.createAnimation({

duration: duration,

timingFunction: 'ease'

});

animation.rotate(rotateAngle).step();

this.setData({

rotateAnimation: animation.export()

});

// 中奖提示

var prize = this.data.prizeList[prizeIndex];

setTimeout(function () {

wx.showModal({

title: '恭喜',

content: '获得' + prize.name,

showCancel: false

});

this.setData({

isClickable: true

});

}.bind(this), duration);

}

})