【小程序与公众号】微信小程序九宫格抽奖（抽奖完全随机）

上图

话不多说直接上图，抽奖是顺时针又快变慢（还原抽奖的动画）进行抽奖，抽奖的几率都是随机

源码

接下来展示的就是微信小程序中的九宫格抽奖

	说明
适用范围	抽奖逻辑只是原生JS，通过数据进行驱动，因此仍然适用于主流框架Vue，React等

设计思想	数据驱动，可作为组件复用（奖品信息对接数据库，后台调试奖品信息，前端拿到后端数据直接展示即可）

wxml：

<!-- 抽奖区域 -->
<view class="box"><view bindtap="startDraw" class="list {{drawIndex > 0 ? 'grey' : ''}}">抽奖</view><block wx:for="{{prizeList}}" wx:key="id"><view class="list {{drawIndex == item.index ? 'change_in' : ''}}"><view class="list_t"><image src="{{item.imgsrc}}" mode="aspectFit"></image></view><view class="list_b">{{item.prizeName}}</view></view></block>
</view><button class="again_btn"  bindtap="againBtn">再抽一次</button><!-- 奖品弹窗 -->
<view class="luck-display" wx:if="{{isShowLuck}}"><view class="luck-mask" bindtap="closePopup"></view><view class="luck-popup"><view class="luck-close" bindtap="closePopup"><i class="iconfont icon-shanchu"></i></view><view class="luck-image"><image src="{{awardImage}}" mode="aspectFit"></image></view><view class="luck-text">{{awardName}}</view></view>
</view>

js：

let timer;
let onDrawing = false;  // 是否可进行抽奖标识，默认为false可进行抽奖
let drawIndex = 0; //抽奖过程KEYComponent({/*** 组件的属性列表*/properties: {},/*** 关闭组件样式隔离*/options: {styleIsolation: 'apply-shared'},/*** 组件的初始数据*/data: {// 奖品参数信息prizeList: [{ id: '001', index: 1, imgsrc: 'https://hbimg.huabanimg.com/18b925338313c77ee90c6a0a2f052a7988e10ce515ca7-T4bMZ0_fw658', prizeName: '谢谢参与' },{ id: '002', index: 2, imgsrc: 'https://hbimg.huabanimg.com/2acfd641286f1a7e4050ca13e207c1d2fc2cbf5f12ca2-W5O1vm_fw658', prizeName: '金币 x20' },{ id: '003', index: 3, imgsrc: 'https://hbimg.huabanimg.com/72138f8f82134a9099eaa02d5d81fa738519716021e4c-idXlQk_fw658', prizeName: '火箭 x1' },{ id: '004', index: 4, imgsrc: 'https://hbimg.huabanimg.com/96e0a27d3a6b25dacd7157db6879b63be9e1addd126ac-sMVvOt_fw658', prizeName: '神秘礼盒 x1' },{ id: '005', index: 5, imgsrc: 'https://hbimg.huabanimg.com/aa694a1e151f2cb8d8583eee9d1cbf0342b5577b953c-O0MFoR_fw658', prizeName: '水晶血瓶 x1' },{ id: '006', index: 6, imgsrc: 'https://hbimg.huabanimg.com/2fe60709c9479b41ec3eef7fff1101f683b4ad89254af-HNdtDR_fw658', prizeName: '金币 x10' },{ id: '007', index: 7, imgsrc: 'https://hbimg.huabanimg.com/407d1f6d9aa47e757994d9474dba7257c4c73bd11123a-5juBN1_fw658', prizeName: '水晶钻石 x5' },{ id: '008', index: 8, imgsrc: 'https://hbimg.huabanimg.com/513f6f7d9f323e7cc3e252444237a84b52a98890c375-LGfXRi_fw658', prizeName: '水晶盒 x1' },],drawIndex: null, //抽奖过程KEYprizeResult: null, //抽奖结果KEYprizeName: null, //抽奖结果KEY对应的奖品名称isShowLuck: false,  // 是否显示奖品弹窗，默认false不显示showAgain: false, //是否抽奖后显示再抽一次按钮awardImage: '',  // 弹窗展示的奖品照片awardName:'',  // 弹窗展示的奖品名字},/*** 组件的方法列表*/methods: {//抽奖操作startDraw() {if (onDrawing) {return;} else {onDrawing = true;}clearInterval(timer);timer = setInterval(()=>{this.changePrize()}, 80);// 随机将品池let random = Math.floor(Math.random() * this.data.prizeList.length)let res = {stutus: 1,prizeResult: this.data.prizeList[random].index,prizeName: this.data.prizeList[random].prizeName,}if (res.stutus == 1) {setTimeout( ()=> {clearInterval(timer);timer = setInterval(()=>{this.changePrize()}, 200);setTimeout( ()=> {clearInterval(timer);timer = setInterval(()=>{this.changePrize()}, 420);setTimeout( () => {this.setData({prizeResult: res.prizeResult,prizeName: res.prizeName,});}, 1000)}, 1200)}, 1800)}},//抽奖过程奖品切换changePrize() {drawIndex++;drawIndex = drawIndex > 8 ? 1 : drawIndex;this.setData({drawIndex: drawIndex});if (this.data.prizeResult == drawIndex) {clearInterval(timer);let currentAward = this.data.prizeList[this.data.prizeResult - 1]this.setData({showAgain: true,isShowLuck: true,awardImage: currentAward.imgsrc,awardName: currentAward.prizeName});}},//点击再抽一次按钮againBtn() {onDrawing = false;drawIndex = 0; //抽奖过程KEYthis.setData({drawIndex: null, // 清空抽奖过程KEYprizeResult: null, // 清空抽奖结果KEYprizeName: null, // 清空抽奖结果KEY对应的奖品名称showAgain: false, // 是否抽奖后显示再抽一次按钮awardImage: '',  // 清空奖品展示的图片awardName: '' // 清空奖品的展示名称});},// 关闭奖品弹簧closePopup(){this.setData({isShowLuck: false})}}
})

全部源码看Github仓库 → 微信九宫格抽奖源码

如果喜欢的小伙伴可以去仓库Fock一下项目：微信小程序云音乐 + 博客开发

直接部署到本地电脑进行体验，有对应的部署文档，觉得不错的给个小星星star，谢谢~

【小程序与公众号】微信小程序九宫格抽奖（抽奖完全随机）相关推荐

微信公众号/微信小程序获取用户信息以及推送微信模版消息_MQ
微信公众号/微信小程序获取用户信息以及推送微信模版消息_MQ 一.获取用户信息 1.首先我们需要了解什么是微信用户的OpenID 在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID(加密 ...
微信小程序web-view公众号与小程序支付的切换使用
微信小程序web-view公众号与小程序支付间的切换使用最近小程序开放了新功能,支持内嵌网页.html写的网页,官网,网站,运行在浏览器上的,有域名的那种,可以内嵌到小程序里了! 那么这意味着什么呢 ...
小程序，公众号微信客服消息开发
背景:第三方公司已经开发好微信的客服消息对话框.要求我们公司开发的小程序和公众号增加一个按钮,点击后会跳转到第三方公司开发好的客服消息对话框里. 首先,小程序的要去小程序管理后台,绑定对应的企业ID和 ...
不同主体公众号跳转小程序_公众号和小程序的区别
其实公众号和小程序都是微信的衍生功能,同时微信的产品.但是它们的功能不同.公众号更倾向于引流,主要是通过持续的输出有价值的文案视频图片来吸引大量的粉丝(顾客),并且培育粉丝最终获得收益.(在这里特别提 ...
微信公众号微信小程序申请出现的问题
由于之前把身份证号借给别人去申请过公众号,导致自己一直不知道为什么会出现我知道个人身份证改得只能申请一个账号,但是一直不知道自己什么时候申请过,最后在网上招了很对东西,找到一个叫微信公众平台助手的东 ...
一个公众号可以绑定几个小程序_如何实现微信小程序和公众号的绑定
再此之前,为什么要有小程序和公众号绑定这一个操作. 第一:小程序绑定公众号之后,公众号可以推文. 如下所示,公众号推文,文章内容由后台发布,因为公众号分为服务号和订阅号,订阅号每天可以发送一次,一次最 ...
浅析微信支付：微信支付简单介绍（小程序、公众号、App、H5）
本文是[浅析微信支付]系列文章的第二篇,主要讲解一下普通商户接入的支付方式以及其中的不同之处. 上篇文章讲了本系列的大纲,没有看过的朋友们可以看一下. 浅析微信支付:前篇大纲微信支付是集成在微信客户 ...
限时团购，6.9折：《微信开发深度解析：公众号、小程序高效开发秘籍》推荐序
全书由目 Senparc.Weixin SDK 作者苏震巍历时 2 年完成,涵盖了开发微信公众号及小程序需要用的的各项后端开发技能.技巧.避坑提示,以及 Senparc.Weixin SDK 微信公众 ...
小程序 php wecahtpay,PHP 微信公众号，小程序获取支付参数。微信支付
PHP 微信公众号,小程序获取支付参数.微信支付发布时间:2018-09-26 11:19, 浏览次数:278 , 标签: PHP 首先下载微信官方demo放入项目中地址:https://gith ...
Appium 解决微信公众号、小程序切换 webview 后无法定位元素的问题
Appium 解决微信公众号.小程序切换 webview 后无法定位元素的问题参考文章: (1)Appium 解决微信公众号.小程序切换 webview 后无法定位元素的问题 (2)https:// ...

【小程序与公众号】微信小程序九宫格抽奖（抽奖完全随机）

上图

源码

【小程序与公众号】微信小程序九宫格抽奖（抽奖完全随机）相关推荐

最新文章

热门文章