抽奖大转盘是个很百搭的小应用,各种大小app都喜欢挂上这么个小东西嗨皮一下。核心功能就是一个概率算法,再结合应用场景做的一些小调整。
今天介绍一下《爱豆UP榜》的抽奖大转盘功能及开发过程。因为本人正职是个大数据产品经理,以前是从java后端开发转岗的,前端啊js之类的只是略懂,所以对于小程序也是相当于边学边做。直接百度到一个最接近我的应用场景的又容易改的,在这基础上做二次开发。最后出来效果图如下:
每个用户每天有2次抽奖机会。每抽完一次都会写入云数据库。通过js定义每个格子的奖品信息及中奖概率,如下:
//奖项及概率
jp:[5,8,15,20,30,50,100,200],
gl:[26,23,20,16,8,4,2,1],
总共为8个格,从左上位置开始顺时钟旋转。因为所有奖品都是积分,所以直接文字展示,如果对应的是其他奖品图片,可以直接替换成图片即可。
下一个数组描述的是每个格子的中奖概率,越大中奖概率越高。因为是必中的。所以总概率是数组8个数的总和,比如总数加起来是100的话,第一格的概率就是 26%,如此类推,最后一格的概率就是1%。
目前点击抽奖之后,就提交上去了,前端只是将结果做了个效果展示,所以跳出当前页的话,依然是算抽过一次奖的,会把奖品发放到用户个人积分上。
另外就是使用ColorUI做了整个版面的优化。将九宫格,文字跟背景图分离,所以后期需要换图片的话操作非常简单。
可以用的上或感兴趣的朋友可以扫二维码体验一下,还可以到码云下下载源码(如果能顺手star一下就更加感谢!)
源码下载地址:
/mygia/idol-up