#天隆网络#如何实现微信小程序的轮盘抽奖功能
为了吸引用户 ， 商家会做一些活动 ， 利用赠送或充值的积分来进行抽奖 ， 现在来讲下微信小程序如果实现轮盘抽奖的功能 ， 先看下图：
文章图片
上面展示的就是轮盘抽奖 ， 一共有六个奖项 ， 其中一个是“不中奖”的 ， 其余五个均能获得奖品 ， 奖品的标题、奖品类型(实物或积分)、中奖概率 ， 每次抽奖需要多少积分等都可以在后台设置 ， 如下图所示：
文章图片
每次抽奖时扣除积分 ， 奖品类型有实物和积分 ， 如果是积分 ， 直接增加用户账号的积分 ， 这个比较简单 ， 如果是实物 ， 则要生成一个关联商品的礼品订单 。 中奖率：是指整个抽奖的分为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(){varawards=this.awardsConfig.awards;varawardsList=[];varturnNum=1/awards.length;//文字旋转turn值//奖项列表for(vari=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(){//中奖indexvarawardIndex=2;varrunNum=8;//旋转8周varduration=4000;//时长//旋转角度this.runDeg=this.runDeg||0;this.runDeg=this.runDeg+(360-this.runDeg%360)+(360*runNum-awardIndex*(360/6))//创建动画varanimationRun=wx.createAnimation({duration:duration,timingFunction:'ease'})animationRun.rotate(this.runDeg).step();this.setData({animationData:animationRun.export(),btnDisabled:'disabled'});//中奖提示varawardsConfig=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代码进行讲解 ， 这是只提供一种思路 ， 大家可以根据实际的情况对程序功能进行调整 。
推荐阅读
- 工业互联网@程序员的术与道：术——编程基本功之网络编程
- 聚成教育Word文档如何快速实现段落整体上下移动
- 晨财经陈春花：如何做到美国围剿之下的强劲增长？华为像是一个植物|2020财经云峰会
- 聚成教育Word 复制文字到PPT 时，如何保留或清除格式，从
- 科技曰报沈郎乡 侠天下 网红餐厅汤系火锅 尤溪桂峰4A景区，凤槿网络
- 淘宝■互联网公司是怎么赚钱的？如何把流量变成现金呢？
- 『宇航员』当宇航员在舱外工作时不小心脱离国际空间站，该如何实现自救？
- 【载人飞船】“胖五”柔性充气性返回舱异常，问题大不大？看专家如何解读
- 「客户端」学习网络编程，不了解TCP协议？难怪面试被刷下去，还不来学习！
- 精选热点资讯沈阳市沈河区：网络直播助现代商贸业转型升级