uniapp webview 物理返回如何实现

在uniapp中使用了webview加载H5页面，当用户点击安卓物理返回键时，如何让返回键优先关闭webview而不是直接退出整个应用？目前测试发现返回键会直接退出APP，而不是先关闭webview页面。请问有什么方法可以监听物理返回键并控制其行为，让webview能像普通页面一样正常返回？

2 回复

在uniapp中，webview物理返回可通过监听onBackPress实现。在页面生命周期中判断当前页面是否为webview，若是则执行webview内部返回，否则返回上一页。


在 UniApp 中，Webview 的物理返回键默认会直接退出应用，而不是返回 Webview 的上一个页面。要实现物理返回键控制 Webview 内部页面导航，可以通过监听返回键事件并调用 Webview 的 evalJS 方法执行 JavaScript 代码来实现。以下是具体步骤和示例代码：

实现步骤：

  1. 创建 Webview 组件：在页面中嵌入 Webview。
  2. 监听返回键事件：使用 onBackPress 生命周期函数。
  3. 执行 Webview 内部导航：通过 evalJS 调用 Webview 页面的 history.back() 方法。
  4. 阻止默认退出行为：如果 Webview 可以返回，则阻止应用退出。

示例代码：

// 在页面脚本中（如 pages/webview/webview.vue）
export default {
  data() {
    return {
      webview: null // 用于存储 Webview 实例
    };
  },
  onReady() {
    // 获取 Webview 实例
    this.webview = plus.webview.currentWebview().children()[0];
  },
  onBackPress() {
    if (this.webview) {
      // 执行 Webview 内部的返回操作
      this.webview.evalJS("history.length > 1 && history.back();");
      // 阻止默认返回行为（退出应用）
      return true;
    }
  }
};

注意事项：

  • Webview 实例获取：确保在 onReady 生命周期中获取 Webview 对象，避免过早获取导致 null。
  • 历史记录判断：通过 history.length > 1 检查是否有上一页，避免在首页时无法返回。
  • 兼容性：此方法依赖 Webview 页面的 history API，适用于标准网页。如果是单页应用（SPA），可能需要调整逻辑。

完整页面结构示例（Vue 文件）：

<template>
  <view>
    <web-view :src="url" @onPostMessage="handleMessage"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com',
      webview: null
    };
  },
  onReady() {
    // 获取内嵌 Webview 组件实例
    const current = plus.webview.currentWebview();
    this.webview = current.children()[0];
  },
  onBackPress() {
    if (this.webview) {
      this.webview.evalJS("if (history.length > 1) { history.back(); }");
      return true; // 阻止默认返回
    }
  }
};
</script>

说明：

  • 通过 onBackPress 返回 true 来拦截物理返回键，避免直接退出应用。
  • evalJS 方法用于在 Webview 中执行 JavaScript 代码，实现内部页面导航。
  • 如果 Webview 无法返回（例如在首页），则不会阻止默认行为，应用会正常退出。

此方法简单有效，适用于大多数 Webview 返回需求。如有特殊逻辑（如自定义导航），可在此基础上扩展。

回到顶部