1. 程式人生 > >小程式 - 設定上一層頁面資料 & 監聽頁面滑動返回上一頁

小程式 - 設定上一層頁面資料 & 監聽頁面滑動返回上一頁

設定上一層頁面資料

在某些場景下,我們需要在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()方法

當頁面返回,控制檯列印如下: