微信小程序 wx.navigateBack(OBJECT) 使用方法详解

官方文档

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

参数

Object object

属性	类型	默认值	必填	说明	最低版本
delta	number		是	返回的页面数，如果 delta 大于现有页面数，则返回到首页。
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
  delta: 2
})

实际使用

先看图：

当连续的使用 wx.navigateTo 跳转页面之后，最多是跳转10次，再调用就不生效了。

一方面是缓存有限制，另一方面也是要求我们合理的利用缓存吧。

那么如何跳转到之前打开的某个页面呢？

通过官方文档，我们知道传递的参数有一个 delta 属性，是一个数字，应该如何确定这个数字呢？

首先我们输出 getCurrentPages() ，看看里面都有什么；

我注意到，有一个 route 属性，有了这个就好办了！

我们可以根据要跳转的页面的URL和页面栈中每一页的 route 属性对比，来计算 delta 的值。

依赖的数据

Page({
  /**
   * 页面的初始数据
   */
  data: {
    building:[],
    //  底部导航
    curIdx: 0,
    listInfo: [
      {
        text: '首页',
        imgUrl: '../images/index.png',
        curUrl: '../images/index1.png',
        pageUrl: '/pages/louPan/louPan'
      },
      {
        text: '咨讯交流',
        imgUrl: '../images/chat.png',
        curUrl: '../images/chat1.png',
        pageUrl: '/pages/chat/chat'
      },
      {
        text: '个人中心',
        imgUrl: '../images/my.png',
        curUrl: '../images/my1.png',
        pageUrl: '/pages/my/my'
      },
    ]
  },
  Navigation: function (event) {
    app.navigation(this.data.listInfo[event.currentTarget.dataset.id].pageUrl);
  }
})

从上面的代码可以看到，使用 listInfo 数组记录每一个页面的URL地址；

实际调用

  /**
   * 根据页面URL、页面栈返回之前打开的页面
   */
  navigation:function(pageUrl){
    var cps = getCurrentPages();
    logger.log(cps);
    var delta = 0;
    for (var i = cps.length - 1; i >= 0; i--) {
      if ("/" + cps[i].route == pageUrl) {
        if (delta == 0) {
          return;
        }
        wx.navigateBack({ delta: delta });
        return;
      }
      delta++;
    }
    wx.navigateTo({
      url: pageUrl
    });
  }

实际调用中，首先获取页面栈，进行一个倒序的遍历；也就是先进后出，后进先出。

如果栈中存在，就返回到已经打开的页面 wx.navigateBack；

如果不存在，就导航到新页面 wx.navigateTo。

 

还有没有更好的实现方式呢？欢迎各位看官指教！