微信小程序页面返回值有哪四种高效解决方案汇总？

本文共计963个文字，预计阅读时间需要4分钟。

目录使用场景解决方案

1.使用 globalData 实现

2.使用本地缓存 Storage 实现

3.使用小程序的 Page 页面栈实现

4.使用 wx.navigateTo API 的 events 实现

总结使用场景小程序从 A 页面跳转到 B 页面解决方案

1.使用 globalData 实现

在全局的 globalData 中定义一个数组，用来存储需要传递的数据。在 A 页面触发跳转时，将数据添加到 globalData 中；在 B 页面获取 globalData 中的数据。

2. 使用本地缓存 Storage 实现在 A 页面将数据存储到本地缓存中，在 B 页面从本地缓存中读取数据。

3. 使用小程序的 Page 页面栈实现通过小程序的页面栈 API，获取 A 页面栈信息，并在 B 页面中处理页面栈。

4. 使用 wx.navigateTo API 的 events 实现通过监听 wx.navigateTo 事件，在 B 页面接收到 A 页面的传递数据。

总结

目录

• 使用场景
• 解决方案
• 1、使用globalData实现
• 2、使用本地缓存Storage实现
• 3、使用小程序的Page页面栈实现
• 4、使用wx.navigateTo API的events实现
• 总结

使用场景

小程序从A页面跳转到B页面，在B页面选择一个值后返回到A页面，在A页面使用在B页面选中的值。例如：在购买订单页面跳转到地址列表，选择完地址以后回退到订单页面，订单页面的配送地址需要同步更新。

解决方案

常见的比容要容易解决的方案是使用小程序的全局存储globalData、本地缓存storage、获取小程序的页面栈，调用上一个Page的setData方法、以及利用wx.navigateTo的events属性监听被打开页面发送到当前页面的数据。下面给大家简单对比下四种方法的优缺点：

1、使用globalData实现

//page A const app = getApp() //获取App.js实例 onShow() {//生命周期函数--监听页面显示 if (app.globalData.backData) { this.setData({ //将B页面更新完的值渲染到页面上 backData: app.globalData.backData },()=>{ delete app.globalData.backData //删除数据 避免onShow重复渲染 }) } } //page B const app = getApp() //获取App.js实例 changeBackData(){ app.globalData.backData = '我被修改了' wx.navigateBack() }

2、使用本地缓存Storage实现

//page A onShow: function () { let backData = wx.getStorageSync('backData') if(backData){ this.setData({ backData },()=>{ wx.removeStorageSync('backData') }) } }, //page B changeBackData(){ wx.setStorageSync('backData', '我被修改了') wx.navigateBack() },

3、使用小程序的Page页面栈实现

使小程序的页面栈，比其他两种方式会更方便一点而且渲染的会更快一些，不需要等回退到A页面上再把数据渲染出来，在B页面上的直接就会更新A页面上的值，回退到A页面的时候，值已经被更新了。globalData和Storage实现的原理都是在B页面上修改完值以后，回退到A页面，触发onShow生命周期函数，来更新页面渲染。

//page B changeBackData(){ const pages = getCurrentPages(); const beforePage = pages[pages.length - 2] beforePage.setData({ //会直接更新A页面的数据，A页面不需要其他操作 backData: "我被修改了" }) }

4、使用wx.navigateTo API的events实现

wx.navigateTo的events的实现原理是利用设计模式的发布订阅模式实现的，有兴趣的同学可以自己动手实现一个简单的，也可以实现相同的效果。

//page A goPageB() { wx.navigateTo({ url: 'B', events: { getBackData: res => { //在events里面添加监听事件 this.setData({ backData: res.backData }) }, }, }) }, //page B changeBackData(){ const eventChannel = this.getOpenerEventChannel() eventChannel.emit('getBackData', { backData: '我被修改了' }); wx.navigateBack() }

总结

1和2两种方法在页面渲染效果上比后面两种稍微慢一点，3和4两种方法在B页面回退到A页面之前已经触发了更新，而1和2两种方法是等返回到A页面之后，在A页面才触发更新。并且1和2两种方式，要考虑到A页面更新完以后要删除globalData和Storage的数据，避免onShow方法里面重复触发setData更新页面，所以个人更推荐大家使用后面的3和4两种方式。

到此这篇关于微信小程序页面返回传值的4种解决方案的文章就介绍到这了,更多相关微信小程序页面返回传值内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！