微信小程序webview中监听返回按钮_微信小程序监听返回事件

项目场景

微信小程序页面A跳转—>webview页面首页B跳转—>webview列表页C跳转—>webview详情页面D，当在webview详情页面D采用router.push 回到---->webview页面首页B,此时在B页面点击左上角返回按钮会依次回到，D、C、B页面，需求是只要处于B页面点击左上角按钮直接返回A页面。

一、实现步骤

1.mounted钩子中监听左上角返回事件

 mounted() {
   // 往history中添加一条记录
   this.pushHistory()
   //  监听popstate事件
   window.addEventListener('popstate',this.listenPopstate);
 }
1
2
3
4
5
6

2.method中定义方法

 methods: {
    listenPopstate() {
    //  判断是否在B页面
      if (this.$route.path==='/accountdetail')
			//  跳转小程序页面相关逻辑
      },
     pushHistory() {
      window.history.pushState(null,null,null)
    }
 }
1
2
3
4
5
6
7
8
9
10

3.页面销毁前解绑事件监听

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