最近测试反馈说在后台收到了大量的异常日志,让我处理一下,我根据错误的信息和最近改动的地方,很快就定位到疑似出现问题的地方,但是却怎么都无法复现
不慌不慌,用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虽然很方便,解决了大的问题,但是毕竟不够成熟,有些可能是官方小程序刚出的功能,他还来不及适配,这时候就要注意了
- 多看文档,对文档要很熟悉,遇到问题可以想的起来文档上有对应的解决方案
好像没也啥好总结的~~