微信小程序的抽红包组件，小编一共是做了两种，第一种呢用了很长时间了，可能是时间长了，觉得不是那么霸气了，就重新又制作了一个，第一个当时使用了大量的图片，这也导致了加载的时候很慢，这里面的主要样式还是参考的别人的代码，总而言之效果还是不错的，不过现在呢，小编又自己写了个抽红包的组件，这回看上去比较好看了，首先我们先看下2.0代码吧。因为是放在具体项目里面的，有些细节性的东西大家可以改改：
首先是wxml，大部分的样式也写在了这里面：

<view style="position: fixed; top: 0; left: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 100vh; z-index: 100000000000000000000; background: rgba(0, 0, 0, 0.4);">
    <view class="{{open ? 'red-packet-open' : ''}}" style="background: #ff3d32; border-radius: 30rpx; border-bottom-right-radius: 100% 120px; border-bottom-left-radius: 100% 120px; box-shadow: 0px 3px 5px 1px #e92c27; width: 590rpx; height: 700rpx; position: absolute; top: 80rpx; z-index: 101;">
        <view wx:if="{{name}}" style="color: #F5B37B; text-align: center; font-size: 40rpx; padding-top:100rpx;">{{name}}的红包</view>
        <view wx:if="{{text}}" style="color: #F5B37B; text-align: center; font-size: 30rpx; padding-top:60rpx;">{{text}}</view>
        <view style="position: absolute; bottom: -80rpx; left: 220rpx; background: #E8bF7B; width: 150rpx; height: 150rpx; line-height: 150rpx; text-align: center; border-radius: 75rpx; font-size: 60rpx;" bindtap="handleOpen">抽</view>
    </view>
    <view class="{{open ? 'red-packet-open' : ''}}" style="background: #ff3328; border-radius: 30rpx; border-top-right-radius: -120px; border-top-left-radius: -120px; width: 590rpx; height: 464rpx; position: absolute; top: 500rpx; z-index: 100;"></view>
    <view style="width: 590rpx; height: 883rpx; position: absolute; top: 80rpx; z-index: 90; background: #FFFFFF; border-radius: 30rpx;">
        <view style="height: 260rpx; border-radius: 30rpx; border-bottom-right-radius: 100% 120px; border-bottom-left-radius: 100% 120px; background: #ff3d32; display: flex; flex-direction: column; justify-content: center; align-items: center;text-align: center;">
            <image mode="aspectFill" src="{{user?user.avatar : ''}}" style="width: 130rpx; height: 130rpx; min-width: 130rpx; min-height: 130rpx; border-radius: 65rpx; position: absolute; top: 180rpx;" />
            <view style="position: absolute; top: 0; right: 20rpx; color: #FFFFFF; font-size: 56rpx;" bind:tap="close">X</view>
        </view>
        <view style="display: flex; flex-direction: column; justify-content: center; align-items: center;text-align: center; font-size: 26rpx; margin: 60rpx;">
            <text style="color: #f33035; font-size: 40rpx;">{{title}}</text>
            <text style="padding: 10rpx; color: #f33035; font-size: 50rpx;">{{msg}}</text>
            <view style="text-align: center; font-size: 30rpx; margin: 20rpx;">{{tips}}</view>
            <view wx:if="{{balance}}" bind:tap="toBalance" style="text-align: center; font-size: 30rpx; margin: 20rpx; color: #f33035; padding-top: 60rpx;"><text wx:if="{{balance_name}}">{{balance_name}}</text>余额：{{balance}}>>
            </view>
        </view>
    </view>
</view>

在wxss里面实现了一个动画：

.red-packet-open {
    animation: open-up 0.2s ease-in-out 0.2s 1 normal;
    animation-fill-mode: forwards;
    display: none;
}

在js里面就是相关的逻辑了

const audio = wx.createInnerAudioContext()
audio.src = 'https://audiosrc.shangpo.net/sources/coin.mp3'
let g = getApp().globalData;

Component({
    properties: {
        title: {
            type: String,
            value: null
        },
        msg: {
            type: String,
            value: null
        },
        tips: {
            type: String,
            value: null
        },
        bind: {
            type: Boolean,
            value: true,
        },
        open: {
            type: Boolean,
            value: false
        },
        amount_ui: {
            type: String,
            value: null
        },
        name: {
            type: String,
            value: null
        },
        text: {
            type: String,
            value: null
        },
        user: {
            type: Object,
            value: g.user
        }, 
        balance: {
            type: String,
            value: null
        },
        balance_name: {
            type: String,
            value: null
        }
    },
    data: {

    },
    methods: {
        handleOpen() {
            var that = this
            if (that.data.bind) {
                that.setData({
                    title: that.data.title,
                    msg: that.data.msg,
                    bind: false,
                    // 以下两项为测试页面使用
                    // tips: that.data.tips,
                    // open: true,
                })
                audio.play()
                this.triggerEvent('choujiang', {})
            }
        },
        close() {
            this.triggerEvent('close_redpacket', {})
        },
        toBalance(){
            this.triggerEvent('toBalance', {})
        }
    }
})

1.0版本的基本上就是样式上的不一样，小编在这里就不列出来了，有需要的可以单独联系小编。