返回

深入剖析 WKWebView-WKScriptMessageHandler 的实用妙用（第一篇）

IOS

引言

对于移动应用开发者而言，WKWebView 已然成为构建跨平台 Web 视图的首选。与 UIWebView 相比，WKWebView 性能更优越，并且与 Safari 保持同步，从而确保一致的浏览体验。而 WKScriptMessageHandler 则是 WKWebView 提供的一项强有力的工具，它能够实现 JavaScript 与原生代码之间的无缝通信，为开发者带来更多可能性。

WKScriptMessageHandler 的工作原理

WKScriptMessageHandler 的工作原理十分简单。首先，您需要创建一个遵循 WKScriptMessageHandler 协议的类，并实现用户脚本调用的方法。随后，将此类注册到 WKWebView 中，并指定一个标识符来识别不同的消息处理程序。

当 JavaScript 代码调用 window.webkit.messageHandlers.[identifier].postMessage() 方法时，WKScriptMessageHandler 便会将消息转发到注册的类中。您可以在实现的方法中处理消息，并根据需要执行相应的操作。

实战案例：与原生代码交互

WKScriptMessageHandler 的一个常见应用场景就是与原生代码交互。例如，我们可以使用 JavaScript 调用原生代码方法，修改 UI 元素、获取设备信息或访问受限资源。

以下是实现此功能的步骤：

  1. 创建一个遵循 WKScriptMessageHandler 协议的类，例如 MyMessageHandler：
class MyMessageHandler: NSObject, WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        // 处理消息并执行相应操作
    }
}
  1. 将 MyMessageHandler 注册到 WKWebView 中：
let configuration = WKWebViewConfiguration()
configuration.userContentController.add(MyMessageHandler(), name: "myHandler")
  1. 在 JavaScript 中调用原生代码方法：
window.webkit.messageHandlers.myHandler.postMessage({ action: "modifyUI" });
  1. 在 MyMessageHandler 中处理消息并修改 UI：
override func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    if message.name == "myHandler" {
        let action = message.body["action"] as! String
        if action == "modifyUI" {
            // 修改 UI 元素
        }
    }
}

实战案例：调试和日志记录

除了与原生代码交互，WKScriptMessageHandler 还可以用于调试和日志记录。通过 JavaScript 代码，我们可以将调试信息或日志输出到控制台中。

以下是如何实现此功能的：

  1. 创建一个遵循 WKScriptMessageHandler 协议的类，例如 Debugger：
class Debugger: NSObject, WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        // 输出调试信息或日志
    }
}
  1. 将 Debugger 注册到 WKWebView 中：
let configuration = WKWebViewConfiguration()
configuration.userContentController.add(Debugger(), name: "debugger")
  1. 在 JavaScript 中输出调试信息或日志：
window.webkit.messageHandlers.debugger.postMessage({ message: "This is a debug message" });
  1. 在 Debugger 中处理消息并输出调试信息或日志：
override func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    if message.name == "debugger" {
        let message = message.body["message"] as! String
        // 输出调试信息或日志到控制台
    }
}

结语

WKScriptMessageHandler 是 WKWebView 中一个功能强大的工具，它能够实现 JavaScript 与原生代码之间的无缝通信。本文介绍了 WKScriptMessageHandler 的工作原理以及两个实用的应用案例。通过掌握这些技术，开发者可以充分发挥 WKWebView 的潜力，构建更具交互性、可定制性和可调试性的移动应用。

延伸阅读