项目场景及问题描述:
做了一个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://www.toymoban.com/news/detail-848374.html
思路来源:
监听返回事件思路来源:https://blog.csdn.net/m0_47791238/article/details/131340145文章来源地址https://www.toymoban.com/news/detail-848374.html
最后最后!感谢上述文章博主的帮助!也希望本篇博客可以帮助到大家。
到了这里,关于微信小程序webview跳转页面后没有返回按钮以及变向解决H5安卓无法监听popstate问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!