微信小程序实现红包雨

news/2024/7/4 9:03:42

前言

话不多少先上效果,引入很简单,将/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


http://www.niftyadmin.cn/n/629182.html

相关文章

dbf在excel里更改后在gis中乱码_软件技巧如何在ARCMAP里标注文件特征信息

本文为工作室原创作品&#xff0c;如需转载请联系主页君在OSM下载的数据里&#xff0c;打开他们的属性表&#xff0c;里面往往有非常多的数据信息&#xff0c;例如道路的等级&#xff0c;道路名称&#xff0c;甚至含有道路的长度。当你想直观的体现在总图上时候&#xff0c;就可…

python row函数_Python第16课:函数的定义和调用

如何用最浅显的语言&#xff0c;给中小学生讲Python&#xff0c;是我一直在努力并实践的问题。——华丽老师课程贴士变量名、函数名等&#xff0c;这些名字除了要满足命名规则&#xff0c;还要做到“见名知意”&#xff0c;这是增加代码可读性的基础。满足命名规则很简单&#…

23种设计模式之适配器模式

23种设计模式总篇&#xff1a;&#xff1a;https://chenmingyu.top/categories/设计模式/ 适配器模式 适配器模式属于结构型模式,又叫包装模式 定义&#xff1a; 把一个类的接口变换成客户端所期待的另一种接口&#xff0c;从而使原本接口不匹配而无法一起工作的两个类能够在一…

aws beanstalk mysql_AWS CloudFormation与BeanStalk的联系与区别

关注过云计算的人应该都知道AWS是什么&#xff1f;AWS CloudFormation作为亚马逊的一项服务肯定是有其存在的价值的&#xff01;CloudFormation的中文的意思是“云编排”&#xff0c;在我看来“编排”就 是整合亚马逊云资源或者服务的一种方式&#xff0c;是相对于AWS底层服务的…

PTA编程总结3

题目7-1 抓老鼠啊~亏了还是赚了&#xff1f; 某地老鼠成灾&#xff0c;现悬赏抓老鼠&#xff0c;每抓到一只奖励10元&#xff0c;于是开始跟老鼠斗智斗勇&#xff1a;每天在墙角可选择以下三个操作&#xff1a;放置一个带有一块奶酪的捕鼠夹(T)&#xff0c;或者放置一块奶酪(C…

4.3 阻塞赋值与非阻塞赋值

一&#xff0e;Golden Rule 编码原则很多&#xff0c;就阻塞非阻塞赋值而言&#xff0c;新手最需要牢记的是其中三条&#xff1a; 1) 时序逻辑一定用非阻塞赋值”<”,一旦看到敏感列表有posedge就用”<”。 2) 组合逻辑一定用””&#xff0c;一旦敏感列表没有…

laravel mysql 队列_Laravel 基于redis队列的解析

为什么使用队列使用队列的目的一般是:异步执行出错重试解释一下:异步执行: 部分代码执行很耗时, 为了提高响应速度及避免占用过多连接资源, 可以将这部分代码放到队列中异步执行.Eg. 网站新用户注册后, 需要发送欢迎的邮件, 涉及到网络IO无法控制耗时的这一类就很适合放到队列中…

html中偏移量和坐标,页面元素坐标和偏移

鼠标事件1. 客户区坐标位置(clientX/clientY)通过event事件对象的clientX/clientY属性,获得事件发生时鼠标指针在视口的水平垂直坐标2. 屏幕坐标位置(screenX/screenY)通过event事件对象的clientX/clientY属性,获得事件发生时鼠标指针相对于整个屏幕的坐标信息function showCoo…