微信小程序使用webview实现左上角返回按钮一次性返回小程序的技巧

在微信小程序中巧妙解决 Webview 返回问题

序言

在微信小程序开发中，Webview 是一个强大的工具，可用于加载外部网页内容。然而，当在 Webview 中进行多次页面跳转后，点击返回按钮时可能会遇到问题，导致无法返回小程序本身。本文将深入探讨这一问题，并提供一个优雅的解决方案，帮助您轻松解决此问题。

Webview 返回问题

当您在 Webview 中打开一个网页并进行多次跳转时，每次跳转都会在浏览器的历史记录中创建一个新的条目。当您点击返回按钮时，Webview 会逐个返回这些历史记录条目。这意味着如果您进行了多次跳转，您需要多次点击返回按钮才能返回小程序。

解决方案

为了解决此问题，我们可以利用 Webview 的 popstate 事件。当用户在 Webview 中按下返回按钮时，将触发此事件。我们可以利用此事件，在 Webview 目标页面的 H5 代码中添加以下代码：

window.addEventListener('popstate', function(e) {
  if (e.state && e.state.returnToMiniProgram) {
    wx.miniProgram.navigateBack();
  }
});

这段代码的作用是，当 Webview 页面发生回退时，如果该页面的 state 对象中包含 returnToMiniProgram 属性，则直接调用 wx.miniProgram.navigateBack() 方法返回小程序。

实现步骤

以下是如何实现这一解决方案的步骤：

1. 在 Webview 目标页面添加代码： 将提供的 JavaScript 代码添加到 Webview 目标页面的 H5 代码中。
2. 在小程序页面添加代码： 在 Webview 所在小程序页面的 onLoad() 方法中，添加以下代码：

wx.miniProgram.setNavigationBarTitle({
  title: 'Webview 标题'
});

此代码可设置 Webview 页面的标题。
3. 在小程序页面添加返回功能： 在 Webview 所在小程序页面的 onLoad() 方法中，添加以下代码：

wx.miniProgram.navigateBack({
  delta: 1
});

此代码可实现点击返回按钮返回小程序的功能。

自定义设置

除了提供基本解决方案外，您还可以根据需要进行自定义设置：

• 自定义返回按钮样式： 您可以通过调用 wx.miniProgram.setNavigationBarButtonStyle() 方法来自定义返回按钮的样式，例如颜色和背景色。
• 自定义返回按钮文案： 您可以通过调用 wx.miniProgram.setNavigationBarTitle() 方法来自定义返回按钮的文案，例如将“返回”更改为其他文本。

结论

通过利用 Webview 的 popstate 事件和 wx.miniProgram.navigateBack() 方法，我们可以轻松解决微信小程序中 Webview 返回问题。通过自定义设置，您还可以根据需要进一步调整返回功能，以满足您的具体需求。

常见问题解答

问：为什么在 Webview 中跳转后无法返回小程序？
答：这是由于 Webview 在浏览器的历史记录中创建了多个条目，因此需要多次点击返回按钮才能返回小程序。

问：如何解决 Webview 返回问题？
答：您可以通过在 Webview 目标页面的 H5 代码中添加提供的 JavaScript 代码来解决此问题。

问：如何自定义返回按钮样式？
答：您可以调用 wx.miniProgram.setNavigationBarButtonStyle() 方法来自定义返回按钮的样式，例如颜色和背景色。

问：如何自定义返回按钮文案？
答：您可以调用 wx.miniProgram.setNavigationBarTitle() 方法来自定义返回按钮的文案，例如将“返回”更改为其他文本。

问：除了提供的解决方案外，还有其他方法可以解决 Webview 返回问题吗？
答：没有其他直接的方法，但您可以使用替代解决方案，例如在 Webview 中加载小程序页面，或使用原生小程序开发。