微信抽獎小程序怎么做

　　微信小程序轉盤(pán)抽獎組件的實(shí)現思路

　　1.頁(yè)面樣式實(shí)現

　　從抽獎轉盤(pán)的圖中我們可以看出，抽獎轉盤(pán)由外圓、扇面抽獎選項、抽獎按鈕組成，其中外圓不難實(shí)現，大家在處理微信小程序頭像的時(shí)候估計都已經(jīng)用過(guò)了，那就是利用border-radius:50%來(lái)將一個(gè)正方形變成圓，這是外圓實(shí)現的關(guān)鍵。為了體現立體效果，我們給外圓的border加上陰影，也就是border-shadow樣式，這樣一處理，外圓的立體效果就出來(lái)了。

　　外圓里面是抽獎的獎項，抽獎獎項由獎品名稱(chēng)和一條線(xiàn)組成，通過(guò)將線(xiàn)和獎品名稱(chēng)旋轉一定的角度就可以得到頁(yè)面效果，這里用到的主要功能是：transform： rotate。這里說(shuō)是線(xiàn)，其實(shí)是一個(gè)個(gè)的view通過(guò)設置width寬度和背景色而給人產(chǎn)生的視覺(jué)錯覺(jué)效果。因為每條線(xiàn)的旋轉角度不同，所以這個(gè)角度是在JS中計算后賦值到前臺的。下面是線(xiàn)和抽獎獎項的實(shí)現（注：代碼來(lái)自網(wǎng)絡(luò )）：

　　獎項再往里是一個(gè)抽獎按鈕，這個(gè)抽獎按鈕設計得很巧妙，乍看是一個(gè)不規則的形狀，其實(shí)是一個(gè)由三角形和圓組合而成的形狀。圓大家都會(huì )了，那么三角形是如何來(lái)實(shí)現的呢？其實(shí)三角形是由border來(lái)實(shí)現的，也就是說(shuō)一個(gè)view，如果寬高都是0而border很大的話(huà)，通過(guò)設置border三個(gè)方向的顏色就能生成一個(gè)三角形（左右透明，底的顏色就是三角形的顏色，這是css畫(huà)三角形的一個(gè)技巧）。

　　好了，頁(yè)面的組成和繪制原理給大家介紹完了，下面我們再來(lái)看看抽獎的事件。

　　2.轉盤(pán)的轉動(dòng)和抽獎事件

　　首先我們需要通過(guò)JS的賦值來(lái)刻畫(huà)圓盤(pán)并將獎項賦值在轉盤(pán)上。這里首先要通過(guò)JSON形式定義好獎項。

　　然后我們根據獎項的個(gè)數來(lái)計算扇面的角度和線(xiàn)旋轉的角度。 因為指針是在每個(gè)扇區的中間，所以需要除以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 }）;

　　}

　　最后要處理的就是按鈕點(diǎn)擊事件了，抽獎實(shí)際上是一個(gè)隨機數的生成過(guò)程，根據隨機數的大小對應獎品的序號，抽獎結果也就產(chǎn)生了（這是等概率抽獎，如果有不等概率的需求可以再進(jìn)一步研究）。實(shí)際上像抽獎這樣的，隨機數的生成是一個(gè)瞬間的過(guò)程，為了體現抽獎的動(dòng)感，我們需要讓轉盤(pán)轉起來(lái)。

　　這里我們來(lái)創(chuàng )建一個(gè)動(dòng)畫(huà)：

　　var animationRun = wx.createAnimation（{

　　duration： duration，

　　timingFunction： ‘ease-in-out’

　　}）

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

　　因為圓是一個(gè)循環(huán)的，無(wú)論轉多少圈，在圓上的度數都是在0--360度之間，因此我們需要通過(guò)當前度數%360取余的操作來(lái)顯示當前指針的位置。

　　最后，通過(guò)setTimeOut來(lái)讓指針轉動(dòng)停下來(lái)。這樣最后轉動(dòng)的效果也有了，只要根據隨機數把抽獎的結果反饋給抽獎的人就可以了。

　　在云里，為各行業(yè)商戶(hù)搭建自己的小程序。微信號：zaiyunli002