【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();
  } 
})
目录
相关文章
|
9月前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
2960 12
|
9月前
|
缓存 小程序 API
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
2408 3
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
3269 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
小程序 前端开发 生物认证
微信小程序如何将一个按钮放到页面的最底下?
微信小程序如何将一个按钮放到页面的最底下?
1861 5
|
移动开发 小程序 前端开发
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。

热门文章

最新文章