問題的背景是沐寺,通過掃二維碼進(jìn)入公眾號頁面林艘,點(diǎn)擊返回的時候由于找不到它的上一個路由,導(dǎo)致跳轉(zhuǎn)到一個空的頁面混坞,接下來是該問題的解決辦法:
我們想要的效果是狐援,點(diǎn)擊返回----彈出提示----確定離開該頁面----退出公眾號
需要監(jiān)聽手機(jī)的返回按鈕:
1钢坦、掛載完成后,判斷瀏覽器是否支持popstate
mounted(){
? if (window.history && window.history.pushState) {
? ? history.pushState(null, null, document.URL);
? ? window.addEventListener('popstate', this.fun, false);//false阻止默認(rèn)事件
? }
}
2啥酱、頁面銷毀時晦嵌,取消監(jiān)聽。否則其他vue路由頁面也會被監(jiān)聽
destroyed(){
? window.removeEventListener('popstate', this.fun, false);//false阻止默認(rèn)事件
}
3锭环、將監(jiān)聽操作寫在methods里面抄囚,removeEventListener取消監(jiān)聽內(nèi)容必須跟開啟監(jiān)聽保持一致,所以函數(shù)拿到methods里面寫
methods:{
fun(){
console.log("監(jiān)聽到了");
? }
}
以上內(nèi)容來源:vue項目中監(jiān)聽手機(jī)物理返回鍵_unbreakablec的博客-CSDN博客_vue物理返回鍵捕獲
以上我們做到了監(jiān)聽手機(jī)物理返回鍵绘趋,當(dāng)我們觸發(fā)返回鍵的時候會執(zhí)行fun()這個方法
接下來就可以在fun里面寫我們點(diǎn)擊返回需要執(zhí)行的方法及事件
安卓的退出方法:
document.addEventListener(
'WeixinJSBridgeReady',
? function() {
WeixinJSBridge.call('closeWindow')
},
false
? ? )
ios的退出方法:
WeixinJSBridge.call('closeWindow')
整合到一起:
最好加個setTimeout颤陶,要不然WeixinJSBridge可能會出現(xiàn)未定義的錯誤