用WKWebViewJavascriptBridge优雅实现iOS与JS交互

2023-12-12 19:31:40

原生App与Web应用的交互一直是混合开发的重要一环。在iOS平台上，可以使用WKWebViewJavascriptBridge框架来实现iOS与JavaScript之间的交互。WKWebViewJavascriptBridge是一个轻量级、易于使用的框架，只需要少量代码即可实现iOS与JavaScript之间的通信。

WKWebViewJavascriptBridge框架主要提供以下功能：

iOS与JavaScript之间的消息传递 ：允许iOS和JavaScript相互发送和接收消息。
JavaScript与iOS之间的对象交换 ：允许JavaScript和iOS相互交换对象，以便在iOS中使用JavaScript对象或在JavaScript中使用iOS对象。
iOS与JavaScript之间的函数调用 ：允许iOS和JavaScript相互调用函数，以便在iOS中调用JavaScript函数或在JavaScript中调用iOS函数。

WKWebViewJavascriptBridge框架的使用非常简单。首先，需要在iOS项目中导入WKWebViewJavascriptBridge.h头文件。然后，需要创建一个WKWebViewJavascriptBridge对象，并将其与WKWebView关联。最后，就可以通过WKWebViewJavascriptBridge对象来发送和接收消息，交换对象，调用函数。

这里有一个简单的例子，展示了如何使用WKWebViewJavascriptBridge框架实现iOS与JavaScript之间的消息传递：

import WKWebViewJavascriptBridge

class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {

    var webView: WKWebView!
    var bridge: WKWebViewJavascriptBridge!

    override func viewDidLoad() {
        super.viewDidLoad()

        // 创建一个WKWebView
        webView = WKWebView(frame: view.bounds)
        webView.uiDelegate = self
        webView.navigationDelegate = self

        // 创建一个WKWebViewJavascriptBridge对象并与WKWebView关联
        bridge = WKWebViewJavascriptBridge(webView: webView)

        // 注册一个JavaScript函数，以便iOS可以调用
        bridge.registerHandler("callNative") { (data, responseCallback) in
            // 从JavaScript接收数据
            print("Received data from JavaScript: \(data)")

            // 向JavaScript发送数据
            responseCallback("Hello from iOS!")
        }

        // 加载HTML页面
        let url = URL(string: "https://example.com/index.html")!
        webView.load(URLRequest(url: url))
    }

    // WKWebView加载完成时调用
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // 向JavaScript发送数据
        bridge.callHandler("callJS", data: ["message": "Hello from iOS!"])
    }
}