为了吸引用户,商家会做一些活动,利用赠送或充值的积分来进行抽奖,现在来讲下微信小程序如果实现轮盘抽奖的功能,先看下图:
上面展示的就是轮盘抽奖,一共有六个奖项,其中一个是“不中奖”的,其余五个均能获得奖品,奖品的标题、奖品类型(实物或积分)、中奖概率,每次抽奖需要多少积分等都可以在后台设置,如下图所示:
每次抽奖时扣除积分,奖品类型有实物和积分,如果是积分,直接增加用户账号的积分,这个比较简单,如果是实物,则要生成一个关联商品的礼品订单。
中奖率:是指整个抽奖的分为1万份,所以最低的中奖率可以设置成0.01%(当然如果不想用户抽到某个奖项,可以设置成0%,这样用户就永远不可能抽到),后台的接口使用的PHP语言,计算中奖率的代码如下图:
其中$i=rand(1,10000);即从1到10000随机一个数。
winning_odds是指某个奖项的中奖数值,例如中奖率是10%,则在winning_odds的值为1000.特别提一下,不中奖的概率是由100%-其他五个奖项的概率而自动生成的。所以后台修改某个奖项的概率的时候,需要更新不中奖的概率。
小程序JS方面:
Page({
//奖品配置
awardsConfig: {
btnDisabled: ‘’,//是否允许点击抽奖
awards: [
{ 'index': 0, 'name': '300积分' },
{ 'index': 1, 'name': '某商品' },
{ 'index': 2, 'name': '1000积分' },
{ 'index': 3, 'name': '100积分' },
{ 'index': 4, 'name': '不中奖' },
{ 'index': 5, 'name': '某实物' }
]
},
onReady: function (e) {
this.drawAwardRoundel();
},
//画抽奖圆盘
drawAwardRoundel: function () {
var awards = this.awardsConfig.awards;
var awardsList = [];
var turnNum = 1 / awards.length; // 文字旋转 turn 值
// 奖项列表
for (var i = 0; i < awards.length; i++) {
awardsList.push({ turn: i * turnNum + 'turn', lineTurn: i * turnNum + turnNum / 2 + 'turn', award: awards[i].name });
}
this.setData({
btnDisabled: this.awardsConfig.chance ? '' : 'disabled',
awardsList: awardsList
});
},
//发起抽奖
playReward: function () {
//中奖index
var awardIndex = 2;
var runNum = 8;//旋转8周
var duration = 4000;//时长
// 旋转角度
this.runDeg = this.runDeg || 0;
this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - awardIndex * (360 / 6))
//创建动画
var animationRun = wx.createAnimation({
duration: duration,
timingFunction: 'ease'
})
animationRun.rotate(this.runDeg).step();
this.setData({
animationData: animationRun.export(),
btnDisabled: 'disabled'
});
// 中奖提示
var awardsConfig = this.awardsConfig;
setTimeout(function () {
wx.showModal({
title: '恭喜',
content: '获得' + (awardsConfig.awards[awardIndex].name),
showCancel: false
});
this.setData({
btnDisabled: ''
});
}.bind(this), duration);
}
})
小程序的wxml代码如下图:
我们这里就不详细讲如何调用API接口,如何判断是获取了哪个奖项了,大家可以根据初始的JS代码来套程序,因为改变了awardIndex值,对应的奖项也会出来,通过后台接口的返回值,可以判断是积分还是实物,然后进行下一步操作.为了防止用户连续点击“抽奖”的按钮,需要用 btnDisabled来判断用户是否可以继续抽奖,当轮盘尚未转完时,是不允许重复点击的。
以上就是对微信小程序轮盘抽奖后台功能,抽奖概率,小程序JS代码进行讲解,这是只提供一种思路,大家可以根据实际的情况对程序功能进行调整。
分享
热搜
相关推荐
-
网易6月6日官宣内容:6月11日开放全民测试,6月内正式上线
胖哥游戏说 596跟贴 -
网易魔兽开测;魔兽6.11删档测;战网重启;剑网3无界开测 | 6月07日游戏日报
游戏圈那些事儿 5跟贴 -
网易爆炸惊喜!6月11日就可以玩上国服魔兽!这次真的回家了!
苹果牛看游戏 305跟贴 -
玩魔兽最久的玩家有多久?18.4万小时真的是人类吗?
苹果牛看游戏 436跟贴 -
5000块打场游戏比赛?顶级操作手被喷惨:打成这样好意思要钱?
蚂蚁懒得说 3跟贴 -
暴雪国服战网回来啦~WOW~还得是网易
临墨有余 21跟贴 -
战网重启后,网易大神已支持查询暴雪游戏足迹
三易生活 5跟贴 -
6分领略: 高仿爱马仕风衣灰包包价格?保举6个置备方式!
戏精北鼻老茎 -
6分领略: 高仿爱马仕单肩包:推出这5个安心途径
你好阿呸 -
4分钟了解!高仿爱马仕康康?引荐这五个网站
北漂拍客小乜 -
1分详知: 高仿爱马仕戒指?推四个安心途径
北漂拍客小乜 -
0分详记: 高仿爱马仕包包图片?试验这4个通道
周六野花 -
2分钟了解!高仿爱马仕的种类?推二个安心途径
戏精北鼻老茎 -
1分阐明: 高仿爱马仕包网址?安利3进购通道
汽车达人王宇轩 -
1分详知: 高仿爱步鞋价格?推八个安心途径
格子鱼一写 -
1分钟了解高仿爱马仕和正品区别:推出这5个安心途径
北漂拍客小乜 -
1分诠释: 高仿爱马仕单鞋,试验这8个通道
你好阿呸 -
6分详述: 高仿爱马仕价格?了解这五个通道看看
北漂拍客小乜 -
8分详知: 高仿包购买注意事项?安利3进购通道
加密老四 -
4分钟了解!高仿爱马仕空姐包包,试验这2个通道
北漂拍客小乜
热门跟贴