项目场景及问题描述：

做了一个app跳转到小程序关注公众号的需求，小程序里面用webview嵌套公众号的H5。

做完我发现左上角它没！有！返！回！键！

然后！我查了好多资料用过双页面跳转让左上角有返回键，但是吧，它确实是有返回键了但是没办法返回到小程序 ，只是在H5内不停的返回在跳转回来。

再然后！我做了一个监H5浏览器返回，iOS展示完美，但是在安卓上不生效，也就是说在安卓无法监听popstate 。

再再然后！我查了好多资料发现这个问题是微信浏览器的问题，且三四年前就有了，现在还没有解决，安卓上必须与当前页面产生交互才可以监听到popstate，在当前页面点击一下或滑动浏览，就可以监听到了。

再再再然后！我发现了一个很简单的解决方法…

目前已达到效果

IOS系统： 左上角有小房子可返回首页，监听返回右滑手势退出到首页。

安卓系统： 左上角有小房子可返回首页，当前页面产生交互可右滑手势退出到首页。

解决方案

1. 监听H5浏览器返回事件

H5页面代码：

1.1 安装小程序SDK：

npm install weixin-js-sdk –save

1.1 main.js引入SDK：

import wx from 'weixin-js-sdk';// 我这边是公众号 所以这样挂载app.config.globalProperties.wx = wx;

1.2 webview嵌套的页面代码：

created () { let that = this // 监听返回 this.pushHistory() window.addEventListener( 'popstate', function(e) { //为了避免只调用一次 that.pushHistory('title1') that.goBack() }, false )},methods:{ pushHistory(str = 'title', url = '#') { let state = { title: str, url, } window.history.pushState(state, state.title, state.url) }, goBack() { this.wx.miniProgram.reLaunch({ url: '/pages/index/index' }) },}

2. 安卓手机左上角显示返回首页键

这个问题比较简单，单纯就是想法错了。

最开始webview.json是如下写法：

{ "navigationStyle": "custom", "disableScroll": true}

如上写法是为了去掉导航栏直接使用H5里面的title，但是！这个写法安卓手机左上角没有按键是空白的。

正常写法：

{ "navigationBarTitleText": "这是一个title"}

如此安卓手机左上角就会有一个返回主页的小房子按钮了。

这样写虽然不产生交互还是无法右滑返回，但是起码左上角还有一个可是返回主页的按钮，要比在当前页面退不出去要好很多，也算是变向解决了安卓无法监听popstate问题。

思路来源：

监听返回事件思路来源：https://blog.csdn.net/m0_47791238/article/details/131340145

最后最后！感谢上述文章博主的帮助！也希望本篇博客可以帮助到大家。