微信抽奖小程序怎么做

　　微信小程序转盘抽奖组件的实现思路

　　1.页面样式实现

　　从抽奖转盘的图中我们可以看出，抽奖转盘由外圆、扇面抽奖选项、抽奖按钮组成，其中外圆不难实现，大家在处理微信小程序头像的时候估计都已经用过了，那就是利用border-radius:50%来将一个正方形变成圆，这是外圆实现的关键。为了体现立体效果，我们给外圆的border加上阴影，也就是border-shadow样式，这样一处理，外圆的立体效果就出来了。

　　外圆里面是抽奖的奖项，抽奖奖项由奖品名称和一条线组成，通过将线和奖品名称旋转一定的角度就可以得到页面效果，这里用到的主要功能是：transform： rotate。这里说是线，其实是一个个的view通过设置width宽度和背景色而给人产生的视觉错觉效果。因为每条线的旋转角度不同，所以这个角度是在JS中计算后赋值到前台的。下面是线和抽奖奖项的实现（注：代码来自网络）：

　　奖项再往里是一个抽奖按钮，这个抽奖按钮设计得很巧妙，乍看是一个不规则的形状，其实是一个由三角形和圆组合而成的形状。圆大家都会了，那么三角形是如何来实现的呢？其实三角形是由border来实现的，也就是说一个view，如果宽高都是0而border很大的话，通过设置border三个方向的颜色就能生成一个三角形（左右透明，底的颜色就是三角形的颜色，这是css画三角形的一个技巧）。

　　好了，页面的组成和绘制原理给大家介绍完了，下面我们再来看看抽奖的事件。

　　2.转盘的转动和抽奖事件

　　首先我们需要通过JS的赋值来刻画圆盘并将奖项赋值在转盘上。这里首先要通过JSON形式定义好奖项。

　　然后我们根据奖项的个数来计算扇面的角度和线旋转的角度。 因为指针是在每个扇区的中间，所以需要除以2。

　　// 奖项列表

　　for （var i = 0; i 《 awards.length; i++） {

　　awardsList.push（{ turn： i * turnNum + ‘turn’， lineTurn： i * turnNum + turnNum / 2 + ‘turn’， award： awards［i］.name }）;

　　}

　　最后要处理的就是按钮点击事件了，抽奖实际上是一个随机数的生成过程，根据随机数的大小对应奖品的序号，抽奖结果也就产生了（这是等概率抽奖，如果有不等概率的需求可以再进一步研究）。实际上像抽奖这样的，随机数的生成是一个瞬间的过程，为了体现抽奖的动感，我们需要让转盘转起来。

　　这里我们来创建一个动画：

　　var animationRun = wx.createAnimation（{

　　duration： duration，

　　timingFunction： ‘ease-in-out’

　　}）

　　animationRun.rotate（this.runDeg）.step（）;

　　因为圆是一个循环的，无论转多少圈，在圆上的度数都是在0--360度之间，因此我们需要通过当前度数%360取余的操作来显示当前指针的位置。

　　最后，通过setTimeOut来让指针转动停下来。这样最后转动的效果也有了，只要根据随机数把抽奖的结果反馈给抽奖的人就可以了。