当前位置：首页 > article >正文

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

article 2025/9/11 4:58:27

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>