写在前面

本篇文章是微信小程序开发入门的第十四篇，介绍小程序云开发之小程序页面堆栈

什么是小程序页面堆栈

打开小程序官方文档-路由，我们可以看到小程序共提供了5种跳转方法：

wx.switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.reLaunch：关闭所有页面，打开到应用内的某个页面

wx.redirectTo：关闭当前页面，跳转到应用内的某个页面

wx.navigateTo：保留当前页面，跳转到应用内的某个页面

wx.navigateBack：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

我们把页面堆栈看成一个数组，通过上面5种跳转方法的描述，我们可以知道，只有wx.navigateTo会往页面堆栈中插入页面，而wx.navigateBack会将页面返回到页面堆栈中的某个页面，此时页面堆栈的长度没有变化，如果后续再使用wx.navigateTo跳转就会替换掉页面堆栈中我们刚刚返回的页面后面的页面，这句话有点绕，我下面以我们的项目举例：

我们的项目的页面跳转：index页面 -> detail页面 -> edit页面

我们从index页面使用wx.navigateTo跳转detail页面再使用detail页面跳转到edit页面，页面堆栈=[“index页面的实例”, “detail页面的实例”, “edit页面的实例”]

再从edit页面wx.navigateBack，页面堆栈还是上面的页面堆栈，但是我们的页面现在在页面堆栈的第二个实例（detail页面的实例）中，此时我们再wx.navigateTo跳转到edit页面，此时的页面堆栈=[“index页面的实例”, “detail页面的实例”, “第二次跳转的edit页面的实例”]

解决上篇文章遗留问题

首先修改miniprogram\pages\fruit-edit\fruit-edit.js文件的代码，修改内容如下，先获取页面堆栈，然后获取上一页的实例，然后调用上一页获取详情的方法，再跳转到上一页：

...
      if (success) {
        // wx.redirectTo({
        //   url: `/pages/fruit-detail/fruit-detail?id=${this.data.id}`,
        // })
        let pages = getCurrentPages() // 获取页面堆栈
        let prevPage = pages[pages.length - 2] // 代表的就是上一页的实例，相当于上一页的this
        prevPage.getDetail(this.data.id) // 调用上一页获取详情的方法
        wx.navigateBack({ // 跳转到上一页
          delta: 1
        })
      }
...

miniprogram\pages\fruit-detail\fruit-detail.js文件也需要修改，修改成如下，单独拎出一个getDetail方法，传入记录id进行查询：

  onLoad(options) {
    this.getDetail(options.id)
  },
  getDetail(id) {
    wx.cloud.callFunction({
        // 云函数名称
        name: 'fruit',
        // 传给云函数的参数
        data: {
          type: 'detail',
          id: id,
        },
      })
      .then(res => {
        this.setData({
          fruitDetail: res.result.data.data
        })
      })
      .catch(err => {})
  },

如此，我们的编辑功能就基本完善了

写在最后

以上就是小程序云开发之小程序页面堆栈的全部内容