快捷導(dǎo)航

解決微信授權(quán)成功后點(diǎn)擊按返回鍵出現(xiàn)空白頁(yè)和報(bào)錯(cuò)的問(wèn)題

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

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

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

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

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

具體代碼如下：

①引入微信sdk,npm install 相對(duì)應(yīng)的包即可。

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

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

因?yàn)槲⑿攀跈?quán)頁(yè)授權(quán)成功必會(huì)在url中帶 code，所有我是通過(guò)判斷路徑中是否有 code認(rèn)定是授權(quán)頁(yè)（可能這種方式）不妥，但能確認(rèn)to和from兩個(gè)條件滿足即可。

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

您可能感興趣的文章: