小程式 - 設定上一層頁面資料 & 監聽頁面滑動返回上一頁
設定上一層頁面資料
在某些場景下,我們需要在A頁面進行表單的簡單編輯,然後跳轉(wx.navigateTo)進入B頁面,進行詳細的表單編輯;在B頁面完成編輯後,返回A頁面,將所有資料進行提交。
這裡需要關注的是,B頁面返回A頁面中,需要攜帶當前頁面的資料,便於在A頁面中使用。
攜帶引數進入另一個頁面,通常我們會使用以下的操作方式
wx.navigateTo({
url: '../pageB/pageB?id=1' ,
})
但是這種表單填寫的場景裡,B頁面返回A頁面使用wx.navigateTo()方法,A頁面原本填寫的資訊不會儲存,只有使用wx.navigateBack()返回A頁,A頁面原本填寫的資訊才不會消失。
我最開始沒有發現getCurrentPages()方法時,使用的是wx.setStorage()將B頁面的資料快取在本地,再從A頁面中取出來,顯然,這不是一種科學的解決辦法。
後來在網上了解了getCurrentPages()方法,但是沒有搜尋到官方的文件介紹(如果你在官方文件看到過,請在回覆中回覆我連結,謝謝啦)
為了方便在多個頁面中使用,我進行了簡單的封裝,app.js中主要程式碼如下:
// 獲取上一層的頁面 getPrevPage () { let pages = getCurrentPages(); let prevPage = pages[pages.length - 2]; // pages[pages.length - 1] 當前頁面 return prevPage; // pages[pages.length - 2] 上一層頁面 },
在B頁面中的.js檔案中,呼叫getPrevPage()方法:
let prevPage = getApp().getPrevPage(); // 獲取上一層頁面A
// 在A頁面中賦值
prevPage.setData({
id: 1
});
這樣就完成了為上一層頁面的賦值,在某些情況下,還可以為上上層頁面賦值。
getCurrentPages()方法還可以獲取當前頁面URL中攜帶的引數,我進行了簡單的封裝,app.js主要程式碼如下:
// 獲取 url 中攜帶的引數 getParamsFromUrl () { let pages = getCurrentPages(); let params = pages[pages.length - 1]['options']; // 通過options物件,獲取url中攜帶的引數 return params; },
例如,A頁面通過wx.navigateTo跳轉至B頁面,其中 url: '../pageB/pageB?id=1',在B頁面中獲取引數id的值,程式碼如下
let id = getApp().getParamsFromUrl()['id'];
拓展:url中不僅僅能攜帶id這樣簡單引數,還可以傳遞複雜的json物件,只需要將json物件通過JSON.stringify()序列化成字串,在放到url中;同理,在獲取這個json物件字串後,需要使用JSON.parse()進行反序列化。
監聽頁面滑動返回上一頁
微信小程式,在螢幕左邊緣進行右滑,程式會返回上一頁。某些場景下,我們需要監聽這一行為,完成某些操作。可以使用微信官方提供的方法onUnload()。
在每個新建的Page資料夾中的.js都有onUnload()方法
當頁面返回,控制檯列印如下: