原生 WebView 内 H5 页面跳转：新 WebView 还是旧 WebView？如何控制通信？

在原生应用中，通常会使用 WebView 来加载和展示 H5 页面。当用户在 H5 页面内进行跳转时，开发者需要考虑是否需要新开一个 WebView 来加载新的 H5 页面，以及如何控制两个 WebView 之间的通信。

新开 WebView 还是旧 WebView？

通常情况下，建议在新页面跳转时使用新的 WebView。这主要出于以下几个原因：

隔离性： 新开 WebView 可以更好地隔离不同 H5 页面之间的状态和数据，避免相互影响。
性能： 新开 WebView 可以利用系统缓存，减少页面加载时间。
安全： 新开 WebView 可以更好地控制页面加载和运行环境，防止恶意代码注入。

当然，也有一些情况下可以考虑在旧 WebView 中加载新页面，例如：

单页面应用： 对于单页面应用，可以通过 URL 变化来实现页面切换，无需新开 WebView。
页面内容简单： 如果新页面内容非常简单，可以直接在旧 WebView 中加载，无需新开 WebView。

如何控制两个 WebView 之间的通信？

当使用多个 WebView 时，需要考虑如何控制它们之间的通信。常用的方法是使用 JSBridge，它可以实现 Native 代码与 WebView 内的 JavaScript 代码之间的双向通信。

大厂 JSBridge-SDK 解决方案

以下是大厂提供的 JSBridge-SDK 解决方案，可以帮助开发者实现 WebView 内 H5 页面之间的通信：

| 公司 | 解决方案 | 说明 | |---|---|---| | | 阿里 | AlipayJSBridge | 用于实现 WebView 内 H5 页面之间的通信，支持 H5 调用 Native 的 API、Native 调用 H5 的 API、H5 与 Native 之间的事件通知等。 | | 腾讯 | WeixinJSBridge | 用于实现 WebView 内 H5 页面之间的通信，支持 H5 调用 Native 的 API、Native 调用 H5 的 API、H5 与 Native 之间的事件通知等。 | | 美团 | MTJSBridge | 用于实现 WebView 内 H5 页面之间的通信，支持 H5 调用 Native 的 API、Native 调用 H5 的 API、H5 与 Native 之间的事件通知等。 | | 百度 | BaiduJSBridge | 用于实现 WebView 内 H5 页面之间的通信，支持 H5 调用 Native 的 API、Native 调用 H5 的 API、H5 与 Native 之间的事件通知等。 |

阿里 AlipayJSBridge

在 H5 页面中引入 AlipayJSBridge SDK：

<script src='https://appx/web-view.min.js'></script>

在 H5 页面中调用 AlipayJSBridge 提供的接口：

// H5 调用 Native 的 API
AlipayJSBridge.call('apiName', {param: 'value'}, function(result){
  // 处理结果
});

// Native 调用 H5 的 API
AlipayJSBridge.on('eventName', function(data){
  // 处理数据
});

// H5 向 Native 发送事件通知
AlipayJSBridge.emit('eventName', {data: 'value'});

腾讯 WeixinJSBridge

在 H5 页面中引入 WeixinJSBridge SDK：

<script src='https://res.wx.qq.com/open/js/jweixin-1.4.0.js'></script>

在 H5 页面中调用 WeixinJSBridge 提供的接口：

// H5 调用 Native 的 API
WeixinJSBridge.invoke('apiName', {param: 'value'}, function(result){
  // 处理结果
});

// Native 调用 H5 的 API
WeixinJSBridge.on('eventName', function(data){
  // 处理数据
});

// H5 向 Native 发送事件通知
WeixinJSBridge.invoke('eventName', {data: 'value'});

美团 MTJSBridge

在 H5 页面中引入 MTJSBridge SDK：

<script src='https://s0.meituan.net/bs/js/?f=mt-bridge:mt-bridge.js'></script>

在 H5 页面中调用 MTJSBridge 提供的接口：

// H5 调用 Native 的 API
mtBridge.call('apiName', {param: 'value'}, function(result){
  // 处理结果
});

// Native 调用 H5 的 API
mtBridge.on('eventName', function(data){
  // 处理数据
});

// H5 向 Native 发送事件通知
mtBridge.emit('eventName', {data: 'value'});

百度 BaiduJSBridge

在 H5 页面中引入 BaiduJSBridge SDK：

<script src='https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.5.js'></script>

在 H5 页面中调用 BaiduJSBridge 提供的接口：

// H5 调用 Native 的 API
swan.call('apiName', {param: 'value'}, function(result){
  // 处理结果
});

// Native 调用 H5 的 API
swan.on('eventName', function(data){
  // 处理数据
});

// H5 向 Native 发送事件通知
swan.emit('eventName', {data: 'value'});

总结

本文详细分析了原生 WebView 内 H5 页面跳转的最佳实践，以及如何使用 JSBridge 来控制多个 WebView 之间的通信。开发者可以根据实际需求选择合适的方案。

原生 WebView 内 H5 页面跳转：新 WebView 还是旧 WebView？如何控制通信？