400-800-9385
网站建设资讯详细

河南省安阳快三彩票:如何实现微信小程序的轮盘抽奖功能

发表日期:2019-02-02 00:00:01   作者来源:方维网络   浏览:518   标签:微信小程序    抽奖小程序    
为了吸引用户,商家会做一些活动,利用赠送或充值的积分来进行抽奖,现在来讲下微信小程序如果实现轮盘抽奖的功能,先看下图:
 

河南体彩快赢481视频 www.79vp.cn 抽奖

上面展示的就是轮盘抽奖,一共有六个奖项,其中一个是“不中奖”的,其余五个均能获得奖品,奖品的标题、奖品类型(实物或积分)、中奖概率,每次抽奖需要多少积分等都可以在后台设置,如下图所示:

抽奖小程序后台设置

每次抽奖时扣除积分,奖品类型有实物和积分,如果是积分,直接增加用户账号的积分,这个比较简单,如果是实物,则要生成一个关联商品的礼品订单。
中奖率:是指整个抽奖的分为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代码进行讲解,这是只提供一种思路,大家可以根据实际的情况对程序功能进行调整。
 
 

 
如没特殊注明,文章均为方维网络原创,转载请注明来自//www.79vp.cn/news/4891.html
  • 时隔12载杀回决赛圈 “沙漠之狐”力争不做背景帝 2019-05-26
  • 参与2016全民营养周,为您的健康助力 2019-05-26
  • 望川十年,看见中国社会的成长 2019-05-24
  • 端午北京景区接待人数收入双降 未收到一日游投诉 2019-05-24
  • 回复@老老保老张工:伪高工才会庸俗地把“利”等同于经济利益,而对咱这种层次的人来说,“利”更多的是指荣誉感、实现感和自我超越! 2019-05-17
  • 2014高考大片儿上演 铺红色地毯迎明日之星【5】 2019-05-16
  • 光是一个梨子的滋味就改变了方向,说讲事实摆道理,就是要你按他的指挥棒转,属于忽悠网友的口实 2019-05-16
  • 外交部:美方宣布停止美韩军演证明“双暂停”倡议切实可行 2019-05-09
  • 学习贯彻十九大精神不忘初心 牢记使命 奔向未来 2019-05-09
  • 长治市妇幼保健院“洪荒之力”解救产妇分娩之痛 2019-05-08
  • 你找事我就还击,伊朗波斯湾亮出防空导弹和远程对海新式导弹! 2019-05-08
  • 英国发生4.2级地震 网友淡定开起“脱欧”玩笑 2019-05-06
  • 习近平山东考察,这几个关键词值得深思 2019-04-30
  • 规模化生产或为AI发展方向 2019-04-30
  • 烟 雾谈资中国国家地理网 2019-04-23
  • 767| 585| 148| 929| 937| 286| 641| 100| 182| 214|