使用 uni-app 开发微信小程序，基于 lottiejs-miniapp 实现 Lottie 动画的播放。

lottiejs-miniapp 基于 lottie-web ，当前使用的 lottie-web 版本号为: 5.8.1

“动效”微信小程序 演示：

第一，打开 HBuilderX 工具，新建一个 lottiejs-miniapp-demo 项目：

第二，项目右键，点击“使用命令行窗口打开所在目录”

在命令行窗口执行命令，初始化 npm 项目：   

npm init

安装 lottiejs-miniapp 组件：

npm i lottiejs-miniapp

安装完 lottiejs-miniapp 组件后，我们可以发现在项目目录下多出了一个 node_modules 文件夹，里面将包含 lottiejs-miniapp。

第三，程序开发，打开 pages/index/index.vue 文件

1、在 <template> 中 加入 <canvas> 组件：

<canvas id="lottiejs-canvas" canvas-id="lottiejs-canvas" class="lottiejs-canvas" type="2d"></canvas>

2、在 <script></script> 中引入  lottiejs-miniapp ：

import * as lottie from 'lottiejs-miniapp'

3、在 export default 中引入  onReady() 并添加如下代码：

onReady() {
      wx.createSelectorQuery().select('#lottiejs-canvas').fields({
        node: true,
        size: true
      }).exec(res => {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');


        const dpr = wx.getSystemInfoSync().pixelRatio;
        canvas.width = res[0].width * dpr;
        canvas.height = res[0].height * dpr;
        ctx.scale(dpr, dpr);


        lottie.setup(canvas);
        lottie.loadAnimation({
          loop: true,
          autoplay: true,
          //animationData: animationData,
          path: 'https://www.lottiejs.com/wp-content/uploads/2022/01/83351-taking-the-duggy-out.json',
          rendererSettings: {
            context: ctx,
          },
        });
      });
    }

大家主要替换 loadAnimation 中的 path 参数为自己Lottie动画json文件的http地址即可。

我们使用了一个测试动效json：

https://www.lottiejs.com/wp-content/uploads/2022/01/83351-taking-the-duggy-out.json

大家一定注意执行时要开启 不校验域名的 功能。

4、在 <style>  中，可以对 <canvas> 组件添加样式，也可以在此为Lottie 动效添加背景颜色效果：

.lottiejs-canvas{
  width: 100%;
  height: 300px;
  background-color: rgb(255, 187, 0);
}

第四、执行预览

测试 Lottie 动画可以正常播放。

以上便是uni-app开发微信小程序，使用 lottiejs-miniapp 实现 Lottie 动画播放的说明，大家可以自行尝试一下。