H5页面跳转设置之小程序跳转web-viewt指定页面不刷新，解决记录

前端

2022-11-23 14:21:33

彻底攻克小程序跳转 H5 页面不刷新难题

在小程序开发中，跳转到 H5 页面是一个常见操作。但你有没有遇到过这样的问题：返回小程序页面时，H5 页面没有刷新，显示的是上一次加载的内容？这种现象不仅影响用户体验，更可能带来数据显示错误等问题。

今天，我们将深入剖析 H5 页面跳转设置的本质，为你提供一种简单实用的解决方案，帮你彻底解决小程序跳转 H5 页面不刷新的难题。

问题根源：历史记录作祟

小程序中的 WebView 组件负责加载 H5 页面。当我们通过小程序跳转到 H5 页面时，WebView 会记录下当前页面的历史记录。返回小程序页面时，WebView 会从历史记录中加载上一个 H5 页面，而不是重新加载。

解决方案：后退再跳转，清除历史

为了解决这个问题，我们需要做的就是清除 WebView 的历史记录。在返回小程序页面之前，先使用 wx.navigateBack() 方法后退一步，然后再使用 window.location.href 属性跳转到新的 H5 页面。

这样做的好处是，后退操作会清空 WebView 的历史记录，而跳转到新页面则会重新加载页面。这样，返回小程序页面时，H5 页面就会重新加载，从而解决不刷新问题。

具体代码示例：

小程序端（js）：

wx.navigateBack({
  delta: 1
})

H5 端（html）：

<script>
window.location.href = "https://example.com/new-page.html";
</script>

注意事项

添加时间戳： 在 H5 页面中跳转到新的页面时，建议添加一个时间戳作为参数。这可以防止浏览器缓存页面，确保每次加载的都是最新版本。
使用 wx.navigateTo() 方法： 在小程序中跳转到 H5 页面时，请务必使用 wx.navigateTo() 方法，而不是 wx.redirectTo() 方法。只有 wx.navigateTo() 方法才能保证页面跳转成功。

常见问题解答

Q1：为什么使用 delta: 1？
A1：delta 参数表示后退的页面数。设置为 1 表示后退一步，即返回上一个页面。

Q2：可以一次性后退多个页面吗？
A2：可以，将 delta 参数设置为要后退的页面数即可。例如，delta: 2 表示后退两个页面。

Q3：这种方法适用于所有 H5 页面吗？
A3：是的，只要使用 WebView 组件加载 H5 页面，都可以使用这种方法解决不刷新问题。

Q4：如果 H5 页面上有 hash 锚点怎么办？
A4：如果 H5 页面上有 hash 锚点，需要在 window.location.href 属性中带上 hash 锚点，例如：window.location.href = "https://example.com/new-page.html#anchor"。

Q5：还有其他解决方法吗？
A5：除了后退再跳转的方法，还有其他一些解决方法，例如：