微信小程序webview跳转页面后没有返回按钮以及变向解决H5安卓无法监听popstate问题

这篇具有很好参考价值的文章主要介绍了微信小程序webview跳转页面后没有返回按钮以及变向解决H5安卓无法监听popstate问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目场景及问题描述:

做了一个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文章来源地址https://www.toymoban.com/news/detail-848374.html

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

到了这里,关于微信小程序webview跳转页面后没有返回按钮以及变向解决H5安卓无法监听popstate问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序【button按钮页面跳转】两种方式

    首先,微信开发者工具打开是这个样子的   红框的设置如下 第一种方式:新建component(组件) 只用输入一次就会出现,四个文件,form.js,form.wxss,form.wxml,form.json 在index.js文件中出现,建立在methods:{}里面  第二种方式:直接建立页面,两种方式,index.js中设置是不一样的

    2024年02月11日
    浏览(44)
  • 微信小程序扫一扫左上角按钮返回指定页面

           微信小程序官方文档中有两个参数,success就是正常扫一扫之后要执行的操作,如果进入到扫一扫页面想要点击左上角返回指定页面,可以在fail中书写页面跳转。  

    2024年02月16日
    浏览(45)
  • 小程序webview嵌入的H5页面,点击按钮,返回小程序的指定页面

    今天弄了一个活动,首先从小程序进入webview里的H5页面,然后H5页面里有个按钮,点击后需要跳转到小程序的注册页。那么,H5那边该怎么实现呢? 因为已经进入小程序环境了,所以实现起来相对单纯的H5跳小程序比较简单 npm install --save weixin-js-sdk

    2024年02月16日
    浏览(45)
  • 微信小程序中的页面跳转(通过点击按钮、调用方法的形式)

    页面跳转用的多吧、tabBar的空间有限。通过路由的方式跳转时Vue中常用的方式、小程序采用类似的做法。 – 这里通过给按钮绑定点击事件、调用方法、方法中实现页面跳转。(其它方式暂不考虑) 小程序之页面跳转 注意: this.pageRouter.navigateTo 代替 wx.navigateTo 是更优的 log

    2024年02月11日
    浏览(43)
  • 微信小程序--操作微信自带的返回按钮使上个页面刷新列表或刷新数据

    首先要了解什么是 页面栈 ------------ 框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候,页面栈的表现如下: 路由方式 页面栈表现 初始化 新页面入栈 打开新页面 新页面入栈 页面重定向 当前页面出栈,新页面入栈 页面返回 页面不断出栈,直到目标返回页

    2024年02月13日
    浏览(37)
  • 微信小程序 表单 选择跳转新页面,选择后,返回上一页面保留原页面已填写的值

    场景: 表单页有很多项需要填写,个别项数据较多,需要跳转到新的页面去选择后,带着结果返回。如图。 此时,想要返回时,已经填写过的内容保留不变,不被清空。 解决: 在下一页去获取上一页data中的数据,并修改,再通过 wx.navigateBack({ delta: 1, }) 返回上一页,页面不

    2024年02月12日
    浏览(28)
  • uniapp微信小程序全局所有页面放置一个跳转首页的可以拖动的悬浮按钮

    把上面的静态解构放到src/components/movable/movable.vuewe文件作为自定义组件 此处用的到时uniapp的movable-area组件和内嵌 movable-view 组件,其中movable-area表示可拖动的范围,movable-view用于指示可拖动的区域。 参照文档:movable-area | uni-app官网     movable-view | uni-app官网 想要实现每个页

    2024年02月03日
    浏览(36)
  • 微信小程序:navigateTo页面跳转与navigateBack返回上一页,并执行相关操作

     A页面:执行方法fn,跳转到B页面         跳转方法采用 wx.navigateTo ,跳转到新的页面,保留当前页面 B页面(路径为pages/test/test的页面): ①在某一方法中执行返回操作 wx.navigateBack({     delta: 1 }) ②刷新上一个页面 prevPage.onLoad(); ③调用上一个页面的设置值得方法  p

    2024年02月12日
    浏览(45)
  • uniapp webview H5跳转微信小程序

    第一步:manifest.json 第二步:index.html 第三步 H5跳转微信小程序代码

    2024年02月10日
    浏览(36)
  • 微信小程序 隐藏home返回主页按钮,显示返回按钮

    使用 wx.redirectTo 跳转页面,会得到 home/返回主页 按钮,如下: 使用 wx.navigateTo 跳转页面,会得到 返回上一页 按钮,如下: 在页面 onShow 中调用 wx.hideHomeButton 即可。 注意事项: 基础库 2.8.3 开始支持,低版本需做兼容处理。建议简单粗暴的将小程序的最低版本设置为2.8.3版本

    2024年04月24日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包