微信小程序wx.navigateTo层叠5次限制

小程序页面的实例使用栈的数据结构存储，栈内元素最多5个（换一种方式说，就是用户最多能点击5次返回），微信小程序能在栈中相对高层某个页面调用其他相对低层的页面实例的方法。

小程序三种页面跳转API 的区别在于：

• wx.navigateTo 不会将旧页面出栈，会将新页面入栈。(栈内元素个数增加，栈内元素5个时，不能再跳转)
• wx.redirectTo 会将栈顶的旧页面出栈，再将需要跳转到的页面入栈（栈内元素个数不变）；
• wx.navigateBack 则是将页面栈最后一个元素出栈，因此倒数第二个元素会成为最后一个元素，即变成当前页面；也可以连续出栈好几个元素（大于栈内元素的个数则返回首页）返回栈中的某个页面。

结合下面一个例子对上面的内容的理解：

有一个小程序包含 A、B、C、D 四个页面，A 为首页。小程序启动后，在 A 页面中，此时栈中有一个元素A，我们通过 navigateTo 跳转到 B 页面，然后在 B 页面中再通过 navigateTo 跳转到 C 页面。此时页面栈中就会包含三个元素，分别为 A、B、C 三个页面。而此时如果通过 redirectTo 跳转到 D 页面，redirectTo 会将栈顶页面出栈，即将 C 页面出栈，再将 D 页面入栈，这时候，页面栈中的元素则会变为 A、B、D。此时如果在 D 页面调用 navigateBack，会发现不是返回 C 页面，而是返回到了 B 页面。当然也可以直接在D页面返回A，设置navigateBack的delta参数为2。

特殊情况，减少navigateTo的使用

描述

   举个栗子：比如小程序的商城，在用户下单的页面（下面简称：下单界面）很多时候用户需要选择收获地址，然后程序根据用户的选择再返回该界面显示用户选择的收获地址是什么。可能需要在用户的下单界面跳转到地址界面，地址的界面可能有编辑地址之类的操作，用户选择地址后返回下单界面，显示刚刚用户选择的收获地址是什么。这个时候可以采用以下方法，减少navigateTo的使用。很多情况下都会有画圈这样的操作，就是经过一系列的界面后取得数据又返回了原来的界面，这个时候可以使用。

编辑完当前页面返回数据到上一页更新，假设当前在首页A页面，需要跳转到B页面采集用户的选择的数据，然后在返回A界面更新显示。代码例子如下

//A界面

Page({
    data: {
        userName: ''
    },

    getBackData: function(name){
        this.setData({
             userName: name
         })
    }
})

//B页面
Page({
    edtinputname: function (e) {
        var name="张三";
        var pagelist = getCurrentPages();
            if(pagelist.length > 1){
                //获取上一个页面实例对象
                var prePage = pagelist[pagelist.length - 2];
                prePage.getBackData(name);

                wx.navigateBack({
                      delta: 1
                })
      }
})
    

这样能够使得取得数据但不会增加栈中的元素个数，减少navigateTo的使用

1. 在【页面A】中调用wx.navigateTo方法跳转到【页面B】
2. 然后从【页面B】返回【页面A】, 并将【页面B】中的一些数据传回【页面A】

方法1：使用全局数据存储

• 将要传递的数据，存储在App对象上（比如globalData属性）。
• 将要传递的数据，存储在小程序的本地数据缓存（Storage）中。

例如，我们在将要退出页面B的时候，作如下调用：

//=== 1. 存储到app对象上的方式 ========
var app = getApp()
app.globalData.mydata = {a:1, b:2};  //存储数据到app对象上
wx.navigateBack();  //返回上一个页面

//=== 2.存储到数据缓存的方式 =========
wx.setStorage({
  key: "mydata",
  data: {a:1, b:2},
  success: function () {
    wx.navigateBack();   //返回上一个页面
  }
})

这样一来，当返回到上一个页面的时候，可以通过读取这些全局存储区域，来获取到我们需要的数据。
不过，这种方式也是有很明显的缺点的。由于是全局数据存储，所以当你存入了那些数据后，必须谨慎的去管理这些全局数据（何时被销毁），否则一不小心，就会产生副作用。

方法2：从页面路由栈中直接获取和操作目标Page对象

通过调用小程序的API: getCurrentPages()，来获取当前页面路由栈的信息，这个路由栈中按照页面的路由顺序存放着相应的Page对象，获取到上一级页面的完整Page对象，从而使直接调用Page对象的属性和方法成为可能。
如下所示：

var pages = getCurrentPages();
var currPage = pages[pages.length - 1];   //当前页面
var prevPage = pages[pages.length - 2];  //上一个页面

//直接调用上一个页面的setData()方法，把数据存到上一个页面中去

var newtitle ='It is new title';
//不需要页面更新
prevPage.setData({
  title: newtitle
})

我的微信小程序采坑小记

感谢浏览，欢迎评论指正，转载请标明出处。

作者：疾风劲草ccy
链接：https://www.jianshu.com/p/f846a2cc6c53
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。