ios 嵌入的 H5 页面中与原生 App 进行通信详细配置

要在 iOS App 中嵌入 H5 页面并实现与原生 App 的通信，需要进行以下详细配置步骤：

1. 创建一个 `WKWebView` 实例并将其添加到视图层级中。

import WebKit

class ViewController: UIViewController {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let configuration = WKWebViewConfiguration()
        let userContentController = WKUserContentController()

        // 添加 messageHandler，用于接收来自 H5 页面的消息
        userContentController.add(self, name: "myHandler")

        configuration.userContentController = userContentController

        webView = WKWebView(frame: view.bounds, configuration: configuration)
        view.addSubview(webView)

        // 加载 H5 页面
        if let htmlPath = Bundle.main.path(forResource: "index", ofType: "html") {
            let htmlUrl = URL(fileURLWithPath: htmlPath)
            webView.loadFileURL(htmlUrl, allowingReadAccessTo: htmlUrl)
        }
    }
}

2. 创建一个遵循 `WKScriptMessageHandler` 协议的类，用于处理从 H5 页面发送过来的消息。

extension ViewController: WKScriptMessageHandler {
    // 接收并处理从 H5 页面发送过来的消息
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "myHandler" {
            if let body = message.body as? String {
                print("Received message from H5: \(body)")

                // 在这里处理来自 H5 页面的消息
            }
        }
    }
}

3. 在 H5 页面中，使用 JavaScript 代码发送消息给原生 App。

// 发送消息给原生 App
window.webkit.messageHandlers.myHandler.postMessage("Hello from H5");

4. 在 H5 页面中，可以使用以下 JavaScript 代码接收来自原生 App 的消息。

// 接收原生 App 发送的消息
document.addEventListener("messageReceived", function(event) {
    var message = event.detail;
    console.log("Received message from iOS App: " + message);
});

在原生 App 中，你可以调用 `webView.evaluateJavaScript(_:completionHandler:)` 方法执行 JavaScript 代码来向 H5 页面发送消息。例如：

let message = "Hello from iOS App"
let jsCode = "document.dispatchEvent(new CustomEvent('messageReceived', { detail: '\(message)' }));"
webView.evaluateJavaScript(jsCode, completionHandler: nil)

通过以上配置，你就可以在 iOS App 中嵌入 H5 页面，并实现双向的通信。在 H5 页面中使用 `window.webkit.messageHandlers.<handlerName>.postMessage(<message>)` 发送消息给原生 App，而在原生 App 中通过实现 `WKScriptMessageHandler` 协议来接收并处理来自 H5 页面的消息。