微信小程式(五)
阿新 • • 發佈:2020-11-29
本節主要簡單介紹微信小程式的生命週期,以及使用者行為的監聽
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事件處理函式,右上角選單才會顯示“轉發”按鈕,在使用者點選轉發按鈕的時候會呼叫