微信小程序之頁面文件介紹

微信小程序的頁面註冊是利用Page(Object) 函數用來註冊一個頁面。接受一個 Object 類型參數,其指定頁面的初始數據、生命週期回調、事件處理函數等。參數說明如下:

微信小程序之頁面文件介紹

初始數據

data 是頁面第一次渲染使用的初始數據。頁面加載時,data 將會以JSON字符串的形式由邏輯層傳至渲染層,因此data中的數據必須是可以轉成JSON的類型:字符串,數字,布爾值,對象,數組。

實例如下:

微信小程序之頁面文件介紹

data就是存放初始化數據的地方,這裡大家要注意就是不要什麼數據都放這裡,畢竟這裡數據越多對於程序加載是有影響的。

生命週期回調函數

onLoad(Object query)

頁面加載時觸發。一個頁面只會調用一次,可以在 onLoad 的參數中獲取打開當前頁面路徑中的參數。

實例如下:

微信小程序之頁面文件介紹

如果需要對頁面進行傳遞參數就在這個函數中獲取傳遞過來的參數。同時對於網絡請求的數據也可以放在這裡,然後將獲取到的數據保存到data中。

onShow()

頁面顯示/切入前臺時觸發。如果頁面顯示和隱藏時需要對數據進行相應的更新的話就需要在這裡調用數據刷新的方法。

onReady()

頁面初次渲染完成時觸發。一個頁面只會調用一次,代表頁面已經準備妥當,可以和視圖層進行交互。

注意:對界面內容進行設置的 API 如wx.setNavigationBarTitle,請在onReady之後進行。

onHide()

頁面隱藏/切入後臺時觸發。 如 navigateTo 或底部 tab 切換到其他頁面,小程序切入後臺等。

onUnload()

頁面卸載時觸發。如redirectTo或navigateBack到其他頁面時。

頁面事件處理函數

onPullDownRefresh()

監聽用戶下拉刷新事件。

需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh。

可以通過wx.startPullDownRefresh觸發下拉刷新,調用後觸發下拉刷新動畫,效果與用戶手動下拉刷新一致。

當處理完數據刷新後,wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。

實例如下:

微信小程序之頁面文件介紹

上面是一個簡單的下拉刷新。記得當數據刷新完成後關閉下拉刷新。這裡也可以將最後一句添加到數據更新完成的地方如:

微信小程序之頁面文件介紹

onReachBottom()

監聽用戶上拉觸底事件。

可以在app.json的window選項中或頁面配置中設置觸發距離onReachBottomDistance。

在觸發距離內滑動期間,本事件只會被觸發一次。

實例如下:

微信小程序之頁面文件介紹

上面就是一個簡單的觸底加載更多的例子。

onPageScroll(Object)

監聽用戶滑動頁面事件。這個事件時後面添加的,剛開始沒有,多用於製作返回頂部的功能。

微信小程序之頁面文件介紹

onShareAppMessage(Object)

監聽用戶點擊頁面內轉發按鈕(<button> 組件 open-type="share")或右上角菜單"轉發"按鈕的行為,並自定義轉發內容。/<button>

注意:只有定義了此事件處理函數,右上角菜單才會顯示"轉發"按鈕

參數說明和自定義內容:

微信小程序之頁面文件介紹

之前分享功能是可以知道分享是否成功的,現在由於微信調整了所有的分享,所以具體分享成沒成功是沒有回調了,所以這個功能現在就是一個推廣了。

微信小程序之頁面文件介紹

自定義分享如果默認沒有設置圖片則是截取當前頁面一部分。

onTabItemTap(Object)

點擊 tab 時觸發

微信小程序之頁面文件介紹

組件事件處理函數

Page 中還可以定義組件事件處理函數。在渲染層的組件中加入事件綁定,當事件被觸發時,就會執行 Page 中定義的事件處理函數。

微信小程序之頁面文件介紹

Page.route

到當前頁面的路徑,類型為String。獲取當前頁面路由如下:

微信小程序之頁面文件介紹

setData

setData 函數用於將數據從邏輯層發送到視圖層(異步),同時改變對應的 this.data 的值(同步)。

微信小程序之頁面文件介紹

就是將數據的修改添加到data中,然後視圖就會更新數據,例子:

微信小程序之頁面文件介紹

生命週期

以下內容你不需要立馬完全弄明白,不過以後它會有幫助。

下圖說明了 Page 實例的生命週期。

微信小程序之頁面文件介紹


分享到:


相關文章: