微信小程序頁面棧

微信小程序頁面棧

今天學到微信小程序的頁面棧這一節，發現一個很有意思的事情。
那就是getCurrentPages()這個方法

getCurrentPages() 函數用於獲取當前頁面棧的實例，以數組形式按棧的順序給出，第一個元素爲首頁，最後一個元素爲當前頁面。

我試了試建了兩個頁面，一個test 一個index頁面。
test頁面，做一個按鈕點擊跳轉index頁面，那樣就生成了兩個數據的頁面棧。

<text>{{changeText}}</text>
<view bindtap='changeUrl'>跳轉頁面</view>

Page({
  data: {
    changeText: '看看首頁能修改不'
  },
  changeUrl () {
    wx.navigateTo({
      url: '/pages/index/index'
    })
  }
})

index頁面，點擊按鈕獲取頁面棧，通過setData修改test頁面的數據。

<text>{{changeText}}</text>
<view bindtap='changePrevData'>修改前一個路由的數據</view>

Pages({
...
changePrevData: function () {
    let pages = getCurrentPages()
    console.log(pages[pages.length-2]) // 輸出包含test路徑的Object
    console.log("開始修改")
    pages[pages.length - 2].setData({
      changeText: '我在首頁修改'
    })
    console.log("修改完成！")
    wx.navigateBack()
}
 ...
})

這個方法實測是可以的，當然，我們同樣可以調用test頁面的方法。如下：我們在test頁面page下新增一個修改文案的方法changeText

  changeText () {
    this.setData({
      changeText: '我是當前頁面的方法修改的'
    })
  }

在index文件中調用，同樣返回到原頁面，頁面數據被修改。

    pages[pages.length - 2].changeText()

當然細心的同學肯定已經注意到了我前面wx.navigateTo()這個方法。這是因爲打開新頁面，但是保留當前頁面，這就有了頁面棧
wx.redirectTo()這個是銷燬當前頁面，跳轉新頁面，那樣就沒有這個頁面棧，所以用不了這個。