微信小程序Taro開發(fā)(2)：生命周期及開發(fā)中注意點

morgan 發(fā)布于2019-08-23 14:09 / 2435人閱讀

摘要：入口文件繼承自組件基類，它同樣擁有組件生命周期，但因為入口文件的特殊性，他的生命周期并不完整，如。支持組件化開發(fā)，組件代碼可以放在任意位置，不過建議放在下的目錄中。

生命周期 componentWillMount

在微信小程序中這一生命周期方法對應(yīng)頁面的onLoad或入口文件app中的onLaunch

componentDidMount

在微信小程序中這一生命周期方法對應(yīng)頁面的onReady或入口文件app中的onLaunch，在 componentWillMount后執(zhí)行

componentDidShow

在微信小程序中這一生命周期方法對應(yīng) onShow

componentDidHide

在微信小程序中這一生命周期方法對應(yīng) onHide

componentDidCatchError

錯誤監(jiān)聽函數(shù)，在微信小程序中這一生命周期方法對應(yīng) onError

componentDidNotFound

頁面不存在監(jiān)聽函數(shù)，在微信小程序中這一生命周期方法對應(yīng) onPageNotFound

shouldComponentUpdate

頁面是否需要更新

componentWillUpdate

頁面即將更新

componentDidUpdate

頁面更新完畢

componentWillUnmount

頁面退出，在微信小程序中這一生命周期方法對應(yīng) onUnload

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

1. onPullDownRefresh： 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作

2. onReachBottom： 頁面上拉觸底事件的處理函數(shù)

3. onShareAppMessage： 用戶點擊右上角轉(zhuǎn)發(fā)

4. onPageScroll： 頁面滾動觸發(fā)事件的處理函數(shù)

5. onTabItemTap： 當前是 tab 頁時，點擊 tab 時觸發(fā)

6. componentWillPreload： 預(yù)加載，只在微信小程序中可用

注意

1.通常入口文件會包含一個 config 配置項，這里的配置主要參考微信小程序的全局配置而來，在編譯成小程序時，這一部分配置將會被抽離成 app.json，而編譯成其他端，亦會有其他作用。

2.入口文件繼承自 Component 組件基類，它同樣擁有組件生命周期，但因為入口文件的特殊性，他的生命周期并不完整，如：componentWillMount、componentDidMount、componentDidShow、componentDidHide、componentDidCatchError、componentDidNotFound。

3.入口文件需要包含一個 render 方法，一般返回程序的第一個頁面，但值得注意的是不要在入口文件中的 render 方法里寫邏輯及引用其他頁面、組件，因為編譯時 render 方法的內(nèi)容會被直接替換掉，你的邏輯代碼不會起作用。

4.Taro 支持組件化開發(fā)，組件代碼可以放在任意位置，不過建議放在 src 下的 components 目錄中。一個組件通常包含組件 JS 文件以及組件樣式文件，組織方式與頁面類似。

taro項目目錄如下:

├── config                 配置目錄
|   ├── dev.js             開發(fā)時配置
|   ├── index.js           默認配置
|   └── prod.js            打包時配置
├── src                    源碼目錄
|   ├── components         公共組件目錄
|   ├── pages              頁面文件目錄
|   |   ├── index          index 頁面目錄
|   |   |   ├── banner     頁面 index 私有組件
|   |   |   ├── index.js   index 頁面邏輯
|   |   |   └── index.css  index 頁面樣式
|   ├── utils              公共方法庫
|   ├── app.css            項目總通用樣式
|   └── app.js             項目入口文件
└── package.json