解決微信授權(quán)成功后點擊按返回鍵出現(xiàn)空白頁和報錯的問題

更新時間：2020年06月08日 10:27:57 作者：飛歌Fly

這篇文章主要介紹了解決微信授權(quán)成功后點擊按返回鍵出現(xiàn)空白頁和報錯的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

微信授權(quán) 的操作可以閱讀我的另一篇文章 http://www.dbjr.com.cn/article/188237.htm

微信授權(quán)我是在index.vue做的授權(quán)，是一個空白頁，因為授權(quán)需要回調(diào)所以這個頁面會刷新兩次，當我們授權(quán)成功進入主頁面后，點擊返回鍵或者點擊手機的物理返回鍵，因為瀏覽器history機制，按物理返回或者返回肯定是會進入這個授權(quán)頁面的，而此時code已經(jīng)使用過，會報code錯誤，而且這個是空白頁，多次點擊也并不能回到微信的消息列表頁，體驗極差。。。

我的做法是引入微信的js sdk,使用vue-router 路由導航beforeEach 中的 to（即將到達的頁面）和from(當前頁面)來做判斷，假如to是授權(quán)頁，from是授權(quán)成功后首次進入的頁面，在from頁面點擊返回，路由監(jiān)聽到這一滿足條件就調(diào)用微信 wx.closeWindow() 方法即可關(guān)閉當前頁面回到消息列表頁，不是使用vue來開發(fā)的項目原理大概也是類似的。

具體代碼如下：

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

②在路由配置頁面配置路由守衛(wèi)。

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

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

到此這篇關(guān)于解決微信授權(quán)成功后點擊按返回鍵出現(xiàn)空白頁和報錯的問題的文章就介紹到這了,更多相關(guān)微信返回鍵出現(xiàn)空白頁和報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: