打造合适的App&H5交互框架

前言

介绍 webview 与 h5 通信原理的文章在网络上已经很多了,这次我们来设计打造一套优雅的交互框架.

相关接口

首先快速过一遍交互相关的api

  • 执行 JavaScript:

    1
    webview.evaluateJavaScript("js code", completionHandler: { (result, error) in })
  • JavaScript 数据发送至 WKWebview:

    1. 挂载函数至window下:

      1
      webview.configuration.userContentController.add(self, name: "ios")
    2. JavaScript发送数据:

      1
      window.webkit.messageHandlers.marmot.postMessage({value: "data"})
    3. WKWebview接收数据:

      1
      2
      3
      4
      5
      6
      extension <#CustomClass#>: WKScriptMessageHandler {
      public func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
      guard let body = message.body as? [String: Any] else { return }
      // body == ["value": "data"]
      }
      }

定义框架特性

  1. H5开发体验优先.
  2. Native端开发体验.
  3. 覆盖多种通信方式.
  4. 测试覆盖