詳解解決小程序中webview頁(yè)面多層history返回問(wèn)題

更新時(shí)間：2019年08月20日 09:58:16 作者：sunny

這篇文章主要介紹了詳解解決小程序中webview頁(yè)面多層history返回問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

小程序開(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用JS實(shí)現(xiàn)任意位置縮放圖片功能
本文將用一個(gè)簡(jiǎn)單的例子詳細(xì)講解如何用原生JS一步步實(shí)現(xiàn)完整的任意位置縮放圖片功能,無(wú)任何第三方依賴,指針事件進(jìn)行多端統(tǒng)一的事件監(jiān)聽(tīng),干貨滿滿,需要的朋友可以參考下
2024-04-04
mpvue 頁(yè)面預(yù)加載新增preLoad生命周期的兩種方式
這篇文章主要介紹了mpvue 頁(yè)面預(yù)加載新增preLoad生命周期的兩種方式,本文重點(diǎn)給大家講解了第一種方式，需要的朋友可以參考下
2019-10-10
一個(gè)可拖拽列寬表格實(shí)例演示
本文將詳細(xì)介紹一個(gè)可拖拽列寬表格實(shí)例,需要了解更多的朋友可以參考下
2012-11-11
全面解析Bootstrap表單使用方法（表單控件）
這篇文章全面解析了Bootstrap表單的使用方法，本文重點(diǎn)介紹Bootstrap表單控件，感興趣的小伙伴們可以參考一下
2015-11-11
Javascript下的keyCode鍵碼值表
Javascript下的keyCode鍵碼值表...
2007-04-04
移動(dòng)端js圖片查看器
這篇文章主要為大家詳細(xì)介紹了js圖片查看器的制作方法，可以實(shí)現(xiàn)圖片的滑動(dòng)等效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
如何編寫一個(gè)d.ts文件的步驟詳解
這篇文章主要給大家介紹了關(guān)于如何編寫一個(gè)d.ts文件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用d.ts具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2018-04-04
簡(jiǎn)單實(shí)現(xiàn)bootstrap導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)bootstrap導(dǎo)航效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
JavaScript實(shí)現(xiàn)可終止輪詢請(qǐng)求的方法
輪詢請(qǐng)求就是間隔相同的時(shí)間（如5s）后不斷地向服務(wù)端發(fā)起同一個(gè)接口的請(qǐng)求，當(dāng)然不能無(wú)限次去請(qǐng)求，所以輪詢必須要有個(gè)停止輪詢的機(jī)制，今天通過(guò)本文給大家介紹JavaScript實(shí)現(xiàn)可終止的輪詢請(qǐng)求，感興趣的朋友一起看看吧
2022-06-06
刪除javascript中注釋語(yǔ)句的正則表達(dá)式
這篇文章主要介紹了刪除javascript中注釋語(yǔ)句的正則表達(dá)式,需要的朋友可以參考下
2014-06-06