经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序页面返回传值的4种解决方案汇总
来源:jb51  时间:2021/7/21 12:33:34  对本文有异议

使用场景

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

解决方案

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

1、使用globalData实现

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

2、使用本地缓存Storage实现

  1. //page A
  2. onShow: function () {
  3. let backData = wx.getStorageSync('backData')
  4. if(backData){
  5. this.setData({
  6. backData
  7. },()=>{
  8. wx.removeStorageSync('backData')
  9. })
  10. }
  11. },
  12. //page B
  13. changeBackData(){
  14. wx.setStorageSync('backData', '我被修改了')
  15. wx.navigateBack()
  16. },

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

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

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

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

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

  1. //page A
  2. goPageB() {
  3. wx.navigateTo({
  4. url: 'B',
  5. events: {
  6. getBackData: res => { //在events里面添加监听事件
  7. this.setData({
  8. backData: res.backData
  9. })
  10. },
  11. },
  12. })
  13. },
  14. //page B
  15. changeBackData(){
  16. const eventChannel = this.getOpenerEventChannel()
  17. eventChannel.emit('getBackData', {
  18. backData: '我被修改了'
  19. });
  20. wx.navigateBack()
  21. }

总结

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

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号