1. 程式人生 > 程式設計 >解決微信授權成功後點擊按返回鍵出現空白頁和報錯的問題

解決微信授權成功後點擊按返回鍵出現空白頁和報錯的問題

微信授權 的操作可以閱讀我的另一篇文章https://www.jb51.net/article/188237.htm

微信授權我是 在index.vue做的授權,是一個空白頁,因為授權需要回調所以這個頁面會重新整理兩次,當我們授權成功進入主頁面後,點選返回鍵或者點選手機的物理返回鍵,因為瀏覽器history機制,按物理返回或者返回肯定是會進入這個授權頁面的,而此時code已經使用過,會報code錯誤,而且這個是空白頁,多次點選也並不能回到微信的訊息列表頁,體驗極差。。。

我的做法是引入微信的js sdk,使用vue-router 路由導航beforeEach 中的 to(即將到達的頁面)和from(當前頁面)來做判斷,假如to是授權頁,from是授權成功後首次進入的頁面,在from頁面點選返回 ,路由監聽到這一滿足條件就 呼叫 微信 wx.closeWindow() 方法即可關閉當前頁面回到訊息列表頁,不是使用vue來開發的專案原理大概也是類似的。

具體程式碼如下:

①引入微信sdk,npm install 相對應的包即可。

解決微信授權成功後點擊按返回鍵出現空白頁和報錯的問題

②在路由配置頁面配置路由守衛。

解決微信授權成功後點擊按返回鍵出現空白頁和報錯的問題

router.beforeEach((to,from,next) => {
  // 特殊處理授權成功後的user個人中心頁面點選返回退出到微信訊息列表頁
  let mark = to.fullPath.indexOf('code')
  if (mark !== -1 && from.fullPath === '/user') {
    wx.closeWindow()
  }
})

因為微信授權頁授權成功必會在url中帶 code,所有我是通過判斷路徑中是否有 code認定是授權頁(可能這種方式)不妥,但能確認to和from兩個條件滿足即可。

到此這篇關於解決微信授權成功後點擊按返回鍵出現空白頁和報錯的問題的文章就介紹到這了,更多相關微信返回鍵出現空白頁和報錯內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!