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

Posted 2023-04-04 大西瓜3721

在写业务的时候，我们有时候会遇到这样的场景：从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)
    
  
)

 

微信小程序之wx.navigateback往回携带参数

在微信小程序开发的过程当中  经常碰到一些带逻辑的一些事情 就比如 新增地址 修改地址  筛选用户条件等页面的时候  我们也可以用wx.navigateTo来跳转实现 但其中有很多问题 

1.微信的十层跳转  当你用navigateTo跳转的时候跳转十次的时候就跳不动了

2.参数的传递 我们在用navigateTo跳转的时候通常带着参数来跳  试想一下 如果我们一种这么跳 那么携带的参数越来越多 这不是开发的一个好事情

所以在以上的问题上我们可以用navigateback来实现  既仅携带本次跳转用的参数即可  并且速度会很快 因为不需要再次加载onLoad函数  写起来也会方便很多 话不多说 上代码

一、假如我们此时在筛选用户条件的页面上    经过我们一系列实现后准备跳回上一个页面的时候

let pages = getCurrentPages();//当前页面    （pages就是获取的当前页面的JS里面所有pages的信息）

let prevPage = pages[pages.length - 2];//上一页面（prevPage 就是获取的上一个页面的JS里面所有pages的信息）

prevPage.setData({

state:1,

searchContent: this.data.searchContent,  

regionName: this.data.regionName,

industryId: this.data.classifySelc,

districtId: this.data.selectArea,

businessDistrictId: this.data.selectTrading,

restaurantCategoryId: this.data.selectShop

})  //以上就是我回到上个页面所要携带的所有参数  如果我们用navigateTo来跳转的话 试想一下 那个跳转地址会写多长

wx.navigateBack({

delta: 1,

}) //回到上一个页面  仅适用于用navigateTo跳转过来的页面

二、在我们的主页面上 即上一个页面 这么几个步骤

1.在页面的data里面设置接收上个页面传过来的参数的变量

data:{

　　state:0

} //这个state就是接收的上个页面传过来的state:1这个参数  此时你的页面data里面的state的参数就变成了1

2.

let pages = getCurrentPages();

let currPage = pages[pages.length-1]; //获取当前页面pages里的所有信息   可以console一下看一下此时的数据已经变成了你传回来的数据了

3.那么我们怎么用这个数据  切记在onshow函数里面调用data里面的数据就可以了  因为我们是navigateback返回上一个页面 就相当于返回  此时我们页面不会再次执行onLoad函数

所以我们需要用onshow来调用我们之前封装好的方法就可以了  

 

： 经过简单的一处理 就会使我们的代码简洁简单很多 不会那么冗长了  页面逻辑实现起来更容易了