微信小程序 | 动手实现双十一红包雨

📌个人主页：个人主页
​🧀 推荐专栏：小程序开发成神之路 --【这是一个为想要入门和进阶小程序开发专门开启的精品专栏！从个人到商业的全套开发教程，实打实的干货分享，确定不来看看？ 😻😻】
📝作者简介：一个读过研、创过业，从全栈工程师转行做大数据开发的大厂人！
⭐️您的小小关注是我持续输出的动力！⭐️

---

干货内容推荐

🥇入门和进阶小程序开发，不可错误的精彩内容🥇 ：

• 《小程序开发必备功能的吐血整理【个人中心界面样式大全】》

• 《你真的会做小程序按钮吗？看了字节35K前端的样式设计，悟了》

• 《来接私活吧？玩转小程序开发之丝滑拆红包【附完整代码】》

• 《来接私活吧？小程序接私活必备功能-婚恋交友【附完整代码】》

• 《吐血整理的几十款小程序登陆界面【附完整代码】》

---

---

一、效果展示

---

二、应用场景

在众多的营销场景中，红包雨可以说是很百试不爽的套路了。对于红包雨，从表面来看就是简单地让用户点击并且给用户福利的形式。

但是，在设计红包雨的背后，前后端都可以深挖到很多的技术栈。

• 前端：如何优化红包点击的特效体验？前端如何防止接口防刷？
• 后端：如何设计高并发的红包雨？联动用户服务、优惠券服务、账户服务的架构如何设计？

在本文，先研究小程序端的红包雨特效以及用户的交互逻辑.

其中主要交互功能包括：

• 红包雨动画生成
• 红包雨点击事件
• 红包雨的所需要满足的业务场景

---

三、项目技术分析

3.1 技术栈基础必备

• （1）css动画属性
  transform属性的使用【控制红包进行角度旋转】：

---

动画animation属性的使用【控制红包】：
推荐学习：通过示例深入学习animation属性

• （2）JavaScript定时器的使用

  • setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
  • setTimeout() ：在指定的毫秒数后调用函数或计算表达式。

---

3.2 技术关键点剖析

• （1）红包掉落动画随机生成
  先使用js中的Math.random生成红包随机旋转的角度，使得红包掉落的效果更加自然。再使用定时器功能使得红包动画循环播放。

 startRedPacket() {
        let win = 0
        // 获取屏幕宽度
        uni.getSystemInfo({
          success: function(res) {
            win = res.windowWidth
          }
        });
        // let win = document.documentElement.clientWidth || document.body.clientWidth
        let rotate = (parseInt(Math.random() * 90 - 45)) + "deg" // 旋转角度
        let w = (Math.random() * 90) + 120
        let durTime = parseInt(Math.random() * 1.5) + 2.5 + 's' // 时间
        let left = parseInt(Math.random() * win)
        if (left < 0) {
          left = 0
        } else if (left > (win - w)) {
          left = (win + 65)
        }
        this.liParams.push({
          left: left + 'rpx',
          width: w + 'rpx',
          transforms: 'rotate(' + rotate + ')',
          durTime: durTime,
          status: 0 // 0 默认 1 中奖 2 未中奖
        })
        setTimeout(() => {
          // 多少时间结束
          clearTimeout(this.timer)
          return false
        }, this.duration * 1000)

        // 红包密度
        this.timer = setTimeout(() => {
          this.startRedPacket()
        }, 300)
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

• （2）红包中奖业务的控制
  红包雨的功能主要在于达到促销功能，在业务的要求下，要实现红包雨中的红包不是每个都有大奖，也不是没有奖，这就需要我们按照特定的业务需求去设置红包的中奖率，以及设计相应的开奖动画。

  if (this.selectedNum >= 3 && item.status == 0) {
          item.status = 2
          //				return false
        }

        if (this.clickNum == this.randomNum) {
          if (item.status == 0 && this.selectedNum < 3) {
            this.randomNum = Math.ceil(Math.random() * 6)
            this.clickNum = 0
            this.selectedNum++
            item.status = 1 // 随机出现只中奖
            this.acquisitionNum++
          }
        } else {
          item.status = 2
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

代码中通过status属性实现红包中奖状态的控制：

---

四、完整源码

<template>
  <view class="rainBox">
    <view class="countDown" v-if="secondMask">
    <img class="second" v-show="second==3" src="https://img-blog.csdnimg.cn/9a535df6885e49a597087f3db7145640.png">
    <img class="second" v-show="second==2" src="https://img-blog.csdnimg.cn/223a369d90744e06ac772eac1479f5cc.png">
      <img class="second" v-show="second==1" src="https://img-blog.csdnimg.cn/a2a5909e79314903855b3774bad7ec11.png">
	view>
    <view v-if="!secondMask">
      <view class="redNum">
        <text class="icon">{{duration}}stext>
        <text class="winnum">当前抢到红包：<text class="redmoney">{{acquisitionNum}}text>元text>
      view>
      <view class="red_packet" id="red_packet">
        <view v-for="(item, index) in liParams">
          <view class="package" :style="{ left: item.left,width:item.width, height:item.width, animationDuration: item.durTime, webkitAnimationDuration: item.durTime}"
            :data-index="index" @webkitAnimationEnd="removeDom" @click="tap(item)">
            <text :style="{ width:item.width, height:item.width,transform: item.transforms, webkitTransform: item.transforms}"
              :class="[{ 'defaul':item.status==0},{'success':item.status==1},{'fail':item.status==2}]">text>
          view>
        view>
       <view v-if="show1==true" @click="show = false">
          <view class="warp flexcenter">
            <view class="rect" @tap.stop :style="{background: 'url(https://ctyh88.oss-cn-shenzhen.aliyuncs.com/static/puzzle/tanchuhongbao.png)no-repeat center center / 100%'}">
              <view class="rectcenter">
                <view class="rt-money">{{acquisitionNum}}元view>
                <view class="rt-money1">已存余额view>
              view>
              <view class="btnredbg" @click="show1 = false">我知道了view>
              <view class="iconfil">
                <u-icon name="close-circle-fill" color="#b39b8f" size="40" class="iconfil" @click="show1 = false">u-icon>
              view>
              
            view>
          view>
        view>
      view>
    view>

  view>
template>
<script>
  export default {
    // components: { noPrize },
    data() {
      return {
        second: 3, // 倒计时
        secondMask: true, //倒计时弹层
        liParams: [], // 红包数组
        timer: null,
        duration: 10, // 持续时间
        selectedNum: 0, // 选中红包个数，不超过3个
        clickNum: 0, // 点击的次数
        randomNum: Math.ceil(Math.random() * 6), // 1~6 随机数
        couponArr: [],
        acquisitionNum: 0, // 获得红包个数
        show1: false, // 获取红包弹窗
      }
    },
    created() {
      this.countDownFn()
    },
    methods: {
      // 5秒倒计时
      countDownFn() {
        let self = this
        let timer = setInterval(() => {
          if (self.second == 0) {
            self.secondMask = false
            clearInterval(timer)
            self.startRedPacket()
            self.countDownFn20()
          } else {
            self.second--
          }
        }, 1000)
      },
      // 20秒倒计时
      countDownFn20() {
        let self = this
        let timer = setInterval(() => {
          if (self.duration == 0) {
            clearInterval(timer)
            this.show1 = true
            console.log('结束')
          } else {
            self.duration--
          }
        }, 1000)
      },
      tap(item) {
        this.clickNum++
        if (this.selectedNum >= 3 && item.status == 0) {
          item.status = 2
          //				return false
        }

        if (this.clickNum == this.randomNum) {
          if (item.status == 0 && this.selectedNum < 3) {
            this.randomNum = Math.ceil(Math.random() * 6)
            this.clickNum = 0
            this.selectedNum++
            item.status = 1 // 随机出现只中奖
            this.acquisitionNum++
          }
        } else {
          item.status = 2
        }
      },
      startRedPacket() {
        let win = 0
        // 获取屏幕宽度
        uni.getSystemInfo({
          success: function(res) {
            win = res.windowWidth
          }
        });
        let rotate = (parseInt(Math.random() * 90 - 45)) + "deg" // 旋转角度
        let w = (Math.random() * 90) + 120
        let durTime = parseInt(Math.random() * 1.5) + 2.5 + 's' // 时间
        let left = parseInt(Math.random() * win)
        if (left < 0) {
          left = 0
        } else if (left > (win - w)) {
          left = (win + 65)
        }
        this.liParams.push({
          left: left + 'rpx',
          width: w + 'rpx',
          transforms: 'rotate(' + rotate + ')',
          durTime: durTime,
          status: 0 // 0 默认 1 中奖 2 未中奖
        })
        setTimeout(() => {
          // 多少时间结束
          clearTimeout(this.timer)
          return false
        }, this.duration * 1000)

        // 红包密度
        this.timer = setTimeout(() => {
          this.startRedPacket()
        }, 300)
      },
      removeDom(e) {
          this.package1=true
          this.package=false
      	// let target = e.currentTarget
      	// document.querySelector('#red_packet').removeChild(target)
      }
    }
  }
script>

<style lang="less" scoped>
  // 红包弹窗
  .warp {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    .rect {
      width: 672rpx;
      height: 840rpx;
      margin: auto;
      
      .rectcenter {
        height: 554rpx;
        text-align: center;

        .rt-money {
          font-size: 65rpx;
          font-weight: 800;
          padding: 80rpx 0;
          color: rgba(238, 195, 24, 1);
        }

        .rt-money1 {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(238, 195, 24, 1);
          padding: 20rpx 0;
        }
      }

      .btnredbg {
        width:370rpx;
        height:80rpx;
        background:rgba(255,211,125,1);
        border-radius:40rpx;
        line-height: 80rpx;
        margin: auto;
        color: #F42335;
        font-size: 32rpx;
        text-align: center;
      }
      .iconfil{
        width:77rpx;
        margin: 60rpx auto;
      }
    }
  }


  .rainBox {
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    height: 92vh;
    overflow: hidden;
    background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.888ppt.com%2F%2FUpload%2Fthumb%2F20191014%2F781a066454151825.jpg%21h400&refer=http%3A%2F%2Fpic.888ppt.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670587612&t=6f6843e0025442cf321946c480f82cbc) no-repeat center;
    background-size: 100%;
    .winnum {
      display: inline-block;
      color: #fff;
      font-size: 40rpx;
      padding: 60rpx;
      
      .redmoney {
        color: #FED134;
        font-weight: bold;
        padding-right: 10rpx;
      }
    }

    .icon {
      display: inline-block;
      width: 82rpx;
      height: 82rpx;
      background: #6C0A75;
      font-size: 60rpx;
      line-height: 92rpx;
      text-align: center;
      position: absolute;
      top: 40rpx;
      right: 40rpx;
      z-index: 4;
      background: url(https://img.51fanbei.com/h5/app/activity/redRain_08.png) no-repeat center;
      background-size: 100% 100%;
	     color: #eec318;
	     font-weight: bolder;
      i {
        font-size: 24rpx;
      }
    }
  }

  .countDown {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    overflow: hidden;
    background: url(https://img.51fanbei.com/h5/app/activity/redRain_02.png) no-repeat center;
    background-size: 100% 100%;

    .second {
      width: 340rpx;
      height: 394rpx;
      margin: 410rpx auto;
      display: block;
      // margin-top: 205px;
    }
  }

  .red_packet {
    text {
      width: 250rpx;
      height: 250rpx;
      display: block;

      &.defaul {
        background: url(https://img1.baidu.com/it/u=936677898,247021280&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=749) no-repeat center;
        background-size: 100% 100%;
      }

      &.fail {
        background: url(https://img-blog.csdnimg.cn/fe18340b8fbe4a4a80694b1b2feabc2a.png) no-repeat center;
        background-size: 100% 100%;
      }

      &.success {
        background: url(https://img-blog.csdnimg.cn/1e957a43234f4175bc537fb9770de5ea.png) no-repeat center;
        background-size: 100% 100%;
      }
    }

    .package1 {
      display: none;
    }

    .package {
      position: absolute;
      animation: all 3s linear;
      top: -200rpx;
      z-index: 3;
      animation: aim_move 5s linear 1 forwards;
      // &.package {

      // }
    }

    a {
      display: block;
    }
  }

  @keyframes aim_move {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(120vh);
    }
  }
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320