一、下载sdk

github地址：https://github.com/svga/SVGAPlayer-Web/tree/mp
下载仓库下的 build/svga.min.js 并放置到小程序工程适当目录下

二、小程序实现

1.引入sdk

const SVGA = require("../svga.min.js")

2.js代码
其中svgaUrl为svga播放路径
player.loops=1设置为播放一次，默认是0会循环播放，循环播放时结束回调函数是不会触发的
更多其他功能可以查看上方官方的github中的介绍，简单易懂

playSvga(svgaUrl){
  let parser = new SVGA.Parser()
  let player = new SVGA.Player("#myCanvas")
  let that=this
  player.loops=1    
  parser.load(svgaUrl, function (videoItem) {
    console.log(videoItem)
    that.setData({
      svgaHeight:videoItem.videoSize.height,
      svgaWidth:videoItem.videoSize.width,
    })
    player.setVideoItem(videoItem);
    player.startAnimation();
    player.setContentMode("AspectFit")
    player.onFinished(res=>{
        console.log("动画停止了")
    })
  })

}

3.html代码

  <view c style="display:flex;justify-content: center;align-items: center;width:100%;height:812px"> 
    <canvas type="2d" style="width:{{svgaWidth}}rpx;height:{{svgaHeight}}rpx"  id="myCanvas" ></canvas>
  </view>

三、注意事项

1.真机预览记得设置白名单域名
2.如果遇到报错500，那么恭喜，可以好好找找问题了，找了半天你会发现实在找不到哪里有问题，或许你可以尝试重启一下微信开发工具，发现ok了，巨坑
3.还有就是真机调试是不支持canvas的，用预览做真机测试就好