为了吸引用户,商家会做一些活动,利用赠送或充值的积分来进行抽奖,现在来讲下微信小程序如果实现轮盘抽奖的功能,先看下图:

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

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

如何实现消息功能_如何实现微信小程序的轮盘抽奖功能相关推荐

  1. 在微信小程序上实现抽奖功能

    前言 本教程是基于 "apifm-wxapi" 模块,教你快速实现小程序开发,所以你可能需要先了解以下知识点: <创建 HelloWorld 项目> <使用 &q ...

  2. 企业微信加密消息体_用企业微信小程序发送消息

    在企业开发中,经常会碰到一些消息要及时推送到企业员工的手中.so 下面来说怎么向企业微信中的员工发消息. 本人只是记录下开发过程,详细参考https://work.weixin.qq.com/api/ ...

  3. 微信小程序canvas实现签名功能

    微信小程序canvas实现签名功能 在微信小程序项目中,开发模块涉及到手写签名功能,微信小程序canvas闪亮登场 文章目录 微信小程序canvas实现签名功能 前言 一.微信小程序canvas实现签 ...

  4. 微信小程序怎么开通支付功能?

    对于一些想通过小程序卖货的企业商家来说,在申请小程序后需要同时开通微信支付功能,才能在小程序上进行交易.那么关于微信小程序怎么开通支付功能,下面给大家说一说. 一.注册非个人主体的小程序账号 不管你是 ...

  5. 微信小程序摄像头监控_微信小程序拍照和摄像功能实现方法示例

    本文实例讲述了微信小程序拍照和摄像功能实现方法.分享给大家供大家参考,具体如下: 拍照 原先的想法是使用微信的camera组件来实现,并且模拟发朋友圈的样子来进行相机的设置,其实就是将camera组件 ...

  6. 下拉多选框 微信小程序_微信小程序下拉框功能的实例代码

    微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 选择接收班级 {{grade_name}} {{item}} wxss代码 /* 顶部 */ .top{ width: 100vw ...

  7. 微信小程序 拍照打卡功能实现

    微信小程序 拍照打卡功能实现 附Java代码 小程序端 签到页面wxml 签到页面js 拍照页面wxml 拍照页面js Java后台 保存照片 保存打卡数据 由于拍照组件是相当于一个块,用隐藏显示的方 ...

  8. 微信小程序接入客服功能

    微信小程序接入客服功能 1.提供客服入口 // 通过组件方式 <contact-button type="default-light" size="20" ...

  9. 微信小程序如何实现支付功能?看官方文档头疼(使用云函数的方式操作)

    先来个效果图  ^_^ 微信支付功能,个人公众号是没有办法进行开发支付功能的,需要是使用非个人公众号进行注册(如:营业执照等,可以去淘宝购买一个也行 大概500左右) 公众平台的配置可以参考文档,这里 ...

最新文章

  1. C# DataGridView 的UserDeletingRow事件,删除
  2. 处理错误:ORA-27101: shared memory realm does not exist
  3. Leetcode 169.多数元素 (每日一题 20210715)
  4. MySQL高级 - like模糊匹配
  5. 计算机网络实验(华为eNSP模拟器)——第六章 密码模式和AAA模式
  6. tensorflow综合示例1:tensorflow-keras的基本使用方式
  7. 开源netcore前后端分离,前端服务端渲染方案
  8. Java中的抽象类和接口(interface),abstract关键字的用法
  9. 基于CentOS7,MySQL5.7的同步/半同步复制实现
  10. 将知网格式的.caj文件转换为.pdf文件
  11. php二维码与电子名片
  12. 利用Aria2和Pandown实现科学下载百度云资源
  13. Latex排版图片样式
  14. java 压缩文件夹有几率压缩失败,打开显示不可预料的末端且用其他专业软件解压文件没压缩完全
  15. 百度地图移动端https 问题解决记录,也许是这个问题
  16. Lagrange multiplier method (拉格朗日乘数法)
  17. 属羊的几月出生最好命
  18. 基金21年发展极简史
  19. HashMap,ArrayMap,SparseArray 源码角度分析,Android中的数据结构你该如何去选择?
  20. 表单的补充——表单域

热门文章

  1. 60+PPT 下载丨Oracle Open World 2019
  2. 多场景下MySQL临时表的作用
  3. Oracle DG常用视图与运维护常用操作
  4. Scrum Master需要具备哪些能力和经验
  5. 华为AppCube入选Forrester《中国低代码平台市场分析报告》
  6. 看CarbonData如何用四招助力Apache Spark
  7. GaussDB(for Redis)揭秘:Redis存算分离架构最全解析
  8. 专家解惑 | 关于华为云盘古大模型,你想问的都在这里~
  9. 如何通过一个SDK轻松搞定人脸识别,拯救初入职场的程序猿
  10. 【华为云技术分享】ARM体系结构基础(3)