2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > 微信小程序九宫格抽奖大转盘

微信小程序九宫格抽奖大转盘

时间:2019-10-28 18:00:30

相关推荐

微信小程序九宫格抽奖大转盘

抽奖大转盘是个很百搭的小应用,各种大小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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。