微信小程序实现红包雨

前言

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

直接引用就可以了。



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

index.json 引用组件

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


<!--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

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


关于我

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



如果对你有帮助送我一颗小星星(づ ̄3 ̄)づ╭❤~

github地址:github.com/sunnie1992/…

转载请联系作者!


转载于:https://juejin.im/post/5c6b6d356fb9a049b780edd4

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值