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

浅浅的花香味﹌ 2022-04-05 11:41 720阅读 0赞

# [官方文档][Link 1] #

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

参数

Object object

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

示例代码

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码
    
    // 此处是A页面
    wx.navigateTo({
      url: 'B?id=1'
    })
    
    // 此处是B页面
    wx.navigateTo({
      url: 'C?id=1'
    })
    
    // 在C页面内 navigateBack，将返回A页面
    wx.navigateBack({
      delta: 2
    })

# 实际使用 #

先看图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rlc3Rjc19kbg_size_16_color_FFFFFF_t_70][]

当连续的使用 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。

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

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateBack.html
[getCurrentPages]: https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html#getcurrentpages
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rlc3Rjc19kbg_size_16_color_FFFFFF_t_70]: /images/20220405/8fec68f0bd994f7c93af69e969557c36.png