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

本文介绍了微信小程序中页面A到页面B数据变化后,如何将数据同步回页面A的方法。包括使用本地缓存、全局变量及页面栈实现数据传递,重点讲解了利用页面栈进行数据同步的细节。

微信小程序中从一个页面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实例。

 

### 3. 页面返回时更新上一页面数据的实现方法 在微信小程序中实现页面返回并更新上一页面数据,可以通过多种方式完成,具体选择取决于业务需求和用户体验的优先级。 - **直接修改上一页面的实例数据**:通过获取页面中的上一页面实例,直接调用其方法或修改数据,从而实现数据的更新。这种方法适用于页面数据传递较为直接的场景。 ```javascript handleClick() { let pages = getCurrentPages(); let beforePage = pages[pages.length - 2]; beforePage.setData({ txt: '修改数据了' }); beforePage.go_update(); wx.navigateBack({ delta: 1 }); } ``` - **使用`wx.redirectTo`或`wx.reLaunch`**:如果需要刷新页面以显示最新的数据状态,可以考虑使用`wx.redirectTo`来关闭当前页面并跳转到目标页面,这种方式不会保留当前页面的状态,从而避免了重复的历史记录问题。然而,需要注意的是,`wx.reLaunch`虽然也能达到刷新页面的效果,但可能会导致页面闪烁,影响用户体验[^2]。 ```javascript wx.redirectTo({ url: '/pages/targetPage/targetPage' }); ``` - **事件监听机制**:利用Vue.js的事件系统,在目标页面监听特定事件,并在返回时触发该事件以更新数据。这种方法适用于组件间通信需求较为复杂的情况,能够提供更高的灵活性。 ```javascript // 页面A.vue this.$emit('refreshData', data); // 页面B.vue this.$on('refreshData', (data) => { // 执行数据刷新操作 }); ``` 以上方法各有优劣,选择最适合当前应用场景的方式进行实现。通常情况下,对于简单的数据更新需求,推荐使用直接修改上一页面实例数据的方法;而对于需要跨页面通信的复杂场景,则更适合采用事件监听机制。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

mossbaoo

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

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

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

打赏作者

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

抵扣说明:

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

余额充值