自己最近重新梳理了下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 进行查看
其他几种通信方案及详细说明请看
从零收拾一个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侧;
- JS发送消息：其中
callbackId是由JS生成一个的UUID字符串
{
action: "request",
data: {
url: "https://www.baidu.com"
},
callbackId: "xxxx-xxxxx-xx",
}
- Native收到消息后，解析消息内容，并在本地发起网络请求，在获取到响应数据
responseData后，封装成JSMessage对象发送给
{
action: "handleNativeResponse",
data: responseData,
callbackId: "xxxx-xxxxx-xx",
}
- JS在
handleNativeResponse方法中获取到msg消息中的callbackId及data响应数据，然后进行后续的回调操作
// 回调处理
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部分建议根据实际需要进行改动。
后续应该会增加一些其他的常用功能：
- 离线加载（从
bundle、沙盒加载html文件） - 逐步实现类似微信小程序的API功能
- 增加结构配置项，如
tabbar、导航栏样式 等...
参考链接:
从零收拾一个hybrid框架（一）-- 从选择JS通信方案开始
从零收拾一个hybrid框架（二）-- WebView容器基础功能设计思路
WebViewJsBridge-iOS 做一个好用的桥接库
