中科宁波网站建设,建设单位到江川区住房和城乡建设局网站,建设银行软件官方网站下载,长春网站上排名微信小程序红包雨功能实现#xff1a;从组件封装到页面调用的完整实践
先看示例截图#xff1a;
一、背景与技术选型 在微信小程序营销活动中#xff0c;红包雨是一种极具吸引力的互动形式。实现红包雨效果主要有 Canvas 和图片两种方案#xff1a;
#xff08;1…微信小程序红包雨功能实现从组件封装到页面调用的完整实践
先看示例截图
一、背景与技术选型 在微信小程序营销活动中红包雨是一种极具吸引力的互动形式。实现红包雨效果主要有 Canvas 和图片两种方案
1Canvas 方案性能优异资源占用小但视觉表现依赖绘图 API 2图片方案视觉效果真实可灵活设计红包样式但资源加载与内存占用较高
本文将采用图片方案实现红包雨组件通过组件化设计提升代码复用性并分享性能优化经验帮助开发者在真实感与性能间找到平衡点。 二、组件设计与实现 2.1 组件结构设计 首先创建组件文件夹components/img-rain目录结构如下
components/
└─ img-rain/├── index.js // 逻辑层├── index.wxml // 视图层├── index.wxss // 样式层├── index.json // 配置文件└── images/ // 红包图片资源├── img1.png├── img2.png└── img3.png2.2 组件核心代码实现 以下是图片红包雨组件的完整实现
Component({properties: {petalCount: {type: Number,value: 60},speed: {type: Number,value: 2},wind: {type: Number,value: 0.3},images: {type: Array,value: [/images/5.png,/images/100.png,/images/500.png,/images/1000.png]}},data: {petals: []},lifetimes: {attached() {this.createPetals();this.startAnimation();},detached() {this.stopAnimation();}},methods: {createPetals() {const {petalCount,images} this.properties;const {windowWidth,windowHeight} wx.getWindowInfo();const petals [];for (let i 0; i petalCount; i) {const size 40 Math.random() * 20;const left Math.random() * (windowWidth - size);const top -size - Math.random() * windowHeight;petals.push({id: petal-${i},image: images[Math.floor(Math.random() * images.length)],x: left,y: top,size,speed: 5 Math.random() * this.properties.speed,windEffect: (Math.random() - 0.5) * this.properties.wind});}this.setData({petals});},// 开始动画startAnimation() {const {windowHeight} wx.getWindowInfo();this.animationInterval setInterval(() {this.setData({petals: this.data.petals.map(petal {// 更新位置和旋转petal.y petal.speed;petal.x petal.windEffect;// 如果花瓣超出屏幕重置到顶部if (petal.y windowHeight petal.size || petal.x -petal.size || petal.x wx.getWindowInfo().windowWidth petal.size) {petal.y -petal.size - Math.random() * windowHeight;petal.x Math.random() * (wx.getWindowInfo().windowWidth - petal.size);}return petal;})});}, 30); // 约30ms一帧},// 停止动画stopAnimation() {if (this.animationInterval) {clearInterval(this.animationInterval);}},}
});2.3 视图层实现
view classrain-containerimage wx:for{{petals}} wx:keyid src{{item.image}} styleposition: fixed;left: {{item.x}}px;top: {{item.y}}px;width: {{item.size}}px;height: {{item.size20}}px;pointer-events: none;z-index: -1;/image
/view2.4 样式层实现
.rain-container {position: fixed;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 9998;overflow: hidden;
}三、页面调用与集成 3.1 页面配置 在需要调用的界面的json文件处引入组件
{usingComponents: {img-rain: /components/img-rain/index},navigationStyle: custom
}3.2 页面布局
img-rain petalCount10 speed0 wind0./img-rain四、总结与拓展 本文通过组件化设计实现了微信小程序中基于图片的红包雨效果兼顾了视觉真实感与代码复用性。实际项目中可根据活动预算和性能要求选择合适的实现方案
1对性能要求高、视觉要求低的场景推荐使用 Canvas 方案 2对视觉效果要求高、预算充足的场景推荐使用图片方案
编写不易谢谢点赞收藏关注后续更新更多示例呦~
