微信小程序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