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

api部分

javascript 复制代码
export function getRainInfo() {
  return onlineRequest({
    url: '/ball/recruit/getRainInfo',
    method: 'get'
  });
}

data存储json数据

javascript 复制代码
data:{
	rainJson:{}
}

onLoad方法获取json数据

javascript 复制代码
onLoad(options) {
  let that = this
  getRainInfo().then((res)=>{
    that.setData({
      rainJson:res
    })
  })
}

initLottie动画方法

javascript 复制代码
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接口返回

java 复制代码
 @GetMapping("/getRainInfo")
 public String getRainInfo() throws IOException {
     // 读取JSON文件
     return readJsonFile("rain.json");
 }

如果到这里还不显示,那么就是你们页面的层级有问题,把动画页面设置成z-index:999999最大

html 复制代码
<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事件不触发

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

相关推荐
游戏开发爱好者88 小时前
日常开发与测试的 App 测试方法、查看设备状态、实时日志、应用数据
android·ios·小程序·https·uni-app·iphone·webview
2501_915106329 小时前
app 上架过程,安装包准备、证书与描述文件管理、安装测试、上传
android·ios·小程序·https·uni-app·iphone·webview
2501_9151063210 小时前
使用 Sniffmaster TCP 抓包和 Wireshark 网络分析
网络协议·tcp/ip·ios·小程序·uni-app·wireshark·iphone
宠友信息11 小时前
2025社交+IM及时通讯社区APP仿小红书小程序
java·spring boot·小程序·uni-app·web app
“负拾捌”12 小时前
python + uniapp 结合腾讯云实现实时语音识别功能(WebSocket)
python·websocket·微信小程序·uni-app·大模型·腾讯云·语音识别
换日线°1 天前
NFC标签打开微信小程序
前端·微信小程序
光影少年1 天前
AIGC + Taro / 小程序
小程序·aigc·taro
2501_915918411 天前
在 iOS 环境下查看 App 详细信息与文件目录
android·ios·小程序·https·uni-app·iphone·webview
2501_916007471 天前
没有 Mac 用户如何上架 App Store,IPA生成、证书与描述文件管理、跨平台上传
android·macos·ios·小程序·uni-app·iphone·webview
天空属于哈夫克31 天前
Go 语言实战:构建一个企微外部群“技术贴收藏夹”小程序后端
小程序·golang·企业微信