01.17 利用getCurrentPagesAPI對小程序進行性能優化

最近在開發一個商城小程序,其中在編寫商品結算的時候需要實現一個小需求:

點擊收貨地址進入收貨地址列表頁更換收貨地址;這是一個很常見的功能。但是從用戶體驗方面考慮,我想實現的是用戶在小程序的收貨地址列表頁中選擇完收貨地址之後,就可以把數據直接賦值給小程序的上級結算頁面,這樣就可以實現頁面無加載。提高用戶在小程序中的體驗!

小程序性能優化之後效果的圖展示:

利用getCurrentPagesAPI對小程序進行性能優化

這個功能主要是運用小程序的getCurrentPagesAPI進行跨頁面賦值實現的,下面就開始介紹小程序的getCurrentPagesAPI!

什麼是 getCurrentPages

小程序的getCurrentPagesAPI用於獲取頁面棧的實例列表,以數組的形式按棧的順序給出,返回的數組中的第一個元素為小程序首頁的頁面棧實例,最後一個元素為小程序當前頁面當前頁面的頁面棧實例。

利用getCurrentPagesAPI對小程序進行性能優化

注意事項:

1、不要嘗試修改頁面棧,會導致路由以及頁面狀態錯誤。

2、不要在小程序App.onLaunch的時候調用 getCurrentPages(),因為此時頁面還沒有生成。

getCurrentPagesAPI用處

一般我們可以用 getCurrentPages()[getCurrentPages().length - 1] 來獲取小程序當前頁面棧的實例。

小程序中的每一個頁面棧的實例都保存著對應頁面上的屬性以及方法。拿到頁面棧我們就可以獲取到對應頁面上的屬性及方法,做到跨頁面賦值、跨頁面調用函數API。

利用getCurrentPagesAPI對小程序進行性能優化

其中我們可以利用頁面棧的route, options屬性實現一個推廣常見小需求;需求分析:假設我們的小程序是一個需要註冊才可以使用的小程序。a 將 小程序的某個頁面推廣給 b ,b 打開小程序由於沒有註冊會自動跳轉到小程序的註冊頁,待 b 註冊成功之後我們可以通過獲取 a 推廣給 b 的頁面的頁面棧實現返回之前小程序的推廣頁面!

利用getCurrentPagesAPI對小程序進行性能優化

使用 getCurrentPagesAPI來實現修改收貨地址無延遲

現在開始講解文章開頭提到的使用小程序的getCurrentPagesAPI來實現流暢修改收貨地址這個小功能!

其實這一塊主要包含兩個方面:

第一個是當用戶沒有任何收貨地址時,我們不應該跳轉到小程序的收貨地址列表頁(因為收貨地址列表為空),而是應該跳轉到小程序的添加收貨地址頁面。然後再用戶成功添加收貨地址之後根據小程序的上級頁面棧是否為結算頁面來做出相應的處理。此處我的處理為將剛添加的收貨地址信息賦值給上級結算頁面棧中的收貨地址詳情,然後通過小程序的路由跳轉API來返回上級頁面。

利用getCurrentPagesAPI對小程序進行性能優化

第二種就是在用戶有多個收貨地址之後,在小程序的收貨地址列表頁中選擇更換收貨地址,這種實現起來也很簡單,就是當用戶點擊某個收貨地址之後,我們拿到對應的收貨地址詳情,然後再獲取結算頁面棧的收貨地址屬性,之後將用戶在點擊頁面拿到的收貨地址詳情數據賦值給結算頁面的收貨地址詳情。

利用getCurrentPagesAPI對小程序進行性能優化

總結

getCurrentPages這個API還是挺好用的,總結一個,大致在這幾個業務場景需要使用getCurrentPagesAPI。

1、需要獲取小程序頁面棧的長度。

2、需要實現跨頁面賦值。

3、頁面跳轉之後需要再次執行生命週期onLoad()方法等。

4、需要獲取小程序當前頁面棧或其它頁面棧數據。


分享到:


相關文章: