小程序 使用navigateBack返回携带参数

在写业务的时候，我们有时候会遇到这样的场景：从a页面跳转到b页面，然后需要再从b页面返回到a页面；并携带一些数据回来。

这个时候通常我们会使用到  

wx.navigateBack

但是由于navigateBack无法直接携带参数；传参就需要另想办法了

当然实现的方法有很多；这里要说的是通过setData的方式实现

b页面代码

 // 选定当前店铺
  changeShopfn: function (e) {
    console.log(e)
    let shopinfo = e.currentTarget.dataset.item;
    console.log(shopinfo)
    let pages = getCurrentPages();//获取页面栈
    let prevPage = pages[pages.length - 2]; //上一个页面
    //直接调用上一个页面的setData()方法，把数据存到上一个页面中去
    prevPage.setData({
      mydata:shopinfo
    })
    wx.navigateBack({
      delta: 1,
    })
  },

a页面代码

 onShow: function () {
    let pages = getCurrentPages();
    let currPage = pages[pages.length - 1]; //当前页面
    console.log(currPage.data.mydata)
    let shopList=currPage.data.mydata;
    if(shopList){
      this.setData({
        shopList
      })
    }
  },复制

 

 

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

testBack(){
    const pages = getCurrentPages();
    const currPage = pages[pages.length - 1];//当前页面
    const prePage = pages[pages.length - 2];//上一个页面 
    /**
     * 直接调用上一个页面的setData()方法，把数据存到上一个页面中去
     * 不需要页面更新
     */
    prePage.setData({
      title: '新的标题'
    })
    wx.navigateBack({
      delta: 1
    })
  }

方法二（直接调用方法名来更新数据）
页面A

Page({
  data: {
    name: ''
  },
  ...
  ,
  //更新name
  changeData: function(name){
    this.setData({
      name: name
    })
  }
})

页面B,假设有一个文本框用于输入姓名,点击返回按钮后更新页面A的name

Page({
  //此方法用于文本框输入回调
  inputTyping: function (e) {
    //获取页面栈
    var pages = getCurrentPages();
    if(pages.length > 1){
      //上一个页面实例对象
      var prePage = pages[pages.length - 2];
      //关键在这里
      prePage.changeData(e.detail.value)
    }
  }
})