項(xiàng)目場景及問題描述：
做了一個(gè)app跳轉(zhuǎn)到小程序關(guān)注公眾號(hào)的需求，小程序里面用webview嵌套公眾號(hào)的H5。
做完我發(fā)現(xiàn)左上角它沒！有！返！回！鍵！
然后！我查了好多資料用過雙頁面跳轉(zhuǎn)讓左上角有返回鍵，但是吧，它確實(shí)是有返回鍵了但是沒辦法返回到小程序 ，只是在H5內(nèi)不停的返回在跳轉(zhuǎn)回來。
再然后！我做了一個(gè)監(jiān)H5瀏覽器返回，iOS展示完美，但是在安卓上不生效，也就是說在安卓無法監(jiān)聽popstate 。
再再然后！我查了好多資料發(fā)現(xiàn)這個(gè)問題是微信瀏覽器的問題，且三四年前就有了，現(xiàn)在還沒有解決，安卓上必須與當(dāng)前頁面產(chǎn)生交互才可以監(jiān)聽到popstate，在當(dāng)前頁面點(diǎn)擊一下或滑動(dòng)瀏覽，就可以監(jiān)聽到了。
再再再然后！我發(fā)現(xiàn)了一個(gè)很簡單的解決方法…
目前已達(dá)到效果
IOS系統(tǒng)： 左上角有小房子可返回首頁，監(jiān)聽返回右滑手勢退出到首頁。
安卓系統(tǒng)： 左上角有小房子可返回首頁，當(dāng)前頁面產(chǎn)生交互可右滑手勢退出到首頁。
解決方案
1. 監(jiān)聽H5瀏覽器返回事件
H5頁面代碼：
1.1 安裝小程序SDK：
npm install weixin-js-sdk –save
1.1 main.js引入SDK：
import wx from 'weixin-js-sdk';
// 我這邊是公眾號(hào) 所以這樣掛載
app.config.globalProperties.wx = wx;
1.2 webview嵌套的頁面代碼：
created () {
let that = this
// 監(jiān)聽返回
this.pushHistory()
window.addEventListener(
'popstate',
function(e) {
//為了避免只調(diào)用一次
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. 安卓手機(jī)左上角顯示返回首頁鍵
這個(gè)問題比較簡單，單純就是想法錯(cuò)了。
最開始webview.json是如下寫法：
{
"navigationStyle": "custom",
"disableScroll": true
}
如上寫法是為了去掉導(dǎo)航欄直接使用H5里面的title，但是！這個(gè)寫法安卓手機(jī)左上角沒有按鍵是空白的。
正常寫法：
{
"navigationBarTitleText": "這是一個(gè)title"
}
如此安卓手機(jī)左上角就會(huì)有一個(gè)返回主頁的小房子按鈕了。
這樣寫雖然不產(chǎn)生交互還是無法右滑返回，但是起碼左上角還有一個(gè)可是返回主頁的按鈕，要比在當(dāng)前頁面退不出去要好很多，也算是變向解決了安卓無法監(jiān)聽popstate問題。文章來源：http://www.zghlxwxcb.cn/news/detail-848374.html
思路來源：
監(jiān)聽返回事件思路來源：https://blog.csdn.net/m0_47791238/article/details/131340145文章來源地址http://www.zghlxwxcb.cn/news/detail-848374.html
最后最后！感謝上述文章博主的幫助！也希望本篇博客可以幫助到大家。
到了這里，關(guān)于微信小程序webview跳轉(zhuǎn)頁面后沒有返回按鈕以及變向解決H5安卓無法監(jiān)聽popstate問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
