微信APP生命周期及頁面生命周期示例詳解

更新時間：2022年04月18日 17:17:10 作者：Jeff的技術(shù)棧

這篇文章主要為大家介紹了微信APP生命周期及頁面生命周期當然示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪

官方文檔

https://developers.weixin.qq.com/doc/search.html?query=生命周期&doc_type=miniprogram&jumpbackUrl=%2Fdoc%2F

小程序的啟動流程

我們畫一個圖來表示一下，整個小程序的啟動流程，我們就知道了：

app生命周期

執(zhí)行App()函數(shù)也就是注冊一個App

1 在注冊app的時候，可以判斷小程序的進入場景

2 我們可以在執(zhí)行通過生命周期函數(shù)，做一些數(shù)據(jù)請求

3 可以在app中設(shè)置一個全局對象，讓所有頁面都能使用

頁面的生命周期

Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    console.log("onload")
  },

  /**
 * 生命周期函數(shù)--監(jiān)聽頁面顯示
 */
  onShow: function () {
    console.log("onshow")
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {
    console.log("onReady")
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {
    console.log("onHide")
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () {
    console.log("onUnload")
  },
  //監(jiān)聽用戶下拉動作，
  onPullDownRefresh :function(){
    //如果要用到這個，必須把"enablePullDownRefresh": true
    console.log("下拉刷下")
  }, 
  //頁面上拉觸底事件的處理函數(shù)
  onReachBottom:function(){
    console.log("上拉到底部")
},
//頁面滾動觸發(fā)事件的處理函數(shù)
onPageScroll:   function(e){
  console.log("滾輪在懂",e)
} 
})

1 在生命周期函數(shù)中發(fā)送網(wǎng)絡(luò)請求，從服務(wù)端獲取數(shù)據(jù)

2 初始化一些數(shù)據(jù)，在data里面，以方便wxml引用

3 監(jiān)聽wxml的事件，綁定對應(yīng)的事件函數(shù)

4 還有頁面滾動，上拉，下拉等