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

hope93發表於2019-02-16
微信小程式

生命週期

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

相關文章