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

news2025/5/23 15:53:36

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>