如何实现消息功能_如何实现微信小程序的轮盘抽奖功能
为了吸引用户,商家会做一些活动,利用赠送或充值的积分来进行抽奖,现在来讲下微信小程序如果实现轮盘抽奖的功能,先看下图:
上面展示的就是轮盘抽奖,一共有六个奖项,其中一个是“不中奖”的,其余五个均能获得奖品,奖品的标题、奖品类型(实物或积分)、中奖概率,每次抽奖需要多少积分等都可以在后台设置,如下图所示:
每次抽奖时扣除积分,奖品类型有实物和积分,如果是积分,直接增加用户账号的积分,这个比较简单,如果是实物,则要生成一个关联商品的礼品订单。中奖率:是指整个抽奖的分为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代码进行讲解,这是只提供一种思路,大家可以根据实际的情况对程序功能进行调整。
如何实现消息功能_如何实现微信小程序的轮盘抽奖功能相关推荐
- 在微信小程序上实现抽奖功能
前言 本教程是基于 "apifm-wxapi" 模块,教你快速实现小程序开发,所以你可能需要先了解以下知识点: <创建 HelloWorld 项目> <使用 &q ...
- 企业微信加密消息体_用企业微信小程序发送消息
在企业开发中,经常会碰到一些消息要及时推送到企业员工的手中.so 下面来说怎么向企业微信中的员工发消息. 本人只是记录下开发过程,详细参考https://work.weixin.qq.com/api/ ...
- 微信小程序canvas实现签名功能
微信小程序canvas实现签名功能 在微信小程序项目中,开发模块涉及到手写签名功能,微信小程序canvas闪亮登场 文章目录 微信小程序canvas实现签名功能 前言 一.微信小程序canvas实现签 ...
- 微信小程序怎么开通支付功能?
对于一些想通过小程序卖货的企业商家来说,在申请小程序后需要同时开通微信支付功能,才能在小程序上进行交易.那么关于微信小程序怎么开通支付功能,下面给大家说一说. 一.注册非个人主体的小程序账号 不管你是 ...
- 微信小程序摄像头监控_微信小程序拍照和摄像功能实现方法示例
本文实例讲述了微信小程序拍照和摄像功能实现方法.分享给大家供大家参考,具体如下: 拍照 原先的想法是使用微信的camera组件来实现,并且模拟发朋友圈的样子来进行相机的设置,其实就是将camera组件 ...
- 下拉多选框 微信小程序_微信小程序下拉框功能的实例代码
微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 选择接收班级 {{grade_name}} {{item}} wxss代码 /* 顶部 */ .top{ width: 100vw ...
- 微信小程序 拍照打卡功能实现
微信小程序 拍照打卡功能实现 附Java代码 小程序端 签到页面wxml 签到页面js 拍照页面wxml 拍照页面js Java后台 保存照片 保存打卡数据 由于拍照组件是相当于一个块,用隐藏显示的方 ...
- 微信小程序接入客服功能
微信小程序接入客服功能 1.提供客服入口 // 通过组件方式 <contact-button type="default-light" size="20" ...
- 微信小程序如何实现支付功能?看官方文档头疼(使用云函数的方式操作)
先来个效果图 ^_^ 微信支付功能,个人公众号是没有办法进行开发支付功能的,需要是使用非个人公众号进行注册(如:营业执照等,可以去淘宝购买一个也行 大概500左右) 公众平台的配置可以参考文档,这里 ...
最新文章
- C# DataGridView 的UserDeletingRow事件,删除
- 处理错误:ORA-27101: shared memory realm does not exist
- Leetcode 169.多数元素 (每日一题 20210715)
- MySQL高级 - like模糊匹配
- 计算机网络实验(华为eNSP模拟器)——第六章 密码模式和AAA模式
- tensorflow综合示例1:tensorflow-keras的基本使用方式
- 开源netcore前后端分离,前端服务端渲染方案
- Java中的抽象类和接口(interface),abstract关键字的用法
- 基于CentOS7,MySQL5.7的同步/半同步复制实现
- 将知网格式的.caj文件转换为.pdf文件
- php二维码与电子名片
- 利用Aria2和Pandown实现科学下载百度云资源
- Latex排版图片样式
- java 压缩文件夹有几率压缩失败,打开显示不可预料的末端且用其他专业软件解压文件没压缩完全
- 百度地图移动端https 问题解决记录,也许是这个问题
- Lagrange multiplier method (拉格朗日乘数法)
- 属羊的几月出生最好命
- 基金21年发展极简史
- HashMap,ArrayMap,SparseArray 源码角度分析,Android中的数据结构你该如何去选择?
- 表单的补充——表单域
热门文章
- 60+PPT 下载丨Oracle Open World 2019
- 多场景下MySQL临时表的作用
- Oracle DG常用视图与运维护常用操作
- Scrum Master需要具备哪些能力和经验
- 华为AppCube入选Forrester《中国低代码平台市场分析报告》
- 看CarbonData如何用四招助力Apache Spark
- GaussDB(for Redis)揭秘:Redis存算分离架构最全解析
- 专家解惑 | 关于华为云盘古大模型,你想问的都在这里~
- 如何通过一个SDK轻松搞定人脸识别,拯救初入职场的程序猿
- 【华为云技术分享】ARM体系结构基础(3)