uniapp踩坑日记——life-follow组件的踩坑指南

最近测试反馈说在后台收到了大量的异常日志，让我处理一下，我根据错误的信息和最近改动的地方，很快就定位到疑似出现问题的地方，但是却怎么都无法复现

不慌不慌，用uni-app这么久，已经见过很多类似的小坑了，然后我就开始了漫长的爬坑之旅~ 特此记录一下~

应用场景

先说我的需求，非常之简单，就是用到支付宝的一个关注生活号的组件<life-follow />，在组件的回调事件onCheckFollow中拿到返回的event参数，根据event解构出是否关注的字段再做对应的逻辑处理，大概代码如下

// 组件    
<life-follow
  v-if="showLifeFollow"
  scene-id="XXX"
  :checkFollow="checkFollow"
  onCheckFollow="checkFollowCb"
  onClose="closeCb"
/>
    
 //js
checkFollowCb(e) {
      console.log('checkfloww', e)
      this.checkFollow = false;
      this.showLifeFollow = false;
      const { followed } = e.detail //!就是这里报错了！！！
      // 如果没有关注的话，展示组件  
      if (!followed) {
          console.log('unFollowed');
          this.showLifeFollow = true;
      }
  }

定位错误

报错的地方就是在上面解构e.detail的时候，但是我在本地跑却是没问题，可以正常获取follwed，后面灵机一动，我打开了打包后的代码，再用真机调试，好家伙， 终于发现问题了

看图，原来是e直接为undefined了。

开发的时候正常，打包后不正常，那看来问题出在打包过程中

那怎么办？要解决还得去看到底被打包成什么样子了，所以要去看看打包后的代码

虽然我看不懂打包后的源码，但是经过通对比法，还是发现了一点端倪

// life-follow打包后的事件代码
data-event-opts="{{[['^checkFollow',[['checkFollowCb']]],['^close',[['closeCb']]]]}}"
// 页面其他组件
data-event-opts="{{[['tap',[['scanCode',['$event']]]]]}}"

life-follow好像少了点什么，是吧，没有$event吧，我抱着试试看的心态手动把它补上去，变成这样

// 手动修改后代码  
data-event-opts="{{[['checkFollow',[['checkFollowCb',['$event']]]],['close',[['closeCb',['$event']]]]]}}"

然后重新运行，果然就可以了~

哈哈，但是事情并没有解决，不可能每次打完包都要来手动补上去吧，麻烦不说，万一有其他同学忘记了那不就完了，所以坑还得要填上。

填坑

最后的这个爬坑过程比较漫长，尝试了很多方式，比如把组件的写法换成小程序原生的方式（即把v-if换成a:if，变量绑定加上{{}})，或者直接把编译后的源码拿出来写上去等等各种操作都试过了。

最后不知道怎么突然想起来在vue里面是可以直接手动传$event参数的，然后抱着最后的一丝希望改了下

<life-follow
  v-if="showLifeFollow"
  scene-id="XXX"
  :checkFollow="checkFollow"
  onCheckFollow="checkFollowCb($event)"
  onClose="closeCb"
/>

终于没有辜负我，完美搞定了~

总结

• uni-app虽然很方便，解决了大的问题，但是毕竟不够成熟，有些可能是官方小程序刚出的功能，他还来不及适配，这时候就要注意了
• 多看文档，对文档要很熟悉，遇到问题可以想的起来文档上有对应的解决方案

好像没也啥好总结的~~