解锁 Swift 与 H5 交互之门：WebViewJavascriptBridge 入门指南

2023-09-08 03:43:55

在移动应用开发中，iOS 与 H5 的交互至关重要。WebViewJavascriptBridge 作为一款强大的第三方框架，为我们提供了一种简洁而高效的方式，让 Swift 代码和 H5 页面无缝沟通。

WebViewJavascriptBridge 概览

WebViewJavascriptBridge 是一个开源的 iOS 框架，它允许原生 iOS 代码与嵌入式 WebView 中运行的 H5 页面进行双向通信。通过使用 JavaScriptCore 框架，WebViewJavascriptBridge 建立了一个桥梁，将 iOS 方法暴露给 H5，同时允许 H5 调用 iOS 代码。

集成 WebViewJavascriptBridge

在项目中添加 WebViewJavascriptBridge 依赖项。
在使用 WebView 的控制器中导入 WebViewJavascriptBridge 头文件。
创建一个 WebViewJavascriptBridge 实例并将其与 WebView 关联。

使用 WebViewJavascriptBridge 交互

iOS 调用 H5

webViewJavascriptBridge.callHandler("methodName", data: nil) { (response) in
    // 处理 H5 回调
}

H5 调用 iOS

WebViewJavascriptBridge.callHandler("methodName", data, function(response) {
    // 处理 iOS 回调
});

实例演示

考虑一个简单的示例，我们希望在 iOS 应用中显示 H5 页面，并允许用户从 H5 页面发送消息到 iOS 代码。

H5 页面

<html>
<body>
    <button onclick="callNative()">发送消息</button>

    <script>
        WebViewJavascriptBridge.callHandler("sendMessage", "你好，iOS！");
    </script>
</body>
</html>

Swift 代码

func webViewDidFinishLoad(_ webView: UIWebView) {
    // 创建 WebViewJavascriptBridge 实例并关联 WebView
    let bridge = WebViewJavascriptBridge(forWebView: webView)
    
    // 注册 iOS 方法，接收 H5 消息
    bridge.registerHandler("sendMessage") { (data, responseCallback) in
        // 处理 H5 消息
        print("收到 H5 消息：\(data!)")
        
        // 回复 H5
        responseCallback?("收到消息，已处理。")
    }
}