微信小程序中,解决lottie动画在真机不显示的问题
api部分
export function getRainInfo() {return onlineRequest({url: '/ball/recruit/getRainInfo',method: 'get'});
}
data存储json数据
data:{rainJson:{}
}
onLoad方法获取json数据
onLoad(options) {let that = thisgetRainInfo().then((res)=>{that.setData({rainJson:res})})
}
initLottie动画方法
initLottie(url, type) {// 1. 销毁旧动画if (this.anim) {this.anim = null;}// 2. 更新显示状态this.setData({rainShow: type === 'rain',snowShow: type === 'snow'}, () => {// 3. 在setData回调中确保DOM已更新const selector = type === 'rain' ? '#lottie-animation-rain' : '#lottie-animation-snow';// wx.showToast({ title: selector });wx.createSelectorQuery().in(this).select(selector).node().exec((res) => {if (!res[0] || !res[0].node) {console.error('未找到Canvas节点,选择器:', selector);return;}const canvas = res[0].node;const ctx = canvas.getContext('2d');// 清空画布ctx.clearRect(0, 0, canvas.width, canvas.height);canvas.width = canvas.width; // 强制重置画布// 加载新动画this.anim = lottie.loadAnimation({loop: true,autoplay: true,// path:url, //注释这个,这个在真机不会显示!animationData: this.data.rainJson, //必须使用animationData,从后端返回json数据rendererSettings: {context: ctx}});});});
}
注意了!
path:url
, 这个在真机不会显示!
animationData: this.data.rainJson
, 必须使用animationData,从后端返回json数据
后端部分,把json文件放到resource里面
通过getRainInfo接口返回
@GetMapping("/getRainInfo")public String getRainInfo() throws IOException {// 读取JSON文件return readJsonFile("rain.json");}
如果到这里还不显示,那么就是你们页面的层级有问题,把动画页面设置成z-index:999999最大
<view style="z-index: 9999999;"><canvas id="lottie-animation-rain" hidden="{{!rainShow}}" type="2d" style="position: fixed;top:0;left:0;width: 100%;height: {{margintop+140}}px;z-index: 9999999;pointer-events: none"></canvas><canvas id="lottie-animation-snow" hidden="{{!snowShow}}" type="2d" style="position: fixed;top:0;left:0;width: 100%;height: {{margintop+140}}px;z-index: 9999999;pointer-events: none"></canvas>
</view>
pointer-events: none主要是防止其他view事件不触发
完成上面步骤真机就可以显示出来了!
相关文章:
微信小程序中,解决lottie动画在真机不显示的问题
api部分 export function getRainInfo() {return onlineRequest({url: /ball/recruit/getRainInfo,method: get}); }data存储json数据 data:{rainJson:{} }onLoad方法获取json数据 onLoad(options) {let that thisgetRainInfo().then((res)>{that.setData({r…...
基于Flink的数据中台管理平台
基于Flink做的数据中台工程项目。数据从source到clickhouse全流程的验证。集成元数据管、数据资产、数据发现功能,自主管理元数据变更,集成元数据版本管理。 同时,对整个大数据集群使用到的组件或者是工具进行管理。比如nacos、kafka、zookee…...
Flink-Yarn运行模式
Yarn的部署过程 Yarn上部署的过程是:客户端把Flink应用提交给Yarn的ResourceManager,Yarn的ResourceManager会向Yarn的NodeManager申请容器,在这些容器上,Flink会部署JobManager和TaskManager的实例,从而启动集群,Flin…...
Java---斐波那契那数列
一、斐波那契数列的定义与起源 1. 数学定义 斐波那契数列(Fibonacci Sequence)又称黄金分割数列,其定义为: 初始项: F(0)0F(1)1 递推公式: 当 n≥2 时,F(n)F(n−1)F(n−2) 前 10 项数列&…...
通过AIoTedge或ThingsKit物联网平台内置的Node-RED读取OPC-UA
《通过AIoTedge或ThingsKit物联网平台内置的Node-RED读取OPC-UA》 一、引言 随着工业物联网(IIoT)的快速发展,设备之间的互联互通变得至关重要。OPC-UA(Open Platform Communications Unified Architecture)作为一种…...
《大模型开源与闭源的深度博弈:科技新生态下的权衡与抉择》
开源智能体大模型的核心魅力,在于它构建起了一个全球开发者共同参与的超级协作网络。想象一下,来自世界各个角落的开发者、研究者,无论身处繁华都市还是偏远小镇,只要心怀对技术的热爱与追求,就能加入到这场技术狂欢中…...
genicamtl_lmi_gocator_objectmodel3d
目录 一、在halcon中找不到genicamtl_lmi_gocator_objectmodel3d例程二、在halcon中运行genicamtl_lmi_gocator_objectmodel3d,该如何配置三、代码分段详解(一)传感器连接四、代码分段详解(二)采集图像并显示五、代码分…...
Node.js 24发布:性能与安全双提升
在科技的迅速发展中,Node.js作为一个备受青睐的开源跨平台Java运行环境,近日迎来了其24.0版本的正式发布。此次更新不仅承诺提升性能和安全性,还为开发者提供了更为顺畅的开发体验,值得我们深入探讨。 Node.js 24.0的最大亮点之一…...
是德科技 | 单通道448G未来之路:PAM4? PAM6? PAM8?
内容来源:是德科技 随着数据中心规模的不断扩大以及AI大模型等技术的兴起,市场对高速、大容量数据传输的需求日益增长。例如,AI训练集群中GPU等设备之间的互联需要更高的传输速率来提升效率。在技术升级方面,SerDes技术的不断进步…...
Dify智能体开发实践
1.聊天助⼿:创建技术⽀持问答机器⼈,通过提示词约束回答范围并引导追问澄清。 1.提示词 (1)技术支持机器人提示词 你是一位专业的技术支持机器人,专门为公司的各类技术产品和服务提供支持。你的回答范围严格限制在以下…...
网络安全之APP渗透测试总结
1、脱壳 360免费版加固,frida-dexdump、blackdex都可以脱掉。这里就不演示了 GitHub - hluwa/frida-dexdump: A frida tool to dump dex in memory to support security engineers analyzing malware. 2、密码泄露 经过对app登录界面,有对密码强度进行…...
笔记:NAT
一、NAT 的基本概念 NAT(Network Address Translation,网络地址转换) 是一种在 IP 网络中重新映射 IP 地址的技术,主要用于解决 IPv4 地址短缺问题,同时提供一定的网络安全防护作用。 功能: 将内部网络&am…...
民锋视角下的多因子金融分析模型实践
在当前金融市场环境中,数据粒度与因子建模逐渐成为提升交易系统稳定性的重要方式。民锋长期专注于模型优化与策略深度挖掘,提出了一套适用于中短周期的数据判断体系,核心在于“多因子融合动态调权”。 具体而言,民锋的分析框架常…...
ThinkPHP 根据路由文件获取路由列表
定义一个路由变量 比如我们要获取admin的路由 $routeFile "admin.php"; 清除路由 调用 Route::clear() 方法,清除当前已定义的所有路由。 Route::clear();设置路由懒加载 调用 Route::lazy(false) 方法,禁用路由的懒加载功能,选择立即加…...
算法打卡第三天
10.长度最小的子数组 (力扣209题) 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 子数组 [numsl, numsl1, ..., numsr-1, numsr] ,并返回其长度**。**如果不存在符合条件的子…...
04_spring容器管理单例多例
文章目录 1. 单例(Singleton)2. 多例(Prototype)3. 使用场景4. 注意事项 在Spring框架中,Spring容器负责创建、配置和管理应用程序中的bean。关于单例(Singleton)和多例(Prototype&a…...
算法C++最大公约数
原理 代码实现 #include <stdio.h>// 递归版本 int gcd_recursive(int a, int b) {if (b 0) return a; // 终止条件:余数为0时,除数即为GCDreturn gcd_recursive(b, a % b); // 递归调用,更新为(b, a%b) }// 迭代版本 int gcd_iterat…...
在 Ubuntu 下通过 C APP程序实现串口发送数据并接收返回数据
一、前言 使用 C 应用进行串口调用需要手动配置串口的各项参数,并且 Ubuntu 下的串口是通过读写文件实现的,所以还需要设置权限。 二、源码分析 serial.c #include <stdio.h> #include <stdlib.h> #include <string.h> #include <…...
ubuntu24.04+RTX5090D 显卡驱动安装
初步准备 Ubuntu默认内核太旧,用mainline工具安装新版: sudo add-apt-repository ppa:cappelikan/ppa sudo apt update && sudo apt full-upgrade sudo apt install -y mainline mainline list # 查看可用内核列表 mainline install 6.13 # 安装…...
ubuntu22.04上运行opentcs6.4版本
1、下载github上的源码: openTCS - Downloads 2、安装java21 我的版本是:java --version java 21.0.6 2025-01-21 LTS Java(TM) SE Runtime Environment (build 21.0.68-LTS-188) Java HotSpot(TM) 64-Bit Server VM (build 21.0.68-LTS-188, mixed mo…...
labelme进行关键点标注并转换为yolo格式
目录 1、labelme安装和打开2、边界框和关键点标注3、将lamelme的json格式转成yolo可以使用的txt格式4、将数据和标签按照9比1分为训练集和测试集 1、labelme安装和打开 在python3.9及以上环境中安装labelme,labelme要用到pyqt,所以在使用labelme之前要安…...
每日算法-250521
每日算法学习 大家好!这是我今天的算法练习记录,分享四道 LeetCode 题目的解题思路和代码。希望能对大家有所帮助! 219. 存在重复元素 II 题目 思路 哈希表 利用哈希表来存储数组中元素及其最近出现的索引。 解题过程 当我们遍历数组 num…...
正大模型视角下的高频交易因子构建策略研究
正大模型视角下的高频交易因子构建策略研究 在金融衍生品交易体系中,数据主导型模型逐渐成为核心竞争力。以正大为代表的量化团队,通过大量历史数据研究,构建出一套基于高频因子的模型框架,从成交节奏、盘口行为、价格波动等维度动…...
Babylon.js学习之路《八、动画基础:关键帧动画与缓动效果》
文章目录 1. 引言:动画在3D场景中的核心作用2. 关键帧动画基础2.1 键帧动画原理2.2 创建简单关键帧动画 3. 缓动函数(Easing Functions)3.1 缓动函数的作用3.2 应用缓动函数 4. 复杂动画:多属性联动与序列控制4.1 同时控制位置、旋…...
小满未满,是成长的序章
节气小满,昭示着奋斗正当时,Codigger 怀揣热忱,在代码的天地里披荆斩棘,向着圆满目标大步迈进 。...
JavaWeb 开发流程
项目建立 SpringBoot框架构建 Spring Boot 是基于 Spring 框架的开源 Java 基础框架,用于创建独立、生产级的基于 Spring Framework 的应用程序。 我们可以使用IDEA建立SpringBoot框架。 语言选择Java,类型选择Maven,JDK和Java要保持一致&…...
Cmake 使用教程
介绍 CMake 是一个开源、跨平台的构建系统,主要用于软件的构建、测试和打包。CMake 使用平台无关的配置文件 CMakeLists.txt 来控制软件的编译过程,并生成适用于不同编译器环境的项目文件。例如,它可以生成 Unix 系统的 Makefile 、 Win…...
CLIP、ViLT 与 LLaVA:多模态模型是如何看图说话的?
一、前言:我们已经讲了 MLLM 能力,但它到底是怎么实现“看图说话”的? 在之前文章中,我们已经提到了MLLM可以看图说话以及文生图等能力,ViT统一图文多模态架构。那模型是如何处理图文信息以及不同处理所带来的能力是怎…...
基于Springboot + vue3实现的流动摊位管理系统
项目描述 本系统包含管理员、用户、商家三个角色。 管理员角色: 用户管理:管理系统中所有用户的信息,包括添加、删除和修改用户。 配置管理:管理系统配置参数,如上传图片的路径等。 权限管理:分配和管理…...
我的软考经历
说明:本文分享博主软考经验,及软考证书在找工作时的作用。 软考 软考,全称:中国计算机技术与软件专业技术资格(水平)考试,报名/考试/查询网址为,中国计算机技术职业资格网 考试分…...
C++的异常
引入:异常的意义是什么? ①:错误分离 将正常逻辑(try)与错误处理(catch)分离,避免代码被大量 if-else 污染。 ②:强制处理 若不捕获异常,程序终止,…...
精益制造数字化转型智能工厂三年规划建设方案
该文档是精益制造数字化转型智能工厂三年规划建设方案,以打造高品质、低成本、柔性化的绿色智能工厂为愿景,围绕制造技术、自动化、数智化、管理赋能四大路径,通过夯实 EHS、品质一致性、生产安定化、现场整洁四大基石,推进标杆车间打造、联合管理、TOB 流程改善等专项。规…...
Linux 文件(3)
文章目录 1. Linux下一切皆文件2. 文件缓冲区2.1 缓冲区是什么2.2 缓冲区的刷新策略2.3 为什么要有缓冲区2.4 一个理解缓冲区刷新的例子 3. 标准错误 1. Linux下一切皆文件 在刚开始学习Linux的时候,我们就说Linux下一切皆文件——键盘是文件,显示器是文…...
Java异步编程利器:CompletableFuture 深度解析与实战
精心整理了最新的面试资料和简历模板,有需要的可以自行获取 点击前往百度网盘获取 点击前往夸克网盘获取 一、CompletableFuture 概述 CompletableFuture是Java 8引入的异步编程工具类,实现了Future和CompletionStage接口,支持链式调用、组…...
如何支持Enhanced RTMP H.265(HEVC)
在实时音视频传输中,H.264长期占据主流,但随着视频质量要求的不断提高和带宽压力的加大,H.265(HEVC)作为下一代视频编码标准逐渐崭露头角。 在这种背景下,我们顺应行业发展趋势,成功集成了对Enh…...
Idea 查找引用jar包依赖来源的Maven pom坐标
目录 问题引入 实现解决 问题引入: 在查看拉取的项目,维护自己项目、或者迁移原有项目时,会遇到不知道代码中引用到的依赖从哪里引用到的。 所以利用Idea,从import语句到Maven项目结构树中查找,最终找到pom文件里的…...
Linux操作系统之进程(二):进程状态
目录 前言 一、补充知识点 1、并行与并发 2、时间片 3、 等待的本质 4、挂起 二. 进程的基本状态 三、代码演示 1、R与S 2、T 3、Z 四、孤儿进程 总结: 前言 在操作系统中,进程是程序执行的基本单位。每个进程都有自己的状态,这些…...
web.py使用时报错AttributeError: No template named image_window
在使用python的web.py框架做前后端时遇到问题。 问题代码主要如下,当加上main(iamge_name)这行代码后就会报错。报错信息包含两个:第一是找不到image_window模板;第二是gbk无法解码... class ImageWindow:def GET(self, image_name):main(i…...
2025年度消费新潜力白皮书470+份汇总解读|附PDF下载
原文链接:https://tecdat.cn/?p42178 过去一年,消费市场在政策驱动与技术迭代中呈现结构性变革。社零总额达487,895亿元,实物商品网零额占比27%,线上渠道成为增长引擎。本报告从食品饮料、美妆护肤、家电数码、服饰户外四大核心领…...
全平台开源电子书阅读器推荐,支持多端同步+AI朗读!支持epub/mobi/azw3/pdf常见电子书格式!
Readest是一款好用的免费阅读工具,界面干净不花哨,特别适合喜欢专心读书的朋友。这个软件是经典阅读软件Foliate的全新升级版本,用最新技术开发,能在手机、电脑(包括苹果和Windows系统)以及网页上顺畅使用。…...
创建Workforce
创建你的Workforce 3.3.1 简单实践 1. 创建 Workforce 实例 想要使用 Workforce,首先需要创建一个 Workforce 实例。下面是最简单的示例: from camel.agents import ChatAgent from camel.models import ModelFactory from camel.types import Model…...
关于光谱相机的灵敏度
一、灵敏度的核心定义 光谱灵敏度(单色灵敏度) 描述光谱相机对单色辐射光的响应能力,即探测器对特定波长入射光的输出信号强度与入射光功率的比值。 例如,若在680nm波长下的光谱灵敏度较高,则表示该相机对此…...
【Redis】二、Redis常用数据类型命令学习
目录 一、String 1. SET、GET:设置与读取键值对: 2. DEL:删除键 3. INCR、DECR:自增 / 自减(常用于计数器) 4. APPEND:内容追加 5. EXPIRE:设置过期时间 / 查看剩余时间&#x…...
HarmonyOS基础组件:Button三种类型的使用
简介 HarmonyOS在明年将正式不再兼容Android原生功能,这意味着对于客户端的小伙伴不得不开始学习HarmonyOS开发语言。本篇文章主要介绍鸿蒙中的Button使用。 HarmonyOS中的Button相较于Android原生来说,功能比较丰富,扩展性高,减…...
RT_Thread——快速入门
文章目录 一、RT-Thread 目录结构二、核心文件三、移植时涉及的文件3.1 CPU 部分3.2 BSP 部分 四、内存管理五、启动流程及main函数5.1 启动流程5.2 关键函数速览5.3 main 函数示例 六、数据类型和编程规范6.1 数据类型6.2 函数名6.3 结构体定义6.4 注释规范 七、使用模拟器运行…...
Java 参数值传递机制
一个很经典的问题: java的方法入参 是值传递还是地址传递? 答案是:值传递。 今天排查一个生产问题,数据库链接资源没有关闭。 大致代码逻辑如下: try{Preparestatement ps null;String sql "select * from tableA wher…...
Redis 的 key 的过期策略是怎么实现的
在 Redis 中,有一个 expire 命令,用来设置某个 key 的过期时间,当超过这个时间后,这个 key 就被删除了,我们也就获取不到了,但是 Redis 是如何做到对于每一个设置了过期时间的 key 都能按时删除的呢&#x…...
ROG NUC 2025 :狂暴而冷静的小猛兽
在今年1 月的 CES 展会上,华硕首次披露了ROG NUC 2025,就以突破性紧凑设计桌面级超强性能配置,引发全球科技媒体和游戏爱好者的热议。蛰伏数月,蓄力进化! 华硕自承接英特尔NUC产品线以来,就一直致力于重塑迷…...
origin绘图之【如何将多条重叠、高度重叠的点线图、折线图分开】
在使用 Origin 进行数据可视化时,尤其是在绘制多组数据的折线图或点线图时,我们经常会遇到这样的问题:多条曲线重叠严重,难以区分,导致图形信息密集、可读性差,影响图表的传达效果。 那么,我们该…...
2025第一届轩辕杯--Crypto--WriteUp
2025第一届轩辕杯–Crypto–WriteUp Crypto easyrsa task e 65537 n 1000000000000000000000000000156000000000000000000000000005643 c 418535905348643941073541505434424306523376401168593325605206exp from Crypto.Util.number import inverse, long_to_bytese …...