微信小程序中，解决lottie动画在真机不显示的问题_微信小程序 lottie

api部分

export function getRainInfo() { return onlineRequest({ url: \'/ball/recruit/getRainInfo\', method: \'get\' });}

data存储json数据

data：{rainJson:{}}

onLoad方法获取json数据

onLoad(options) { let that = this getRainInfo().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事件不触发

完成上面步骤真机就可以显示出来了！