【mpvue】微信小程序返回到tab页面并刷新页面,在微信开发者工具运行正常,但是真机调试的时候跳转到了tab页面但不会刷新。getCurrentPages()获取的不是当前页面

简介: 1、问题描述在「添加基金页面pages/addfund/main」添加完基金后,点击取消,会需要跳转到「基金页面pages/index/main」并且刷新出刚刚添加的基金现在的问题是:在微信开发者工具中操作时:添加完基金后,会跳转到「基金页面pages/index/main」并且刷新出刚刚添加的基金在真机调试、预览时:在手机上操作添加完基金后,会跳转到「基金页面pages/index/main」但是不会自动刷新出刚刚添加的基金

1、问题描述


在「添加基金页面pages/addfund/main」添加完基金后,点击取消,会需要跳转到「基金页面pages/index/main」并且刷新出刚刚添加的基金


现在的问题是:


在微信开发者工具中操作时:添加完基金后,会跳转到「基金页面pages/index/main」并且刷新出刚刚添加的基金


在真机调试、预览时:在手机上操作添加完基金后,会跳转到「基金页面pages/index/main」但是不会自动刷新出刚刚添加的基金


2、相关代码以及原因分析


我们通过wx.switchTab跳转到「基金页面pages/index/main」,跳转成功后,通过getCurrentPages().pop()方法获取当前页面栈中的最后一个页面(正常来说,这个页面就是「基金页面pages/index/main」),然后调用page.onPullDownRefresh()刷新这个页面


wx.switchTab({
  url: '/pages/index/main',
  success: function (e) { 
    console.log("that.$mp",that.$mp)
    var page = getCurrentPages().pop();
    console.log("page",page)
    if (page == undefined || page == null) return;
    page.onPullDownRefresh();
  } 
})


我们在代码中通过语句console.log("page",page)打印了一下当前的page。


在微信开发者工具中打印结果如下:


在真机调试中打印结果如下:


从上面两张图可以看出,在微信开发者工具和真机调试中打印出的page里面的route是不一样的。


微信开发者工具上能刷新是因为这里的route是「基金页面pages/index/main」


真机调试中不能刷新是因为route是「添加基金页面pages/addfund/main」所有实际上刷新了「添加基金页面」,没刷新「基金页面」


3、问题分析以及解决


页面到「基金页面」并刷新是通过先从页面栈中获取到「基金页面pages/index/main」,再执行「基金页面」下的刷新页面方法。


要解决这个问题,我们需要先了解一下页面栈。


image.png


从【2、相关代码以及原因分析】展示的代码中,我们可以看到现在用的方法是wx.switchTab。那么正常的流程是跳转到「基金页面pages/index/main」页面成功后,页面栈会被清空,只留下「基金页面」这个Tab页。在微信开发者工具确实是这样的。但是在真机调试中,最后留下的页面是「添加基金页面pages/addfund/main」。应该是微信小程序的一个bug了吧。


我们的解决方案是将wx.switchTab换成wx.reLaunch。这样就正常了,像下面这样:


wx.reLaunch({
  url: '/pages/index/main',
  success: function (e) { 
    console.log("that.$mp",that.$mp)
    var page = getCurrentPages().pop();
    console.log("page",page)
    if (page == undefined || page == null) return;
    page.onPullDownRefresh();
  } 
})
目录
打赏
0
0
0
0
3311
分享
相关文章
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
142 12
微信开发者工具里面没有企业微信模式
企业微信与普通微信在应用场景和开发体系上存在本质区别,主要体现在身份认证、功能丰富性和开放能力等方面。企业微信开发需使用特定的API和工具,本文介绍了企业微信开发的基本步骤、特点及开发进度安排,帮助开发者更好地理解和应用企业微信的开发环境。
|
4月前
|
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
884 1
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
583 3
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1762 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
揭秘支付宝小程序性能优化秘籍:从加载到运行,每一步都快人一步!
【8月更文挑战第27天】本文深入探讨了支付宝小程序性能优化的关键技术和策略,包括减少网络请求、利用CDN加速、代码按需加载、图片压缩、懒加载以及性能监控等多方面内容,并提供了实用的示例代码,帮助开发者显著提升小程序的加载速度与运行效率,创造更佳用户体验。
153 1
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
超详细微信小程序开发学习笔记,看完你也可以动手做微信小程序项目
这篇文章是一份全面的微信小程序开发学习笔记,涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。

热门文章

最新文章