小程序红包雨的实现示例

2024-08-03 11:38:23

前言

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序实现红包雨功能

本文为大家分享了微信小程序实现红包雨的具体代码,供大家参考,具体内容如下今天有个小师妹来问我怎样用微信小程序实现红包雨效果,如果用web很好实现,但是小程序不是那么容易,整合自己也有一年没摸过小程序了,决定试一试. 首先明确"红包雨"的需求: 随机位置掉落随机红包样式同一时间掉落个数随机每个红包的掉落速度随机,但不能太快也不能太慢首先看看我做的效果吧首先明确小程序实现红包雨和web网页实现红包雨难点上有什么不同: 小程序不能直接操作dom,web网页可以操作小程序循环渲染
小程序红包雨的实现示例

前言话不多少先上效果,引入很简单,将/components/s-packetrain/index放到你的组件文件夹中直接引用就可以了. 首先你要先在页面引入组件 index.json 引用组件 { "navigationBarTitleText": "红包雨", "usingComponents": { "s-packetrain": "/components/s-packetrain/index" }
微信小程序form表单组件示例代码

表单,将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交. 当点击<form/>表单中 formType 为 submit 的<button/>组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key. 属性名类型说明 report-submit Boolean 是否返回fo
mpvue网易云短信接口实现小程序短信登录的示例代码

上一篇简单介绍了mpvue实现快递单号查询,慢慢发现mpvue真的和vue很像,但它有几乎十分的吻合小程序的语法规范,刚开始用起来会觉得特点的爽,但涉及到细节却是有很多采坑的地方.今天利用网上的网易云接口,再结合mpvue简单写一写小程序短信验证登录. 简单封装的一个网络请求文件,网易云接口网上大佬们GitHub上还是比较的多而且开源 const baseURL = "https://*****:1717"; //基路径 exports.http = function({url,met
小程序中手机号识别的示例

最近做的一个页面里面包含手机号,点击可以拨打电话,本计划着让后端把各个字段查出来就行了,结果接口方面给直接拼好了. 接口返回的字符串: "[王海]师傅已接单,联系电话:18839687266.稍后与您联系.师傅签到码为[1234],师傅上门输入签到码后才可开始服务." 这让我们绑定打电话的事件就不那么方便了,问题聚焦到解析字符串,找出手机号. split大法,通过split得到包含手机号的数组,然后遍历这个数组,给手机号的元素打上标签. parseStr (str){ const re
微信小程序虚拟列表的实现示例

目录前言分析初始渲染方法初步优化进一步优化方法二前言大部分小程序都会有这样的需求,页面有长列表,需要下拉到底时请求后台数据,一直渲染数据,当数据列表长时,会发现明显的卡顿,页面白屏闪顿现象. 分析请求后台数据,需要不断的setData,不断的合并数据,导致后期数据渲染过大渲染的DOM 结构多,每次渲染都会进行dom比较,相关的diff算法比较耗时都大 DOM数目多,占用的内存大,造成页面卡顿白屏初始渲染方法 /* * @Descripttion: * @version: *
uni-app使用微信小程序云函数的步骤示例

创建云函数目录首先,我们需要在uni-app项目文件夹下,创建一个云函数目录,路径随意,我这里是functions.然后先随便在里面放一些文件,这里以new_file.css为例.(放文件的原因是:确保编译成小程序后cloudfunctions文件夹存在.如果该文件夹下没有文件,默认是不会在微信小程序开发平台中显示该文件夹的.) 修改manifest.json 在uni-app根目录下,修改manifest.json中的微信小程序项,结构如下 "mp-weixin" : { /* 小
微信小程序获取手机号 JavaScript解密示例代码详解

当我们在开发微信小程序中,有一个常用的功能,就是获取用户的手机号,然后一键登入小程序,那么手机号如何获取呢?请认真看完本文,保证可以获取到用户的手机号. 刚开始开发微信小程序的时候,想着实现手机验证码登入,后来查阅资料得知,发给用户的短信是要自己付费的.后来想想,微信获取用户的手机号一样可以保证手机号码的真实性,因为手机号既然可以绑定微信,那么肯定是被严格核验过的,然后就开始了获取手机号之旅,网上教程有很多,但不知什么原因,都是会少一些内容,有的只有前端代码,没有后端:有的后端代码是PHP,不是
微信小程序骨架屏的实现示例

目录什么是骨架屏小程序中骨架屏的生成方式引入方法显示与隐藏为了优化用户体验,骨架屏一直是开发者比较喜欢的表现方式,也就是首屏占位的一种表现方式,不会让浏览者因为长时间的等待而焦躁.小程序中骨架屏的实现还是比较简单的,但是没用过的同学难免会误入歧途,今天就分享一下小程序中骨架屏的实现. 什么是骨架屏骨架屏是页面的一个空白版本,通常会在页面完全渲染之前,通过一些灰色的区块大致勾勒出轮廓,待数据加载完成后,再替换成真实的内容.通常在小程序中,我们需要手工维护骨架屏的代码,当业务变更时,同样
微信小程序实现手势解锁的示例详解

目录一.项目展示二.设置手势.手势解锁三.手势重置一.项目展示这是一款简单实用的手势解锁工具手势解锁是当下常用的解锁方式本实例以工具的形式可以嵌入到不同的项目之中二.设置手势.手势解锁 wxlocker.prototype.storePass = function(psw,cb) {// touchend结束之后对密码和状态的处理 if (this.pswObj.step == 1) {//step==1表示还没有设置密码状态 if (this.checkPass(this.p
微信小程序picker组件简单用法示例【附demo源码下载】

本文实例讲述了微信小程序picker组件简单用法.分享给大家供大家参考,具体如下: picker滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器(mode=selector),时间选择器(mode=time),日期选择器(mode=date),默认是普通选择器. 具体功能说明如下: 普通选择器:mode=selector 属性名类型默认值说明 range Array [] mode为selector时,range有效 value Number 0 mode为selecto

小程序红包雨的实现示例

相关推荐

随机推荐