1. 程式人生 > 實用技巧 >微信小程式(五)

微信小程式(五)

本節主要簡單介紹微信小程式的生命週期,以及使用者行為的監聽

1.應用的生命週期

詳見生命週期

應用的生命週期在app.js的app()函式中進行配置

App({
  globalData:{
    globalTitle:"我是全域性標題"
  },
  onLaunch(options){
    console.log('小程式初始化完成時觸發,全域性只觸發一次。')
  },
  onShow(options){
    console.log('程式啟動,或從後臺進入前臺顯示時觸發')
  },
  onHide(){
    console.log('小程式從前臺進入後臺時觸發')
  },
  onError(){
    console.log()
  }
})

小程式啟動或者切換到前臺時,會有一個引數,這個引數包含啟動時的一些資訊,例如referrerInfo屬性可以知道啟動來源是其他app還是,其他小程式,或者是公眾號

2.頁面的生命週期

詳細配置Page構造器

屬性 型別 描述
onLoad Function 監聽頁面載入,觸發時機早於onShow和onReady
onReady Function 監聽頁面初次渲染完成
onShow Function 監聽頁面顯示,觸發事件早於onReady
onHide Function 監聽頁面隱藏
onUnload Function 監聽頁面解除安裝

3.監聽使用者行為

使用者瀏覽頁面時,可能會進行以下操作:
下拉重新整理,上拉到底,滾動,轉發分享頁面

微信小程式已經為此配置了相應的監聽,直接配置就可以為這個行為設定相應的邏輯

屬性 型別 描述
onPullDownRefresh Function 監聽使用者下拉動作
onReachBottom Function 頁面上拉觸底事件的處理函式
onShareAppMessage Function 使用者點選右上角轉發
onPageScroll Function 頁面滾動觸發事件的處理函式

當用戶觸發下拉重新整理事件時,會有一個載入樣式,此所以一旦請求的資料返回了,要使用wx.stopPullDownRefresh停止這個樣式

下拉觸底事件,可以在app.json的window選項中或頁面配置page.json中設定觸發距離onReachBottomDistance

監聽使用者滑動頁面事件,引數為 Object,包含 scrollTop 欄位,表示頁面在垂直方向已滾動的距離(單位px)

只有定義了onPageScroll事件處理函式,右上角選單才會顯示“轉發”按鈕,在使用者點選轉發按鈕的時候會呼叫