如何實(shí)現(xiàn)微信小程序的輪盤抽獎(jiǎng)功能

為了吸引用戶，商家會(huì)做一些活動(dòng)，利用贈(zèng)送或充值的積分來進(jìn)行抽獎(jiǎng)，現(xiàn)在來講下微信小程序如果實(shí)現(xiàn)輪盤抽獎(jiǎng)的功能，先看下圖：

上面展示的就是輪盤抽獎(jiǎng)，一共有六個(gè)獎(jiǎng)項(xiàng)，其中一個(gè)是“不中獎(jiǎng)”的，其余五個(gè)均能獲得獎(jiǎng)品，獎(jiǎng)品的標(biāo)題、獎(jiǎng)品類型(實(shí)物或積分)、中獎(jiǎng)概率，每次抽獎(jiǎng)需要多少積分等都可以在后臺(tái)設(shè)置，如下圖所示：
每次抽獎(jiǎng)時(shí)扣除積分，獎(jiǎng)品類型有實(shí)物和積分，如果是積分，直接增加用戶賬號(hào)的積分，這個(gè)比較簡(jiǎn)單，如果是實(shí)物，則要生成一個(gè)關(guān)聯(lián)商品的禮品訂單。

中獎(jiǎng)率：是指整個(gè)抽獎(jiǎng)的分為1萬份，所以最低的中獎(jiǎng)率可以設(shè)置成0.01%(當(dāng)然如果不想用戶抽到某個(gè)獎(jiǎng)項(xiàng)，可以設(shè)置成0%，這樣用戶就永遠(yuǎn)不可能抽到)，后臺(tái)的接口使用的PHP語言，計(jì)算中獎(jiǎng)率的代碼如下圖：
其中$i=rand(1,10000);即從1到10000隨機(jī)一個(gè)數(shù)。
winning_odds是指某個(gè)獎(jiǎng)項(xiàng)的中獎(jiǎng)數(shù)值，例如中獎(jiǎng)率是10%,則在winning_odds的值為1000.特別提一下，不中獎(jiǎng)的概率是由100%-其他五個(gè)獎(jiǎng)項(xiàng)的概率而自動(dòng)生成的。所以后臺(tái)修改某個(gè)獎(jiǎng)項(xiàng)的概率的時(shí)候，需要更新不中獎(jiǎng)的概率。
小程序JS方面：
Page({
//獎(jiǎng)品配置
awardsConfig: {
btnDisabled: ‘’,//是否允許點(diǎn)擊抽獎(jiǎng)
awards: [
{ 'index': 0, 'name': '300積分' },
{ 'index': 1, 'name': '某商品' },
{ 'index': 2, 'name': '1000積分' },
{ 'index': 3, 'name': '100積分' },
{ 'index': 4, 'name': '不中獎(jiǎng)' },
{ 'index': 5, 'name': '某實(shí)物' }
]
},
onReady: function (e) {
this.drawAwardRoundel();
},
//畫抽獎(jiǎng)圓盤
drawAwardRoundel: function () {
var awards = this.awardsConfig.awards;
var awardsList = [];
var turnNum = 1 / awards.length; // 文字旋轉(zhuǎn) turn 值
// 獎(jiǎng)項(xiàng)列表
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
});
},
//發(fā)起抽獎(jiǎng)
playReward: function () {
//中獎(jiǎng)index
var awardIndex = 2;
var runNum = 8;//旋轉(zhuǎn)8周
var duration = 4000;//時(shí)長(zhǎng)
// 旋轉(zhuǎn)角度
this.runDeg = this.runDeg || 0;
this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - awardIndex * (360 / 6))
//創(chuàng)建動(dòng)畫
var animationRun = wx.createAnimation({
duration: duration,
timingFunction: 'ease'
})
animationRun.rotate(this.runDeg).step();
this.setData({
animationData: animationRun.export(),
btnDisabled: 'disabled'
});
// 中獎(jiǎng)提示
var awardsConfig = this.awardsConfig;
setTimeout(function () {
wx.showModal({
title: '恭喜',
content: '獲得' + (awardsConfig.awards[awardIndex].name),
showCancel: false
});
this.setData({
btnDisabled: ''
});
}.bind(this), duration);
}
})

小程序的wxml代碼如下圖：
我們這里就不詳細(xì)講如何調(diào)用API接口，如何判斷是獲取了哪個(gè)獎(jiǎng)項(xiàng)了，大家可以根據(jù)初始的JS代碼來套程序，因?yàn)楦淖兞薬wardIndex值，對(duì)應(yīng)的獎(jiǎng)項(xiàng)也會(huì)出來，通過后臺(tái)接口的返回值，可以判斷是積分還是實(shí)物，然后進(jìn)行下一步操作.為了防止用戶連續(xù)點(diǎn)擊“抽獎(jiǎng)”的按鈕，需要用 btnDisabled來判斷用戶是否可以繼續(xù)抽獎(jiǎng)，當(dāng)輪盤尚未轉(zhuǎn)完時(shí)，是不允許重復(fù)點(diǎn)擊的。
以上就是對(duì)微信小程序輪盤抽獎(jiǎng)后臺(tái)功能，抽獎(jiǎng)概率，小程序JS代碼進(jìn)行講解，這是只提供一種思路，大家可以根據(jù)實(shí)際的情況對(duì)程序功能進(jìn)行調(diào)整。

網(wǎng)頁題目：如何實(shí)現(xiàn)微信小程序的輪盤抽獎(jiǎng)功能
本文來源：http://muchs.cn/news26/240476.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站設(shè)計(jì)公司、商城網(wǎng)站、網(wǎng)站營(yíng)銷、網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)