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

最新推荐文章于 2024-08-22 16:16:39 发布

孙大大啊

最新推荐文章于 2024-08-22 16:16:39 发布

阅读量4.8k

点赞数 1

分类专栏：微信小程序文章标签：小程序前端 javascript

本文链接：https://blog.csdn.net/szw2377132528/article/details/129353706

版权

微信小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在开发小程序时，当使用web-view组件加载H5页面，需要监听用户未完成表单时点击返回的事件。通过在H5页面中添加历史记录并监听popstate事件，可以捕捉到返回操作。在事件触发时，可以选择调用微信SDK的navigateBack方法或阻止默认返回行为。

摘要由CSDN通过智能技术生成

因为业务上有需求，在开发小程序的时候有些页面要使用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);
    }
})

这时候去小程序模拟器运行一下就完成了。