詳解解決小程序中webview頁(yè)面多層history返回問(wèn)題
小程序開(kāi)發(fā)中遇到的問(wèn)題:小程序中嵌套了一個(gè)webview頁(yè)面,webview頁(yè)面中有靜默授權(quán)(A1頁(yè)面靜默授權(quán)后重定向到A2頁(yè)面),點(diǎn)小程序原生的返回按鈕會(huì)返回到A1頁(yè)面,然后頁(yè)面就會(huì)反復(fù)靜默授權(quán)
預(yù)期表現(xiàn):點(diǎn)小程序原生的返回按鈕后返回到小程序上個(gè)頁(yè)面
解決方案:通過(guò)history.pushState添加歷史記錄名目,history.onpopstate監(jiān)聽(tīng)歷史記錄條目發(fā)生變化時(shí),調(diào)用小程序APIwx.navigateBack
window.addEventListener('popstate', (event) => { wx.miniProgram.navigateBack(); }); const code = getSearch('code'); // 偽代碼,獲取查詢參數(shù) if (!code) { // 頁(yè)面A1 if (isWeixin()) { // 微信環(huán)境 const redirectUrl = window.location.href + '&code=1'; window.location. + '?appid=' + appId + '&redirect_uri=' + encodeURIComponent(redirectUrl) + '&response_type=code&scope=snsapi_userinfo' + '#wechat_redirect'; // 靜默授權(quán)偽代碼 } else { alert('當(dāng)前不是微信環(huán)境'); } } else { // 頁(yè)面A2 history.pushState({page: 1}, null, window.location.href); }
剛開(kāi)始想的解決辦法是用localStorage,跳轉(zhuǎn)到A2時(shí)存儲(chǔ)一個(gè)值,返回到A1時(shí)獲取這個(gè)值,如果有值就清除這個(gè)值并且回退到小程序頁(yè)面。聽(tīng)起來(lái)似乎也可行,但小程序的緩存和微信的緩存是同步的,如果在微信環(huán)境中直接訪問(wèn)A1頁(yè)面,重定向到A2會(huì)存值,如果直接關(guān)閉頁(yè)面,不會(huì)被清除,那么在小程序中訪問(wèn)時(shí)就直接回退了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序自定義tabbar custom-tab-bar 6s出不來(lái)解決方案(cover-view不兼容)
- 微信小程序 scroll-view 水平滾動(dòng)實(shí)現(xiàn)過(guò)程解析
- 微信小程序webview與h5通過(guò)postMessage實(shí)現(xiàn)實(shí)時(shí)通訊的實(shí)現(xiàn)
- 微信小程序移動(dòng)拖拽視圖-movable-view實(shí)例詳解
- 微信小程序webview組件交互,內(nèi)聯(lián)h5頁(yè)面并網(wǎng)頁(yè)實(shí)現(xiàn)微信支付實(shí)現(xiàn)解析
- 微信小程序webview 腳手架使用詳解
- 微信小程序與webview交互實(shí)現(xiàn)支付功能
- 微信小程序動(dòng)態(tài)添加view組件的實(shí)例代碼
- 微信小程序點(diǎn)擊view動(dòng)態(tài)添加樣式過(guò)程解析
相關(guān)文章
swiper移動(dòng)端輪播插件(觸碰圖片之后停止輪播)
這篇文章主要為大家詳細(xì)介紹了swiper移動(dòng)端輪播插件,觸碰圖片之后停止輪播,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12swiper動(dòng)態(tài)改變滑動(dòng)內(nèi)容的實(shí)現(xiàn)方法
假設(shè)當(dāng)前顯示的是1,往左滑動(dòng)一個(gè)遞減1,往右滑動(dòng)一個(gè)遞增1。下面通過(guò)實(shí)例代碼給大家講解swiper動(dòng)態(tài)改變滑動(dòng)內(nèi)容的實(shí)現(xiàn)方法,感興趣的朋友一起看看吧2018-01-01javaScript實(shí)現(xiàn)一個(gè)隊(duì)列的方法
這篇文章主要介紹了javaScript實(shí)現(xiàn)一個(gè)隊(duì)列的方法,文中講解非常細(xì)致,代碼幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下2020-07-07JS如何遍歷帶有子集的數(shù)組集合(嵌套數(shù)組)
這篇文章主要介紹了JS如何遍歷帶有子集的數(shù)組集合(嵌套數(shù)組)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06js/jquery控制頁(yè)面動(dòng)態(tài)加載數(shù)據(jù) 滑動(dòng)滾動(dòng)條自動(dòng)加載事件的方法
下面小編就為大家?guī)?lái)一篇js/jquery控制頁(yè)面動(dòng)態(tài)加載數(shù)據(jù) 滑動(dòng)滾動(dòng)條自動(dòng)加載事件的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02JavaScript中的子窗口與父窗口的互相調(diào)用問(wèn)題
本文給大家介紹了JavaScript中的子窗口與父窗口的互相調(diào)用問(wèn)題,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-02-02js實(shí)現(xiàn)圖片粘貼到網(wǎng)頁(yè)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片粘貼到網(wǎng)頁(yè),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12關(guān)于js new Date() 出現(xiàn)NaN 的分析
在一個(gè)項(xiàng)目中需要進(jìn)行日期的格式化,后臺(tái)傳到前端是時(shí)間的整數(shù)(Date.getTime),當(dāng)后臺(tái)數(shù)據(jù)返回字符串時(shí),發(fā)現(xiàn)轉(zhuǎn)換日期時(shí)在ie下變成NaN,但是真的是這樣嗎?接下來(lái)我們慢慢分析2012-10-10