taro 項目、代碼說明


入口文件的生命周期:

入口文件繼承自 Component 組件基類,它同樣擁有組件生命周期,但因為入口文件的特殊性,他的生命周期並不完整,如下

生命周期方法 作用 說明
componentWillMount 程序被載入 在微信小程序中這一生命周期方法對應 app 的 onLaunch
componentDidMount 程序被載入 在微信小程序中這一生命周期方法對應 app 的 onLaunch,在 componentWillMount 后執行
componentDidShow 程序展示出來 在微信小程序中這一生命周期方法對應 onShow,在 H5 中同樣實現
componentDidHide 程序被隱藏 在微信小程序中這一生命周期方法對應 onHide,在 H5 中同樣實現
componentDidCatchError 錯誤監聽函數 在微信小程序中這一生命周期方法對應 onError
componentDidNotFound 頁面不存在監聽函數 在微信小程序中這一生命周期方法對應 onPageNotFound

微信小程序中 onLaunch 通常帶有一個參數 options,在 Taro 中你可以在所有生命周期和普通事件方法中通過 this.$router.params 訪問到,在其他端也適用

頁面 JS 的生命周期:

頁面 JS 也繼承自 Component 組件基類,所以頁面同樣擁有生命周期,頁面的生命周期方法如下:

生命周期方法 作用 說明
componentWillMount 頁面被載入 在微信小程序中這一生命周期方法對應 onLoad
componentDidMount 頁面渲染完成 在微信小程序中這一生命周期方法對應 onReady
shouldComponentUpdate 頁面是否需要更新
componentWillUpdate 頁面即將更新
componentDidUpdate 頁面更新完畢
componentWillUnmount 頁面退出 在微信小程序中這一生命周期方法對應 onUnload
componentDidShow 頁面展示出來 在微信小程序中這一生命周期方法對應 onShow,在 H5 中同樣實現
componentDidHide 頁面被隱藏 在微信小程序中這一生命周期方法對應 onHide,在 H5 中同樣實現

微信小程序中 onLoad 通常帶有一個參數 options,在 Taro 中你可以在所有生命周期和普通事件方法中通過 this.$router.params 訪問到,在其他端也適用

在小程序中,頁面還有在一些專屬的方法成員,如下:

方法 作用
onPullDownRefresh 頁面相關事件處理函數--監聽用戶下拉動作
onReachBottom 頁面上拉觸底事件的處理函數
onShareAppMessage 用戶點擊右上角轉發
onPageScroll 頁面滾動觸發事件的處理函數
onTabItemTap 當前是 tab 頁時,點擊 tab 時觸發
componentWillPreload 預加載,只在微信小程序中可用

以上成員方法在 Taro 的頁面中同樣可以使用,書寫同名方法即可,不過需要注意的,目前暫時只有微信小程序端支持這些方法,編譯到 H5 端后這些方法均會失效。

組件

Taro 的組件同樣是繼承自 Component 組件基類,與頁面類似,組件也必須包含一個 render 函數,返回 JSX 代碼。
與頁面相比,組件沒有自己的 config,同時組件的生命周期相比頁面來說多了一個 componentWillReceiveProps ,表示當父組件(或頁面)發生更新,帶動子組件進行更新時調用的方法。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM