微信小程序的生命周期的詳解

發(fā)布時間：2020-10-01 16:52:02 來源：腳本之家閱讀：193 作者：Crab0314 欄目：web開發(fā)

今天記錄一下微信小程序的app生命周期及各頁面的生命周期。

（一）小程序的生命周期

在app.json中進行監(jiān)聽，三個方法

①onLauch方法只在小程序啟動時觸發(fā)一次。

②onShow方法，在小程序啟動時，及由后臺切換至前臺顯示時觸發(fā)。

③onHide方法，在小程序由前臺顯示切換至后臺時觸發(fā)。

可以通過 ↓ 這張圖片，感受一下各生命周期。

微信小程序的生命周期的詳解

比較有趣的地方是，小程序啟動時會觸發(fā)兩次onShow，我不知道是為什么。希望了解的同學(xué)解釋一下。

（二）頁面的生命周期

1.在index中我添加了兩種方式跳轉(zhuǎn)到新增的crab頁面 ↓ 在這里簡單介紹一下

①在index.wxml文件中通過在<navigator>標(biāo)簽中添加url實現(xiàn)跳轉(zhuǎn)

②將button綁定到index.js中的方法實現(xiàn)跳轉(zhuǎn)，此處我將方法命名為turnCrabFunction,并在index.js中實現(xiàn)該方法。

微信小程序的生命周期的詳解

2.下面介紹crab.js中的各生命周期

↓圖為該文件部分代碼，使用console.log進行打印，方便我們進行觀察各生命周期。（各函數(shù)后面注釋對應(yīng)功能說明。）

微信小程序的生命周期的詳解

其中，onSomeFunction是我隨意命名的，其他方法均有固定名字及含義。

3.在index界面，我們選擇任意一種方式進入crab界面。↓圖進行詳細說明

微信小程序的生命周期的詳解

（如果無法實現(xiàn)下拉刷新，請檢查app.json中window參數(shù)，或檢查當(dāng)前頁面的crab.json文件是否覆蓋該參數(shù)為false）

微信小程序的生命周期的詳解

如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

向AI問一下細節(jié)

猜你喜歡