微信小程序之页面间传值(二)页面栈

页面栈是以栈的形式维护页面与页面之间的关系,遵循栈的原则,先进后出,在微信小程序中有getCurrentPages()函数获取页面栈。

通常我们会选择带参传值的方法,但是有一些情况可能使用带参传值不太理想
举一个栗子(网上看到的栗子)

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

如下图所示,我在这个表单页面A中填写数据

页面A.png

然后这个页面上,有一个搜索按钮,点击该按钮,将跳转到另一个证券代码搜索页面B
页面B.png

当我在这个搜索列表中选中一个证券代码后,将返回到上一个表单页面,继续我未完成的表单填写与提交操作。
这种场景是非常合理和常见的。
但是,我们来想一下,怎么在退出页面B,返回页面A的时候,把页面B中选中的证券代码回传给页面A呢?
使用navigateTo()中url携带参数的方式?
基于Page生命周期的原因,我们的答案是:不行
原作者文章地址,有兴趣的可以看一下,就点这句话就可以去看看

这个栗子原作者说因为生命周期的原因,不能使用navigateTo()中url携带参数的方式,我啊,暂时没有遇到这种情况,但是我遇到了同样不能使用navigateTo()中url携带参数的方式,当当当,跳转到tab页面,switchTab的url不能带参,凉凉,所以就用到了页面栈的方法

接下来,进入正轨,页面栈到底怎么用???

又举个例子

首先在页面A的wxml写一段代码,让把传递过来的值可以显示出来

<view bindtap='bindtap'>跳转到新页面{{info.name}}{{info.phone}}{{info.address}}</view>

这里有一个点击事件,触发点击事件跳转到B页面,B页面也就是A页面的下一个页面,
页面A的js

 data: {
    info:[]
  },
bindtap:function(){
  wx.navigateTo({
    url: '../pageB/pageB',
  })
},

在这里,给A页面一个原始数据info为空
然后进入B页面
页面B的wxml

<text bindtap='bindtapback'>pages/pageB/pageB.wxml</text>

页面B的js

data: {
    name: '周杰伦',
    phone: '123456789',
    address: '台北'
  },
  bindtapback:function(){
    var that = this;
    var pages = getCurrentPages()
    var currPage = pages[pages.length - 1];   //当前页面
    var prevPage = pages[pages.length - 2];  //上一个页面
    if (prevPage.route == 'pages/pageA/pageA') {
      wx.navigateBack({
        delta: 1,
        success: function () {
          var info = {
            name: that.data.name,
            phone: that.data.phone,
            address: that.data.address
          }
          console.log(info)
          prevPage.setData({
            info: info
          })
        }
      })
    }
  },
```swift

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

这里就是获取页面栈,首先将获取到所有的页面存入一个数组中,然后根据你的需要进行页面跳转

好啦好啦,方法大概就是这样

溜了溜了

方法三,改日再写吧

推薦閱讀更多精彩內容