flutter web：lottie jssdk报错处理

Posted 2022-04-04 BennuCTech

升级到Flutter 2.0后，在使用过程中发现会报错类似NoSuchMethod: call()，导致后续的动画显示不出来。

（注意：这个问题是将渲染器改成html Render之后出现的，不知道在CanvasKit上会不会出现）

但是报错的堆栈信息根本没用，除了知道源头是lottie.js中的triggerEvent函数，如下：

  triggerEvent: function (eventName, args) 
    if (this._cbs[eventName]) 
      var len = this._cbs[eventName].length;
      for (var i = 0; i < len; i += 1) 
        this._cbs[eventName][i](args);
      
    
  ,

报错位置就是this._cbs[eventName][i](args);

我们将这行代码try-catch上，再执行就正常了。

但是会出现另外一个问题，我们为lottie注册了一个complete的回调，这时候回调不执行了。

对比一下注册监听的代码：

  triggerEvent: function (eventName, args) 
    if (this._cbs[eventName]) 
      var len = this._cbs[eventName].length;
      for (var i = 0; i < len; i += 1) 
        this._cbs[eventName][i](args);
      
    
  ,
  addEventListener: function (eventName, callback) 
    if (!this._cbs[eventName]) 
      this._cbs[eventName] = [];
    
    this._cbs[eventName].push(callback);

    return function () 
      this.removeEventListener(eventName, callback);
    .bind(this);
  ,

可以确定之前报错可能就是因为这个回调，triggerEvent实际上就是处理这些callback的。所以应该是我们设置的回调出了问题。

在js中我们代码只有一行：

lottieObj.addEventListener('complete', lottieLoaded);

所以这里问题应该不大，lottieLoaded其实是一个flutter函数，如下：

js.context["lottieLoaded"] = lottieLoaded;

  // 动画播放完成触发
  void lottieLoaded() 
    print("loaded");
    widget._animationListener?.call();
  

所以问题应该出现在这里，通过上面js代码可以看到triggerEvent执行所有的callback都是有参数args的，而我们定义的lottieLoaded是一个无参函数，所以问题应该在这里，如果去执行一个有参的lottieLoaded就一定会出现NoSuchMethod错误。

所以我们要给lottieLoaded加一个参数，这里随便添加一个即可，因为args没有明确是什么类型，在js中是弱类型的所以这个参数类型可以随意，我们使用String即可，如下：

  void lottieLoaded(String args) 
    print("loaded");
    widget._animationListener?.call();
  

关注公众号：BennuCTech，获取更多干货！