微信小程序 使用页面栈 修改上一个页面的data数据

微信小程序中从一个页面A进入一个页面B,如果页面B的数据有改变,再返回页面A的时候需要把数据同步到页面A。

一般的方法有:

1. 使用本地缓存 wx.setStorage() 和 wx.getStorage()

// 页面B
wx.setStorage({
  key: "name",
  data: "mossbaoo"
})
// 页面A
wx.getStorage({
  key: 'name',
  success (res) {
    console.log(res.data)
  }
})

2. 使用app.js的全局变量

// 页面B
getApp().globalData.name = 'mossbaoo';
// 页面A
console.log(getApp().globalData.name)

以上两种方法,不仅可以用于返回上一页时更新数据,它们是全局通用的;但是,有些数据也就仅用于两个页面间的数据同步,如果使用全局来存储的话,就会有反作用了,一是耗内存耗性能,二是不利于后期维护。

那么,接下来介绍的是怎么使用页面栈去实现:

首先,可以先到微信小程序官方文档了解一下页面路由:《页面路由》

获取当前页面栈的实例可以通过 getCurrentPages() 函数,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

注意:

  1. 不要尝试修改页面栈,会导致路由以及页面状态错误
  2. 不要在 App.onLaunch 的时候调用 getCurrentPages(),此时page还没有生成。

以下是页面栈的使用栗子:

// 页面A
data: {
  name: ''
},
changeDataPageA(name){
  this.setData({
    name: name
  })
}
// 页面B
changeDataPageB() {
  // 获取页面栈
  var pages = getCurrentPages();
  var currPage = pages[pages.length - 1]; // 当前页
  var prevPage = pages[pages.length - 2]; // 上一个页面
  var data = prevPage.data // 获取上一页data里的数据
  // 如果存在上一页
  if(prevPage){
    // 可以调用上一页的函数
    prevPage.changeDataPageA('mossbaoo');
    // 可以修改上一页的数据
    prevPage.setData({
      name: 'mossbaoo'
    })
    // 返回上一页
    wx.navigateBack();
  }
}

这样就可以实现数据传递给上一个页面,要注意页面页面A必须使用 wx.navigateTo() 跳转到下一页面B,不能使用wx.redirectTo等其它的跳转方式,这样会关闭上一个页面,导致页面B无法获取上一页的Page实例。

 

  • 1
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mossbaoo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值