微信小程序页面栈

微信小程序页面栈

今天学到微信小程序的页面栈这一节，发现一个很有意思的事情。
那就是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()这个是销毁当前页面，跳转新页面，那样就没有这个页面栈，所以用不了这个。