新聞列表基本完成,但是實際開發中,頁面上的數據通常不是直接寫到wxml文件中,而是通過網絡請求獲取服務器中的數據,再將要顯示的數據綁定到wxml文件中,最后進行渲染。實現這一過程需要學習頁面的生命周期、數據是如何綁定以及數據是如何進行傳遞到wxml文件中。
微信小程序的文檔中對page的定義如下:
Page() 函數用來注冊一個頁面。接受一個 object 參數,其指定頁面的初始數據、生命周期函數、事件處理函數等。
從定義中可以知道,Page()函數相當于小程序的邏輯層的功能。獲取服務器中數據以及對數據進行處理和顯示都是寫在Page()函數中。在ide中默認的page生成的格式如下:
Page({ data:{ String1 }, onLoad:function(options){ // 生命周期函數--監聽頁面加載 String2 }, onReady:function(){ // 生命周期函數--監聽頁面初次渲染完成 String3 }, onShow:function(){ // 生命周期函數--監聽頁面顯示 String4 }, onHide:function(){ // 生命周期函數--監聽頁面隱藏 String5 }, onUnload:function(){ // 生命周期函數--監聽頁面卸載 String6 }, onPullDownRefresh: function() { // 頁面相關事件處理函數--監聽用戶下拉動作 String7 }, onReachBottom: function() { // 頁面上拉觸底事件的處理函數 String8 }, onShareAppMessage: function() { // 用戶點擊右上角分享 return { title: 'title', // 分享標題 desc: 'desc', // 分享描述 path: 'path' // 分享路徑 } }})為了測試顯示一個新聞頁面的生命周期,修改每個函數里面的內容并打斷點,進行調試,修改函數的內容如下:
Page({ data:{ }, onLoad:function(options){ // 生命周期函數--監聽頁面加載 console.log("onLoad"); }, onReady:function(){ // 生命周期函數--監聽頁面初次渲染完成 console.log("onReady"); }, onShow:function(){ // 生命周期函數--監聽頁面顯示 console.log("onShow"); }, onHide:function(){ // 生命周期函數--監聽頁面隱藏 console.log("onHide"); }, onUnload:function(){ // 生命周期函數--監聽頁面卸載 console.log("onUnload"); }, onPullDownRefresh: function() { // 頁面相關事件處理函數--監聽用戶下拉動作 console.log("nPullDownRefresh"); }, onReachBottom: function() { // 頁面上拉觸底事件的處理函數 console.log("onReachBottom"); }, onShareAppMessage: function() { // 用戶點擊右上角分享 return { title: 'title', // 分享標題 desc: 'desc', // 分享描述 path: 'path' // 分享路徑 } }})調試頁面的生命周期分為6個步驟:
打開小程序集成開發環境的調試功能;選擇Sources選項;選擇pages下面的post.js[sm]文件;對需要調試的地方設置斷點;進行斷點調試;對斷點分步調試。


你不需要立馬完全弄明白,不過以后它會有幫助。
意思是用的時候有疑惑可以回過頭看看參考。平時經常用到的其實并不是上面的全部。
Page()很好的囊括了一個頁面的生命周期,類似與Android中Activity的生命周期,學過Android四大組件之一Activity的生命周期就很容易理解,生命周期不同階段其實就是對應的一個監聽函數,當滿足這個監聽函數觸發條件時候就會執行監聽函數的函數體,學習Page的生命周期為后面數據的綁定打好基礎。
新聞熱點
疑難解答