微信小程序webview中監(jiān)聽返回按鈕實現(xiàn)步驟

更新時間：2024年08月07日 09:18:09 作者：略吃一二

在微信小程序中webview返回鍵是一個非常實用的功能,它允許用戶在嵌入的網頁中返回到上一個頁面,這篇文章主要給大家介紹了微信小程序webview中監(jiān)聽返回按鈕的實現(xiàn)步驟,需要的朋友可以參考下

項目場景

微信小程序頁面A跳轉—>webview頁面首頁B跳轉—>webview列表頁C跳轉—>webview詳情頁面D，當在webview詳情頁面D采用router.push 回到---->webview頁面首頁B,此時在B頁面點擊左上角返回按鈕會依次回到，D、C、B頁面，需求是只要處于B頁面點擊左上角按鈕直接返回A頁面。

實現(xiàn)步驟

1.mounted鉤子中監(jiān)聽左上角返回事件

 mounted() {
   // 往history中添加一條記錄
   this.pushHistory()
   //  監(jiān)聽popstate事件
   window.addEventListener('popstate',this.listenPopstate);
 }

2.method中定義方法

 methods: {
    listenPopstate() {
    //  判斷是否在B頁面
      if (this.$route.path==='/accountdetail')
			//  跳轉小程序頁面相關邏輯
      },
     pushHistory() {
      window.history.pushState(null,null,null)
    }
 }

3.頁面銷毀前解綁事件監(jiān)聽

 beforeDestroy() {
   window.removeEventListener('popstate',this.listenPopstate);
   }

總結

到此這篇關于微信小程序webview中監(jiān)聽返回按鈕實現(xiàn)的文章就介紹到這了,更多相關小程序webview監(jiān)聽返回按鈕內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

淺談js中的in-for循環(huán)
下面小編就為大家?guī)硪黄獪\談js中的in-for循環(huán)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
圖文詳解JavaScript的原型對象及原型鏈
許多人對JavaScript的原型及原型鏈仍感到困惑，網上的文章又大多長篇大論，令讀者不明覺厲。下面小編將用最簡潔明了的圖文介紹JavaScript的原型及原型鏈。
2016-08-08
小程序組件傳值和引入sass的方法(使用vant Weapp組件庫)
這篇文章主要介紹了小程序組件傳值和引入sass使用vant Weapp組件庫,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-11-11
js實現(xiàn)轉動骰子模型
這篇文章主要為大家詳細介紹了js實現(xiàn)轉動骰子模型，自動隨機生成骰子數(shù)的模型，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10
JavaScript作用域鏈實例詳解
這篇文章主要介紹了JavaScript作用域鏈,結合實例形式較為詳細的分析了作用域鏈的原理、功能與相關操作注意事項,需要的朋友可以參考下
2019-01-01
js實現(xiàn)簡易的單數(shù)字隨機抽獎（0-9）
這篇文章主要介紹了js實現(xiàn)簡易的單數(shù)字0-9隨機抽獎，可以控制抽取隨機數(shù)開始與停止，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-08-08
JavaScript中輕松獲取頁面參數(shù)值的N種方法(含代碼示例)
本文旨在深入淺出地揭示如何在JavaScript中巧妙提取那些隱藏在URL背后的寶貴信息,從基礎方法到高級技巧,一網打盡,無論你是編程界的菜鳥還是久經沙場的老將,這里都有值得你品鑒的“珍饈”,需要的朋友可以參考下
2024-06-06
Egg Vue SSR 服務端渲染數(shù)據(jù)請求與asyncData
這篇文章主要介紹了Egg Vue SSR 服務端渲染數(shù)據(jù)請求與asyncData，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-11-11
JS點擊縮略圖整屏居中放大圖片效果
今天開發(fā)的時候，遇到要點擊縮略圖之后居中顯示圖片的大圖查看（大致效果如上圖所示）~想了好幾種實現(xiàn)方式,下面通過本文給大家分享JS點擊縮略圖整屏居中放大圖片效果，需要的朋友參考下吧
2017-07-07
詳解JSON.stringify()的5個秘密特性
這篇文章主要介紹了詳解JSON.stringify()的5個秘密特性，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-05-05