微信小程序 wx.navigateBack 携带参数返回上一级界面

今天来说下微信小程序 wx.navigateBack怎么携带参数返回上一个界面

有这么一个需求:


在商品列表界面选中商品,然后跳到商品结算界面,商品结算需要跳到收货地址界面选中地址,将选中之后的地址显示到结算界面,然后在结算界面进行支付

上面需求中呢,是一个很简单的商品下单结算例子,实现的方法有很多种,个人认为比较好的一种应该是通过页面栈的方式:在收货地址界面选中收货地址前获取到上一界面,然后将选中的地址信息赋值到上一界面的变量中

实现方法有很多,下面是一些方法举例:

  1. 可以赋值到全局变量 app.js
  2. 可以保存到小程序的缓存中 wx.getStorage
  3. 可以通页面栈的方式修改上一界面的值 wx.navigateBack
  4. 可以通过页面的其他跳转方式进行参数的携带,非 wx.navigateBack(其实最不推荐这种,如果收货地址界面需要数据维护,传来传去很麻烦,不利于后期维护,可能后期自己都看不懂了,哈哈哈~)

言归正传,下面就来说一下 wx.navigateBack :关闭当前页面,返回上一页面或多级页面。
wx.navigateBack是不能携带参数返回的,所以我们可以通过页面栈的方式实现

看代码(选中收货地址,即将要返回商品结算界面前进行操作)

    //地址信息
    let address = {
        name: "张三",
        phone: "15880288888",
        address: "福建省厦门市集美区万达广场888号"
    }

   //通过页面栈的方式,修改上一界面中的界面变量值
    var pages = getCurrentPages();
    var previousPage = pages[pages.length - 2]; //上一个页面

    //将收货地址赋值到上一界面的addressInfo变量中
    previousPage.setData({
      addressInfo: address 
    })
    
    //返回到商品结算界面
    wx.navigateBack({
      delta: 1
    })

这样,返回到商品结算界面,就能在界面data中拿到从收货地址界面通过界面栈的方式赋值回来的 addressInfo变量的值,从商量列表选中的商品信息数据在商品结算界面也不会丢失掉

注:

(如果是通过wx.navigateTo携带参数跳转的方式,在选中收货地址返回到商品结算界面的时候,由于小程序生命周期的缘故,界面会重新刷新,之前从商品列表选中的商品会在商品结算界面被清掉,那样的话拿到了收货地址信息,但是选中的商品信息却没有了)

好了,有什么问题,或者还有什么别的方法,欢迎指出

你可能感兴趣的:(小程序)