【mpvue】微信小程序返回到tab頁面並刷新頁面,在微信開發者工具運行正常,但是真機調試的時候跳轉到了tab頁面但不會刷新。getCurrentPages()獲取的不是當前頁面

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」,再執行「基金頁面」下的刷新頁面方法。

要解決這個問題,我們需要先了解一下頁面棧。

API 頁面棧表現 備註
wx.switchTab 頁面全面出棧,只留下新的Tab頁面 只能打開 tabBar 頁面
wx.reLaunch 頁面全面出棧,只留下新的頁面 可以打開任意頁面

從【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();
  } 
})
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章