如何优雅地实现WKWebView与H5、UniApp的顺畅交互？

2023-01-13 12:29:05

原生应用中 WKWebView 与 H5、UniApp 交互的方案详解

在现代应用程序开发中，原生应用与 Web 视图（如 WKWebView）的交互变得越来越普遍。为了实现无缝通信，了解可用的交互方案至关重要。本文将深入探讨原生应用中 WKWebView 与 H5、UniApp 交互的常见方案，帮助您为自己的项目做出明智的选择。

直接使用系统 API

这种方法使用系统提供的 API，例如 UIWebView 或 WKWebView，直接加载和显示 H5 页面。通过这些 API，您可以与 H5 页面交互，但需要重复处理事件拦截，代码量庞大且可扩展性较差。

拦截事件

通过拦截 H5 页面中的事件（例如点击或加载），您可以实现原生应用与 H5 页面的交互。这种方法可以直接处理 H5 页面事件，但需要在原生应用中实现大量的事件处理逻辑，代码量大且可扩展性差。

自定义协议

使用自定义协议允许您在原生应用和 H5 页面之间发送自定义消息。当 H5 页面需要调用原生应用功能时，它可以发送一个协议，原生应用可以根据其内容执行相应操作。这种方法简单易用，可扩展性强，但需要在原生应用和 H5 页面中实现协议处理逻辑。

桥接

桥接是原生应用与 H5 页面交互的常见方案。它涉及在原生应用中实现一个桥接对象，并将其暴露给 H5 页面。H5 页面可以通过此对象调用原生应用功能。桥接简单易用，可扩展性强，但需要在原生应用和 H5 页面中实现桥接逻辑。

WKWebViewJavaScriptCore

此框架（仅限于 iOS）允许您在原生应用和 H5 页面之间传递数据和调用函数。它简单易用，可扩展性强，但仅适用于 iOS 平台。

WKScriptMessage

WKScriptMessage（仅限于 iOS）是一种用于 JavaScript 交互的消息传递机制。它允许您在原生应用和 H5 页面之间传递消息，简单易用，可扩展性强。

基于 window.postMessage

window.postMessage 方法可用于在原生应用和 H5 页面之间传递数据。它简单易用，可扩展性强，但需要在原生应用和 H5 页面中实现 window.postMessage 逻辑。

非标准通信方法

除了标准方法外，还有非标准通信方法，例如使用 iframe、XMLHttpRequest 等。这些方法简单易用，但兼容性差，可能存在安全问题。

选择合适的交互方案

在选择交互方案时，需要考虑以下因素：

平台： 某些方案仅限于特定平台（例如 WKWebViewJavaScriptCore 仅限于 iOS）。
可扩展性： 某些方案的可扩展性较差（例如拦截事件需要大量的事件处理逻辑）。
兼容性： 某些方案的兼容性较差（例如非标准通信方法可能存在安全问题）。

根据这些因素，您可以为自己的项目选择最合适的交互方案。

示例代码：

Objective-C（桥接）：

- (void)viewDidLoad {
    [super viewDidLoad];
    
    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    configuration.userContentController = [[WKUserContentController alloc] init];
    [configuration.userContentController addScriptMessageHandler:self name:@"bridge"];
    
    WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];
    [self.view addSubview:webView];
    
    [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://example.com"]]];
}

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    // 处理来自 H5 页面的消息
}

JavaScript（桥接）：

window.webkit.messageHandlers.bridge.postMessage({
    action: "callNativeFunction",
    params: {
        functionName: "nativeFunctionName",
        arguments: [
            "argument1",
            "argument2"
        ]
    }
});