在学习和使用小程序的过程中遇到了一个坑,情况是这样的。
首先有个小程序页面 PageA,在 PageA 里使用一个组件 componentA ,这个组件的作用是推荐信息,类似于一个文本卡片的功能,推荐组件中有一个按钮,可以点击切换下一条,总共最多切换十条。组件 componentA 中需要一个数组属性 dataList ,然后就是组件内部实现了。
组件内部实现就是,维护了一个当前展示信息的对象 showData 和 一个当前展示数据下标 showIndex,当点击切换下一个的时候,会进行 showIndex++,然后我用了组件的 observers 属性来进行监听 showIndex ,当 showIndex 改变的时候,就从 dataList 中取对应下标的数据赋值给 showData 。
问题来了,初始的 showData 为空对象,当组件拿到dataList的时候肯定得进行初始赋值,其次是每次点击下一个切换 showIndex 的时候也会改变 dataList 。于是我就把 showIndex 的初始值赋值为 -1, 在小程序生命周期 lifetimes 里,使用 attached 生命周期,当时想的是组件进行到 attached 生命周期时一切的数据准备肯定都已经好了。于是就在 attched 生命周期中将 showIndex 赋予了初值 0,在 observes 里监听 showIndex 变化,当 dataList[showIndex] 存在时,就赋值最新的的值给 showData,若 dataList[showIndex] 不存在时就将表示数据已经展示完了,就把卡片隐藏。
看到这里是不是一切都没有问题?
但是问题来了,在初次加载的时候,推荐卡片组件消失不见了,并且也不出来。
然后就打断点开始排查,结果发现在 observes 里,首次触发 showIndex 监听时,showIndex 为 0 ,但是 dataList 为空数组!!
这是为什么呢?? 我是在 attched 生命周期里才赋值 showIndex 的,这时 dataList 按理来说应该是接收好了,怎么会是空数组呢?
于是我就查阅微信小程序公众文档里的组件生命周期里找到答案。
原来小程序的生命周期不仅仅是有 小程序指南 里的那三种基础生命周期(attached、moved、detached),还有 created、ready 和 error等三种,共计六种生命周期。
于是我试着将 attached 生命周期改为了 ready 试了一下,就成功了!!!纠结了好一会儿,作为初学者还真的是有点摸不着头脑,所以记录一下,以备查询。