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

生命周期

componentWillMount

在微信小程式中這一生命周期方法對應頁面的onLoad或入口檔案app中的onLaunch

componentDidMount

在微信小程式中這一生命周期方法對應頁面的onReady或入口檔案app中的onLaunch，在 componentWillMount後執行

componentDidShow

在微信小程式中這一生命周期方法對應 onShow

componentDidHide

在微信小程式中這一生命周期方法對應 onHide

componentDidCatchError

錯誤監聽函數，在微信小程式中這一生命周期方法對應 onError

componentDidNotFound

頁面不存在監聽函數，在微信小程式中這一生命周期方法對應 onPageNotFound

shouldComponentUpdate

頁面是否需要更新

componentWillUpdate

頁面即将更新

componentDidUpdate

頁面更新完畢

componentWillUnmount

頁面退出，在微信小程式中這一生命周期方法對應 onUnload

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

1. onPullDownRefresh： 頁面相關事件處理函數–監聽使用者下拉動作

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

3. onShareAppMessage： 使用者點選右上角轉發

4. onPageScroll： 頁面滾動觸發事件的處理函數

5. onTabItemTap： 目前是 tab 頁時，點選 tab 時觸發

6. componentWillPreload： 預加載，隻在微信小程式中可用

注意

1.通常入口檔案會包含一個 config 配置項，這裡的配置主要參考微信小程式的全局配置而來，在編譯成小程式時，這一部配置設定置将會被抽離成 app.json，而編譯成其他端，亦會有其他作用。

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

3.入口檔案需要包含一個 render 方法，一般傳回程式的第一個頁面，但值得注意的是不要在入口檔案中的 render 方法裡寫邏輯及引用其他頁面、元件，因為編譯時 render 方法的内容會被直接替換掉，你的邏輯代碼不會起作用。

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

taro項目目錄如下:

├── config                 配置目錄
|   ├── dev.js             開發時配置
|   ├── index.js           預設配置
|   └── prod.js            打包時配置
├── src                    源碼目錄
|   ├── components         公共元件目錄
|   ├── pages              頁面檔案目錄
|   |   ├── index          index 頁面目錄
|   |   |   ├── banner     頁面 index 私有元件
|   |   |   ├── index.js   index 頁面邏輯
|   |   |   └── index.css  index 頁面樣式
|   ├── utils              公共方法庫
|   ├── app.css            項目總通用樣式
|   └── app.js             項目入口檔案
└── package.json