WKWebView 实现跨 Swift 与 JavaScript 的双向通信，打造无缝交互体验

在现代 Web 开发中，Swift 和 JavaScript 是两大中流砥柱，在构建跨平台应用程序时扮演着至关重要的角色。WKWebView 作为 iOS 和 macOS 的原生 WebView 组件，为 Swift 和 JavaScript 之间的无缝交互提供了桥梁，赋能开发者打造功能强大、响应迅速的移动和桌面应用程序。

揭秘 WKWebView 背后的强大功能

WKWebView 旨在提供原生般的 Web 浏览体验，同时兼具 JavaScript 和 Swift 代码之间高效、低延迟的通信机制。它继承了 WebKit 强大的渲染引擎，确保 Web 内容的高保真度和一致性。

WKNavigationDelegate：掌控页面加载状态

WKNavigationDelegate 协议提供了对 WebView 加载状态的细粒度控制。开发者可以通过监听 webView(_:didFinish:) 方法，在页面加载完成后执行特定操作，例如加载 JavaScript 代码或发送消息到 Swift 代码。

WKScriptMessageHandler：JS 触达 Swift 的桥梁

WKScriptMessageHandler 协议定义了一个方法 userContentController(_:didReceive:)，专用于处理 JavaScript 调用 Swift 代码的情况。通过向 WebView 的 configuration.userContentController 添加一个实例，开发者可以注册多个处理程序，针对不同的 JavaScript 消息采取不同的响应动作。

JS 调用 WKWebView：掌握主动权

JavaScript 也可以通过 window.webkit.messageHandlers.<handlerName>.postMessage() 函数主动调用 WKWebView。该函数允许 JavaScript 向 Swift 发送消息，触发相应的处理程序，实现 JS 对 Swift 的有效控制。

实践出真知：构建一个双向交互的 WKWebView 应用

以下是一个简单的示例，展示了如何使用 WKWebView 在 Swift 和 JavaScript 之间建立双向通信：

// 在 Swift 代码中：
import WebKit

class ViewController: UIViewController, WKNavigationDelegate, WKScriptMessageHandler {
  var webView: WKWebView!

  override func viewDidLoad() {
    super.viewDidLoad()
    webView = WKWebView()
    webView.navigationDelegate = self
    webView.configuration.userContentController.add(self, name: "messageHandler")
    webView.load(URLRequest(url: URL(string: "mywebsite.com")!))
  }

  func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    // 页面加载完成后，注入 JavaScript 代码
    let jsCode = "document.body.style.backgroundColor = 'red'"
    webView.evaluateJavaScript(jsCode, completionHandler: nil)
  }

  func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    // 处理 JavaScript 发送来的消息
    if message.name == "messageHandler" {
      print(message.body)
    }
  }
}

// 在 JavaScript 代码中：
window.webkit.messageHandlers.messageHandler.postMessage("Hello from JS!");

扩展应用场景，释放无尽可能

WKWebView 的强大功能为跨平台应用程序开发开启了无限可能。以下是几个典型的应用场景：

• 混合应用程序： 将原生 Swift 代码与 Web 技术相结合，打造定制化且交互丰富的应用程序。
• 离线应用： 利用 WKWebView 的缓存机制，即使在没有互联网连接的情况下也能提供内容。
• 浏览器扩展： 创建定制化的浏览器扩展，增强用户浏览体验和生产力。
• 游戏开发： 将 JavaScript 游戏引擎与 Swift 代码集成，实现移动和桌面平台上的沉浸式游戏体验。

结语

WKWebView 作为 Swift 和 JavaScript 之间的通信桥梁，为跨平台应用程序开发提供了强大、灵活的解决方案。通过掌握 WKWebView 的核心功能和实用技巧，开发者可以构建高度交互、功能丰富的应用程序，满足用户不断变化的需求。随着 Web 技术的不断发展，WKWebView 也在不断演进，为开发者提供了更多的可能性。拥抱 WKWebView，释放跨平台应用程序开发的无限潜能吧！