ui 给的Json 特效文件在小程序中展示

npm install --save lottie-miniprogram
npm init

记得要在小程序工具中构建一下npm

<canvas id="booth" type="2d" class="booth" />

import lottie from 'lottie-miniprogram' 
onLoad(){
	wx.createSelectorQuery().selectAll('#booth').node(res => {
      const canvas = res[0].node
      const context = canvas.getContext('2d')
      canvas.width = canvas._width
      canvas.height = canvas._height

      lottie.setup(canvas)
      this.ani = lottie.loadAnimation({
        loop: true,
        autoplay: true,
        animationData: require('../../../data/booth.js'),//这是ui给的json文件
        rendererSettings: {
          context,
        },
      })
      this.inited = true
    }).exec()
}

ui给的json文件要修改一下

//源文件这样的
{"v":"5.8.1","fr":25,"ip":75,"op":125,"w":1170,"h":918,"nm":"样式2_拆盒","ddd":0,"assets":[{"id":"image_0","w":390,"h":153,"u":"images/","p":"img_0.png","e":0},{"id":"image_1","w":390,"h":127,"u":"images/","p":"img_1.png","e":0},{"id":"image_2","w":390,"h":93,"u":"images/","p":"img_2.png","e":0}],"layers":[{"ddd":0,...}]}

记得要把文件json后缀 改成js 后缀

//小程序要用module.exports= 暴露出来
module.exports={"v":"5.8.1","fr":25,"ip":75,"op":125,"w":1170,"h":918,"nm":"样式2_拆盒","ddd":0,"assets":[{"id":"image_0","w":390,"h":153,"u":"images/","p":"img_0.png","e":0},{"id":"image_1","w":390,"h":127,"u":"images/","p":"img_1.png","e":0},{"id":"image_2","w":390,"h":93,"u":"images/","p":"img_2.png","e":0}],"layers":[{"ddd":0,...}]}