uniapp的微信公众号h5项目，tabbar页面监听物理返回键，在数据请求回来之前返回会刷新页面。

我用uniapp写了一个公众号h5,我有一个tabbar页面（我的），这个页面的show是这样的

async onShow() {
let data = await this.getExpend()
this.$historyUrl()
window.addEventListener('popstate', this.back, false);
}

问题是这样的： 我从我的页面跳转到个人信息页面，然后返回到我的页面，我的页面数据请求回来之前我按物理返回按钮，页面会刷新，我再返回就直接退出了。 刷新之后再返回直接退出的原因是页面刷新了，在公众号h5安卓里面，你要有交互才能触发popstate，我没交互所以直接退出了，但是为什么我在数据请求返回之前按物理返回键会刷新页面？back函数也阻止了默认行为。数据请求回来之后再按物理返回是正常的，目前只在tabbar页面发现这个问题。

解决了，原因是监听popstate在await后面，数据没请求回来就返回的话是还没有addEventListener，所以监听不了

这个问题可能与页面的缓存机制有关。当跳转到个人信息页面后，浏览器可能会将我的页面缓存在内存中，以便在返回时快速呈现该页面。然而，在此期间，如果页面数据还没有加载完成，当按下物理返回按钮时，浏览器可能会重新加载该页面，因为它无法从缓存中获取完整的页面内容。

可以尝试使用，在页面加载期间显示一个加载动画或进度条，表示数据正在加载中。或者，可以使用前端路由框架来管理浏览器历史记录。应该确保所有JavaScript代码都执行完毕并且页面数据已经完全加载之后再进行任何导航或刷新操作。

作为一名资深的IT专家,我可以尝试回答这个问题。

问题标题: uniapp的微信公众号h5项目,tabbar页面监听物理返回键,在数据请求回来之前返回会刷新页面。

解决方案:

首先,我们需要了解uniapp的微信公众号h5项目,它是用于开发微信公众号的前端框架。在这个项目中,我们需要监听物理返回键,以便在用户点击返回按钮时执行一些操作。

接下来,我们需要了解浏览器如何响应物理返回键。一般情况下,当用户在浏览器中点击返回按钮时,浏览器会触发一个物理按键事件,并传递一个返回键值给服务器。服务器会根据这个返回键值来判断是否需要返回数据,如果需要返回数据,服务器会发送请求并获取数据,然后返回给浏览器。

然而,在某些情况下,浏览器可能会执行刷新操作。这是因为当用户点击返回按钮时,浏览器会重新加载整个页面,包括标签、元素等,以便重新渲染页面。因此,我们需要在监听物理返回键时,也监听浏览器刷新事件,以便在浏览器执行刷新操作时执行相应的操作。

为了实现这个操作,我们可以在tabbar页面中添加一个监听器,以便在用户点击返回按钮时触发一个事件,然后根据事件类型执行相应的操作。

下面是一些示例代码:

<button id="return-button">返回</button>

const returnButton = document.getElementById('return-button');
returnButton.addEventListener('click', function () {
  const event = new MouseEvent('return-button-event');
  const returnUrl = event.searchParams.get('url');
  const session = new XMLHttpRequest();
  session.open(returnUrl, function () {
    session.onload = function () {
      // 执行操作
    };
  });
});

在这个示例中,我们使用MouseEvent来监听用户点击返回按钮时触发的事件。在事件处理函数中,我们获取用户点击的返回按钮的URL,并使用XMLHttpRequest来发送数据请求。

希望这些代码能够帮助你解决该问题。