在學習和使用小程序的過程中遇到了一個坑,情況是這樣的。
首先有個小程序頁面 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 試了一下,就成功了!!!糾結了好一會兒,作為初學者還真的是有點摸不着頭腦,所以記錄一下,以備查詢。