小程序红包雨

女爷i 2022-03-07 04:28 202阅读 0赞

## 前言 ##

话不多少先上效果,引入很简单，将/components/s-packetrain/index放到你的组件文件夹中

直接引用就可以了。  
![图片描述][3214958864-5c6b72354aa60_articlex]

首先你要先在页面引入组件

index.json 引用组件

{
      "navigationBarTitleText": "红包雨",
      "usingComponents": {
        "s-packetrain": "/components/s-packetrain/index"
      }
    }

index.wxml

<view class="container">
      <image mode="aspectFit" src="/assets/logo.png"></image>
      <view class='title'>Soul Weapp</view>
      <view>红包雨</view>
    </view>
    
    <s-packetrain visible="{
        {visible}}" time="{
        {time}}" readyTime="{
        {readyTime}}" min="{
        {min}}" max="{
        {max}}" bindfinish="doFinish"></s-packetrain>

index.js

Page({
      data: {
        visible: true,
        time: 15,
        readyTime: 3,
        min: 1,
        max: 5
      },
      onLoad: function(options) {
        this.init()
      },
      // 初始化红包雨
      init() {
        this.setData({
          time: 15, // 游戏时间
          readyTime:3, // 准备时间
          min: 1, // 金额最小是1
          max: 5 // 金额最大是5
        })
      },
      // 结束
      doFinish() {
        this.setData({
          visible: false //  隐藏界面
        })
      }
    })

组件在 /components/s-packetrain/index

需要引入[cax][]，HTML5 Canvas 2D Rendering Engine - 小程序、小游戏以及 Web 通用 Canvas 渲染引擎

## 关于我 ##

您可以扫描添加下方的微信并备注 Soul 加交流群，给我提意见，交流学习。

![图片描述][1804607150-5c6b71f1e2cbc_articlex]

如果对你有帮助送我一颗小星星（づ￣3￣）づ╭❤～  
github地址：[https://github.com/sunnie1992...][https_github.com_sunnie1992...]

转载请联系作者！

[3214958864-5c6b72354aa60_articlex]: /images/20220307/f69470e66cba4cd2b94d759f55437fa0.png
[cax]: https://github.com/dntzhang/cax
[1804607150-5c6b71f1e2cbc_articlex]: /images/20220307/c383520e93cb4ec6b8c30e1c6cda62db.png
[https_github.com_sunnie1992...]: https://github.com/sunnie1992/soul-weapp