小程式中生命週期的解析（附程式碼）

這篇文章帶給大家的內容是關於小程式中生命週期的解析（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

首先,我們來思考:當我們點擊螢幕或做滑動螢幕的類似的觸發事件時,介面為什麼會做出相應的變化呢?

#原因是:  整個小程式應用有2個執行緒.

• 一個執行緒做視圖渲染.

• 一個執行緒做邏輯處理.
  這樣你差不多應該清楚了: wxml和wxss檔主要做視圖展示,而js檔主要是做響應事件的邏輯處理,分工明確!

其次,我們再來分析:我們使用小程式會發現有很多的頁面,那麼誰來管理這些頁面呢?頁面和整個程式之間又是個什麼樣兒的關係呢?

• [x ] 一個app,有app和pages構成,有著不同的生命週期

• app
  一個程式啟動後,執行onLaunch—>onShow

#

App({
  onLaunch: function () {
  },
  onShow: function (options) {
  },
  onHide: function () {
  },
  onError: function (msg) {
  }
})

• pages
  一個程式啟動後,執行onLaunch—>onShow後,接著載入首頁;載入首頁onLoad—>onShow—>onReady

Page({
  data: {
  },
  onLoad: function (options) {
  },
  onReady: function () {
  },
  onShow: function () {
  },
  onHide: function () {
  },
  onUnload: function () {
  },
  onPullDownRefresh: function () {
  },
  onReachBottom: function () { 
  },
  onShareAppMessage: function () {
  }
})

此時,你已經看到了渲染好的首頁了!

如果此時,你想看下你的帥帥的或者美美的自拍照,按下了Home鍵或者點擊了右上角的退出小圓圈,此時小程式發生了什麼?
 - 首頁載入 onLaunch—>onShow—>onLoad—>onShow—>onReady  載入完成
 - 執行退出,小程式其實是執行了onHide(page的onHide)—>onHide(app的onHide)
如果你欣賞完自拍照後,你又想起了剛才的小程式,又感興趣想瞅瞅,咋辦呢?打開唄!打開之後,想想小程式會做什麼呢?難道重新加載麼?
 - NO NO NO!如果你的自拍欣賞時間不是很長,或者內存十分足夠小程序呆一會的話,小程序只需要被喚醒一下就好嘍!^.^
#  - onLaunch—>onShow—>onLoad—>onShow—>onReady—>onHide(page)—>onHide(app)這是剛才加載好首頁,又退出後的生命線,此時如果你又進來了,那麼程式將會這樣走:onShow(app)—>onShow(page)

這個時候,對於一個頁面的基本載入,應該沒啥問題了吧

#沒啥問題,咱就直接上進階乾貨了

1. 開新的頁面[新頁入堆疊]

• #原來頁面:onHide

• 新的頁面:onLoad—>onShow—>onReady

頁面重定向[原始頁面出棧,新頁面入棧]

• 原來頁:onUnload

• 新的頁面:onLoad—>onShow—> ;onReady

頁面返回[新頁面出棧,顯示原始頁面]

• 新的頁面:onUnload

• 原來頁面:onShow

#Tab切換

• 新的頁面:onHide

• 原本頁: 情境1(已載入):onShow   情境2(未載入):onLoad—>onShow—>onReady

##相關推薦：

小程式實作自動載入的完整程式碼

#微信小程式實例：如何實作跑馬燈的動畫效果（附程式碼）######

以上是小程式中生命週期的解析（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！