小程序内嵌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);
    }
})

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