小程序内嵌H5页面监听小程序的返回事件

这篇具有很好参考价值的文章主要介绍了小程序内嵌H5页面监听小程序的返回事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

因为业务上有需求,在开发小程序的时候有些页面要使用web-view组件嵌套H5页面

有个页面内有个表单,在表单内容还为填写完成的时候,监听用户点击左上角返回事件,弹出一个提示框,因为H5页面在小程序中的层级很高,所以弹出提示框只能在H5页面内完成,因此要在H5页面内检测小程序的返回事件,其实也就是监听url地址的改变事件

所以在H5页面刚载入的时候,要往window的history对象中加入一条历史记录,可用以下函数完成

const pushHistory = (str = 'title', url = '#') => {
    let state = {
      title: str,
      url: url,
    };
    window.history.pushState(state, state.title, state.url);
  };

这个函数可以往history对象中添加一条历史记录

所以在页面刚载入的时候调用这个函数以添加一条历史记录

pushHistory(document.title, location.href);

并且在页面刚载入的时候要给window添加一个popstate页面url改变事件

window.addEventListener('popstate', async function(e) {
    // 为了避免只调用一次,再次调用一次
    pushHistory(document.title, location.href);

    // 加入业务逻辑
    if(xxx) {
        // 调用微信的返回事件(前提要引入微信的SDK)
        wx.miniProgram.navigateBack();
    } else {
        // 取消返回,阻止默认返回行为
        history.pushState(null, null, location.href);
    }
})

这时候去小程序模拟器运行一下就完成了。文章来源地址https://www.toymoban.com/news/detail-509664.html

到了这里,关于小程序内嵌H5页面监听小程序的返回事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

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

    做了一个app跳转到小程序关注公众号的需求,小程序里面用webview嵌套公众号的H5。 做完我发现左上角它没!有!返!回!键! 然后!我查了好多资料用过双页面跳转让左上角有返回键,但是吧,它确实是有返回键了但是没办法返回到小程序 ,只是在H5内不停的返回在跳转回

    2024年04月12日
    浏览(53)
  • 小程序内嵌H5页面,需要在H5页面进行截图保存和转发给朋友的操作

    首先在H5项目内,你需要下载 weixin-js-sdk 和 html2canvas,weixin-js-sdk 是为了在项目内可以使用wx的一些API, html2canvas 是通过canves画出你页面的base64位图片。 npm install --save weixin-js-sdk npm install --save html2canvas 注意,使用weixin-js-sdk应该是要签名的,这个让后端去生成接口去获得 然后

    2024年02月09日
    浏览(33)
  • 微信小程序内嵌H5页面实现微信支付

    背景: 在微信H5页面已经实现了微信JSAPI的网页支付,老板要求把整个业务线快速转移到微信小程序中,作为懒惰的程序员来说,直接把页面嵌套到小程序不就行了。说干就干,在小程序中设置好基本信息后,一预览居然成功了,一切看来是那么顺利,可到了系统的支付环节

    2024年02月11日
    浏览(61)
  • 微信小程序与内嵌h5页面之间的参数传递

    小程序是采用vue+taroui技术栈 h5页面 所在文件:h5.vue 小程序页面:wx.vue,这里我用的是taro获取当前页面栈,大家可以用wx 这里的this.routerParams==={params:1} 小程序页面:wx.vue,首先向内嵌h5的webview所在页面跳转并携带所传参数。 webview页面—/pages/processLink/index。index.vue,由该页面

    2024年02月15日
    浏览(82)
  • 微信小程序内嵌H5页面获取openid+分享功能

    主要实现功能:1.通过webview实现小程序内嵌H5页面                          2.在H5页面获取到用户的openid                          3.在H5页面实现分享获取到分享人的openid和被分享者的openid 代码实现: 1.通过webview实现小程序内嵌H5页面 传参:在地址后面加入的参数就是我

    2024年04月23日
    浏览(64)
  • 微信小程序内嵌h5页面,实现动态设置顶部标题的功能

    一、需求描述 使用HBuilder X作为开发工具,vue作为开发语言,开发微信小程序。微信小程序页面内嵌h5页面,即web-view/web-view标签。通过设置不同url连接地址,设置不同的标题。 二、失败做法 页面A嵌入h5页面,需要给A设置标题。最开始写法是在lonload页面内,使用如下语句实现

    2024年02月04日
    浏览(75)
  • uniapp实现微信小程序内嵌h5页面的相互跳转

    前期准备3个页面,小程序内2个,h5一个。 小程序内:操作页pageA,展示容纳h5的展示页PageWebview.vue。 h5:h5页面pageB,并且有可以访问的线上url。 【微信小程序pageA-内嵌h5页面pageB】 1.1 pageA实现点击跳转,将pageB的访问地址url拼接,并进入展示页PageWebview.vue 1.2 PageWebview.vue页面用

    2024年02月12日
    浏览(69)
  • H5页面内嵌到微信小程序和APP,做分享操作

    最近接到项目新需求,H5项目需要内嵌到微信小程序和APP里,然后将H5页面分享出去,被分享的人可以点击消息跳转到H5页面。H5页面不难,难的是要与微信小程序和APP进行交互,因为以前也没有接触过,所以这里卡的时间有点长。现分享出来 介绍 这里小编使用的是 uinapp 写的

    2024年02月06日
    浏览(198)
  • uniapp+微信小程序监听返回事件

    代码附在最后 适用场景: uniapp开发微信小程序 需求是我点击列表进入数据信息的详情界面,点击详情界面的收藏,返回上一界面后,更新列表中的收藏情况。 目录 一、使用onUnload监听页面卸载 二、使用getCurrentPages()获取当前页面栈所有的实例,并找到上一界面的实例进行数

    2024年02月04日
    浏览(51)
  • 支付宝小程序内嵌H5——支付宝小程序webview里面h5跳回道支付宝小程序页面

    背景 小程序开发避免不了要和h5交互,怎么和h5互通信息呢? 代码 1、h5页面手动引入 https://appx/web-view.min.js (此链接仅支持在支付宝客户端内访问);

    2024年02月12日
    浏览(58)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包