在微信小程序中使用lottie遇到的问题-真机不显示

在微信小程序中使用一些动画效果可以让我们的小程序更加有吸引力，使用lottie动画的优点就是通过加载不同动画的json文件就可以得到不同的动画效果，思路很清晰、简单。然而在小程序中使用lottie动画并不是很顺利。

在微信小程序中使用lottie动画遇到的问题：1.在微信开发者工具中可以预览到动画效果；2.在真机上却看不到动画效果。GIF动画地址：lottie地址 。 小程序二维码：

动画效果：

微信小程序使用lottie动画

• 参考小程序官方文档在项目中引用lottie-miniprogram
• 在wxml中传入 canvas 对象用于适配

<canvas id="lottie-{{canvasId}}" style="display: inline-block; width: 288rpx; height: 162rpx;" type="2d"></canvas>

• 在js中使用 lottie 接口

import lottie from 'lottie-miniprogram';
queryNode() {
      var _this = this
      var lottie_path = this.data.lottie_path
      const query = wx.createSelectorQuery().in(this)
      query.select("#lottie-canvas").node(res => {
        // console.log('createSelectorQuery', res)
        const canvas = res.node
        // console.log("canvas", canvas)
        const context = canvas.getContext('2d')
        lottie.setup(canvas)
        // console.log('createSelectorQuery', lottie)
        lottie.loadAnimation({
          loop: true,
          autoplay: true,
          path: lottie_path,
          rendererSettings: {
            context
          }
        })
        _this.setData({
          hasNode: true
        })
      }).exec()
    },

lottie动画在真机不显示的问题修复

可以看到在小程序官方文档里面有两种方法加载lottie动画，即：path-动画路径、animationData-动画JSON数据。

这里的关键问题就是需要使用animationData才有效。

修改代码如下

lottie.loadAnimation({
  // path: lottie_path, 去掉这个配置，改为下面的配置
  animationData: lottieObj,
  rendererSettings: {
    context
  }
})

至于lottieObj数据，我是通过请求接口得到json数据，将json数据传入进去的。

这里修改之后就可以在真机上看到动画效果了，很开心啊。