微信小程序webview中监听返回按钮实现步骤
作者：略吃一二
在微信小程序中webview返回键是一个非常实用的功能,它允许用户在嵌入的网页中返回到上一个页面,这篇文章主要给大家介绍了微信小程序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);
}
2.method中定义方法
methods: {
listenPopstate() {
// 判断是否在B页面
if (this.$route.path==='/accountdetail')
// 跳转小程序页面相关逻辑
},
pushHistory() {
window.history.pushState(null,null,null)
}
}
3.页面销毁前解绑事件监听
beforeDestroy() {
window.removeEventListener('popstate',this.listenPopstate);
}总结
到此这篇关于微信小程序webview中监听返回按钮实现的文章就介绍到这了,更多相关小程序webview监听返回按钮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！