在原生微信小程序开发中，使用 lottiejs-miniapp 实现 Lottie 动画的播放。

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

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

        打开微信开发工具：

        我在这里新建了一个代码片段作为演示：

     （代码片段：https://developers.weixin.qq.com/s/Eo0K1emN7zwj）

        1、在项目目录（我这里是在index目录）执行命令，初始化 npm 项目：   

npm init

2、安装 lottiejs-miniapp 组件：

npm i lottiejs-miniapp

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

3、构建 npm

        这是很重要的一步，在微信开发者工具 -- 顶部菜单  -- 工具 中找到“构建 npm”功能，并点击。

        开发者工具提示“完成构建”即可。

       构建npm完成后，会在项目中多出一个 miniprogram_npm 文件夹，如下：

 4、下一步，我们开始进行动画的调用。

        第一，打开 index.wxml 文件，我们需要在页面文件中 预置一个 <canvas> 组件：

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

其中，id 和 canvas-id 都命名为"lottiejs-canvas"。

        第二，打开 index.js  文件，先引入 lottiejs-miniapp

import * as lottie from 'lottiejs-miniapp'

         第三，在 index.js  文件，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

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

第四，在 index.wxss  文件，可以对 <canvas> 组件添加样式，也可以在此为Lottie 动效添加背景颜色效果：

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

到此，我们就可以预览动画效果了：

代码片段地址：https://developers.weixin.qq.com/s/Eo0K1emN7zwj

代码片段使用注意事项：

1、填写自己的小程序测试appid；

2、执行 npm install 安装依赖；

3、执行构建 npm 功能。