微信小程序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的使用

posted on 2017-08-29 17:02  天生一对  阅读(13090)  评论(0)  编辑  收藏  举报

导航