iOS Hybrid交互

自己最近重新梳理了下iOS 中 Hybrid 交互方面的知识,这里简单记录一下:

环境说明:

  • Web容器:WKWebView
  • iOS10.0以上
  • Swift: 5.0

术语说明:

  • JS: 指H5前端层面
  • Native: 指iOS原生层面

1.通信方式选择

JS与原生交互的前提是保证JS与Native能进行相互通信,这里选择的通信方案是通过注入JS对象的方式来实现。

具体实现方式是Native在创建好wkwebview容器后向其注入 JSBridge 对象。后续消息收发均通过注入的JSBridge对象进行。

webView.configuration.userContentController.add(self, name: "JSBridge")

注入成功后,可以在web浏览器中控制台输入window.webkit.messageHandlers.JSBridge 进行查看

打印JSBridge对象

其他几种通信方案及详细说明请看
从零收拾一个hybrid框架(一)-- 从选择JS通信方案开始

需要注意的地方:
直接使用addScriptMessageHandler: name方法会存在内存泄漏问题, 解决办法可以参考:iOS 解决WKWebView中WKScriptMessageHandler方法引起内存不释放问题

2.消息结构约定

需要Native与JS双方约定一个消息结构,作为通信时消息传递的规范:
这里约定消息结构如下:

//js
{
  action: "foo", //两端约定的方法或协议名
  data: {}   //传输数据,json对象类型
  callbackId: "xxxx-xxxxx-xxx", //消息回调id
}

//swift
class JSMessage: NSObject {
    var action: String
    var data: Dictionary<String, Any>?
    var callbackId: String
}

其中callbackId 主要用于当该消息有响应数据时,将callbackId与传入的回调方法进行绑定并写入当前环境的map中。当获取到回调数据后, 再从map中获取保存的回调方法,并将回调数据传入该方法。

3.具体通信流程

3.1 JS向Native发送消息

//js
function Bridge() {
    this.sendMsg = function(msg) {
        // TODO: 判断不同平台,目前只处理iOS
        window.webkit.messageHandlers.JSBridge.postMessage(msg);
    }
}

3.2 Native接收消息

//swift
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    print("收到JS消息: \(message.name), \(message.body)")
    handleJSMsg(message)
}

/// 处理H5发送过来的消息
private func handleJSMsg(_ msg: WKScriptMessage) {
    if !isSupportMsg(msg) { return }
    if let body = msg.body as? Dictionary<String, Any>,
        let action = body["action"] as? String,
        let data = body["data"] as? Dictionary<String, Any>,
        let callbackId = body["callbackId"] as? String {
        let jsMsg = JSMessage(action: action, data: data, callbackId: callbackId)
        //消息分发
        dispatchMsg(jsMsg)
    }
}

3.3 Native向JS发送消息

//swift
private func sendMsg(_ msg: JSMessage) {
    let msgDict: [String : Any] = [
        "action": msg.action,
        "data": msg.data ?? "",
        "callbackId": msg.callbackId
    ]
    let jsonString = msgDict.formatJSON() ?? ""
    let js = """
    bridge.handleNativeMsg(\(jsonString))
    """
    evaluateJavaScript(js)
}

private func evaluateJavaScript(_ javaScriptString: String, completionHandler: ((Any?, Error?) -> Void)? = nil) {
    print("调用js方法:\(javaScriptString)")
    DispatchQueue.main.async {[weak self] in
        self?.webView?.evaluateJavaScript(javaScriptString, completionHandler: completionHandler)
    }
}

3.4 JS接收消息

//js
this.handleNativeMsg = function(msg) {
    if (msg.action == "handleNativeResponse") {
        this.handleNativeResponse(msg);
        return;
    }
    let functionName = "bridgeMsgListener." + msg.action;
    let func = eval(functionName);
    // 消息转发
    new func(msg);
}

完整的时序图如下


消息时序图

4.回调处理

针对一些异步操作或需要获取响应状态的操作, 例如网络请求,我们需要在对方执行完毕后获取到对应的响应数据。 针对这种情况,我们可以在发送message时申明两个特殊的action

  • handleH5Response 用于表示这是一条来自h5侧的响应数据,native需要进行回调处理

  • handleNativeResponse 用于表示这是一条来自native侧的响应数据,h5需要进行回调处理


举例说明: 例如,JS调用Native的一个网络请求request方法,在Native获取到网络请求响应数据responseData后,需要将responseData 返回给JS侧;

  1. JS发送消息:其中callbackId 是由JS生成一个的UUID字符串
{
  action: "request",
  data:  {
    url: "https://www.baidu.com"
  },
  callbackId: "xxxx-xxxxx-xx",
}
  1. Native收到消息后,解析消息内容,并在本地发起网络请求,在获取到响应数据responseData后,封装成JSMessage对象发送给
{
  action: "handleNativeResponse",
  data: responseData,
  callbackId: "xxxx-xxxxx-xx",
}
  1. JS在 handleNativeResponse方法中获取到 msg 消息中的callbackIddata响应数据,然后进行后续的回调操作
    // 回调处理
    this.handleNativeResponse = function(msg) {
        let callbackFunction = this.callBackMaps[msg.callbackId];
        if (callbackFunction != undefined && callbackFunction != null) {
            this.callBackMaps.delete(msg.callbackId);
            callbackFunction(msg.data);
        }
    }

5.最后

补个简单的Demo: Demo

PS: 由于本人前端知识浅薄,demo中js部分建议根据实际需要进行改动。

后续应该会增加一些其他的常用功能:

  1. 离线加载(从bundle沙盒 加载html文件)
  2. 逐步实现类似微信小程序的API功能
  3. 增加结构配置项,如 tabbar、导航栏样式 等...

参考链接:
从零收拾一个hybrid框架(一)-- 从选择JS通信方案开始
从零收拾一个hybrid框架(二)-- WebView容器基础功能设计思路
WebViewJsBridge-iOS 做一个好用的桥接库