小程序紅包雨

前言

話不多少先上效果,引入很簡單，將/components/s-packetrain/index放到你的組件文件夾中

直接引用就可以了。

首先你要先在頁面引入組件

index.json 引用組件

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

index.wxml

<!--pages/packetRain/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 加交流羣，給我提意見，交流學習。

如果對你有幫助送我一顆小星星（づ￣3￣）づ╭❤～
github地址：https://github.com/sunnie1992...

轉載請聯繫作者！