WKWebView中JS调用Swift方法时，如何处理回调函数返回值？

Question

在WKWebView中，如何实现JS调用Swift方法并正确处理回调函数返回值？当JavaScript通过`window.webkit.messageHandlers`调用Swift代码时，如果需要返回结果给JS，该如何设计通信机制？由于WKWebView的JS与Swift交互是单向的（JS触发Swift，但Swift不能直接返回值给JS），我们通常使用回调函数的方式解决。例如，在JS中传递一个唯一的标识符或回调名称到Swift，Swift处理完成后通过`webView.evaluateJavaScript`将结果回调给JS。如何确保回调的安全性、避免内存泄漏，并支持多个并发回调？此外，若Swift方法为异步操作，如何优雅地等待其完成并将结果返回给JS？这些问题都需要仔细设计消息队列和回调管理机制。

Answer 1

1. 基础概念：WKWebView 中 JS 和 Swift 的交互机制

在 WKWebView 中，JavaScript 通过 `window.webkit.messageHandlers` 调用 Swift 方法是一种常见的交互方式。然而，这种交互本质上是单向的——JS 可以调用 Swift 方法，但 Swift 无法直接返回值给 JS。

为了解决这一问题，通常采用回调函数的方式，即在 JS 中传递一个唯一的标识符或回调名称到 Swift，Swift 处理完成后通过 `webView.evaluateJavaScript` 将结果回调给 JS。

• 基础交互流程：JS 调用 Swift -> Swift 处理 -> Swift 使用 `evaluateJavaScript` 回调 JS。
• 关键点：确保回调的安全性、避免内存泄漏，并支持多个并发回调。

2. 设计通信机制：如何管理回调函数

为了实现安全且高效的回调管理，可以设计一个基于字典的消息队列系统。以下是具体步骤：

1. 在 Swift 中维护一个字典，用于存储回调标识符与对应的回调处理逻辑。
2. 当 JS 调用 Swift 时，传递一个唯一的回调标识符（如 UUID）。
3. Swift 在完成处理后，根据标识符找到对应的回调逻辑，并通过 `evaluateJavaScript` 返回结果。

class WebViewManager: NSObject, WKScriptMessageHandler {
    private var callbackMap = [String: (Any?) -> Void]()

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        guard let body = message.body as? [String: Any],
              let callbackId = body["callbackId"] as? String else { return }

        // 存储回调逻辑
        callbackMap[callbackId] = { result in
            self.webView?.evaluateJavaScript("handleCallback('\(callbackId)', \(result))")
        }

        // 调用实际业务逻辑
        handleRequest(body)
    }
}
    

3. 异步操作的支持：优雅地等待 Swift 方法完成

当 Swift 方法为异步操作时，可以通过闭包或 Combine 框架来优雅地处理。以下是一个使用闭包的例子：

func handleRequest(_ request: [String: Any]) {
    guard let callbackId = request["callbackId"] as? String else { return }

    someAsyncOperation { result in
        if let callback = callbackMap[callbackId] {
            callback(result)
            callbackMap.removeValue(forKey: callbackId) // 避免内存泄漏
        }
    }
}
    

此方法确保了每个回调只执行一次，并在完成后从字典中移除，从而避免内存泄漏。

4. 流程图：完整交互过程

sequenceDiagram
        participant JS as JavaScript
        participant SW as Swift
        participant WV as WKWebView

        JS->>SW: call Swift method with callbackId
        SW->>WV: store callbackId and process request
        WV->>SW: async operation completes
        SW->>WV: evaluateJavaScript with result
        WV->>JS: execute callback function

5. 表格总结：常见问题与解决方案

问题	解决方案
如何确保回调的安全性？	使用唯一标识符并验证其有效性。
如何避免内存泄漏？	在回调完成后从字典中移除对应的条目。
如何支持多个并发回调？	利用字典存储每个回调的独立逻辑。
如何处理异步操作？	通过闭包或 Combine 框架优雅地等待结果。