Uniapp WebView 的便捷关闭，解放你的开发之手！

2023-08-16 11:05:56

在 Uniapp 中关闭 WebView：两种简洁优雅的方案

在 Uniapp 开发中，WebView 组件的使用非常常见。然而，有时你可能需要在 WebView 中关闭外部链接或第三方页面。针对这一需求，我们为你提供了两种简单快捷的方案。

方案一：原生关闭 WebView 方法

此方案适用于需要关闭 WebView 页面的场景。

准备工作： 在 JavaScript 端创建一个自定义方法，以便与原生端通信。我们将其命名为 "closeWebView"。

// JavaScript 端自定义方法
function closeWebView() {
  // 调用原生方法关闭 WebView
  uni.invokeNative('closeWebView');
}

Uniapp 项目集成： 在需要关闭 WebView 页面的组件中，添加如下代码：

// 在某个需要关闭 WebView 页面的组件中
import { uni } from '@dcloudio/uni-mp-weixin';
mounted() {
  // 绑定自定义方法到某个事件，如点击按钮时
  this.$refs.closeBtn.addEventListener('click', () => {
    closeWebView();
  });
},

方案二：NavigatorAPI 关闭 WebView

此方案适用于需要关闭 WebView 页面的场景，且更适合需要在多个 WebView 之间切换的复杂场景。

引入 NavigatorAPI： 在项目中导入 NavigatorAPI 插件。

// 在 main.js 中导入 NavigatorAPI
import NavigatorAPI from '@dcloudio/uni-navigator-api';
Vue.use(NavigatorAPI);

调用 NavigatorAPI： 在需要关闭 WebView 页面的组件中，使用以下代码：

// 在某个需要关闭 WebView 页面的组件中
export default {
  methods: {
    closeWebView() {
      // 调用 NavigatorAPI 关闭 WebView
      this.$navigator.closeWebView();
    },
  },
};