微信小程序 使用lottie及处理eval is not a function问题

  1. npm 安装:
npm install --save lottie-miniprogram
  1. 传入 canvas 对象用于适配
<canvas id="canvas" type="2d"></canvas>
import lottie from 'lottie-miniprogram'

let query = wx.createSelectorQuery().in(this)
query.select(id).node((res) => {
      if (!res) return
      const width = 460
      const height = 460
      // 取得 canvas 节点
      const canvas = res.node
      const context = canvas.getContext('2d')
      const dpr = wx.getSystemInfoSync().pixelRatio
      canvas.width = width * dpr
      canvas.height = height * dpr
      context.scale(dpr, dpr)
      lottie.setup(canvas)
      this.ani = lottie.loadAnimation({
        loop: true, // 循环播放
        autoplay: true, // 自动播放
        animationData: jsonData,
        rendererSettings: {
          context,
        },
      })
    }).exec()
  1. 注意这边的animationData不能使用网络地址,得用json数据
  2. 有时候用UI给的文件,会报错TypeError: eval is not a function。是因为小程序本身不支持动态执行脚本,因此 lottie 的 expression 功能也是不支持的。所以在导出 JSON 文件时禁用相关特性



©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容