OSX webview 与 native 通信简单介绍

想第一时间获取我的最新文章,请关注公众号: 技术特工队

在开发混合应用中,经常需要 js 与 webview 进行通信,那么官方也提供了一些方法进行消息处理,今天这里介绍一款开源库来更好的解决的 native 与 js 通信的问题,也就是 WebViewJavascriptBridge

基本配置使用

  1. 在 Podfile 文件中添加库稳健配置pod 'WebViewJavascriptBridge', '~> 6.0',然后执行pod install
  2. 使 WebViewJavascriptBridge 初始化与 Webview 进行绑定

    1
    let bridge: WebViewJavascriptBridge = WebViewJavascriptBridge.init(forWebView: webview)
  3. 在js层中进行注册处理

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 将该方法写入 javascript 中
    function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'https://__bridge_loaded__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }
  4. 经过上面的步骤,基本的搭建就完成了,下面就是要相互注册调用的函数,以及互相调用的方法。

  5. native 层注册方法供 js 调用,以及 native 层调用的js方法。

注册及调用方法

  • native 注册方法供 js 调用 (registerHandler)

native拿到bridge对象后,即可对native的方法进行注册,以便供 js 调用。注册方也比较简单。

1
2
3
4
5
6
7
bridge.registerHandler("methodName") { (jsCallData, responseCallback) in
// 通过jsCallData 来获取js层调用的方法。
print("jsCallData = ", jsCallData)
let result = "ok"
// resonpseCallback 用来将处理的结果在返回给到 js 层
responseCallback(result)
}

  • js 层注册方法供 native 调用 (registerHandler)

调用 js 层前面注册的函数进行注册,如下:

1
2
3
4
5
6
7
8
9
10
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler('methodName', function(data, responseCallback) {
// data 为 native 调用的方法参数
log('ObjC called testJavascriptHandler with', data)
var responseData = { 'Javascript Says':'Right back atcha!' }
log('JS responding with', responseData)
// resonpsecallback 为js处理完告诉native 的结果
responseCallback(responseData)
})
}

上面的 native 注册供 js 调用的模式,与 js 注册供 native 调用的方法基本上是一样的,方法,参数,回调等都基本上一致。

  • native 调用 js 层注册的方法 (callhandler)

    1
    2
    3
    4
    5
    // bridge 为native 绑定后的 WebViewJavascriptBridge 对象
    // methodName 为js 注册的方法
    // data 为调用js的方法参数
    // callback 为 js 方法执行后的回调方法。
    bridge.callHandler(methodName, data: data, responseCallback: callback)
  • js 调用 native 层注册的方法 (callHanlder)

1
2
3
4
5
6
7
8
9
setupWebViewJavascriptBridge(function(bridge) {
// data 构造调用native的参数
var data = {"action":"connectstate","payload":{"isConnect": true}}
// methodName 为native 注册的方法。
bridge.callHandler('methodName', data, function(response) {
// response 为native 回调的值
log('JS got response', response)
})
});

通过上面的4个方法,已经把native 与 js 两端的互相注册及调用的讲完。整体上比较简单,两端的方法注册及调用都是互等性的,方法名、参数、回调都一样。理解起来也比较容易。

原理

主要的原理的通过 function setupWebViewJavascriptBridge(callback) {}方法里添加一个不显示的iframe view, 然后在native 层通过对注定的请求 url 进行拦截,解析出相应的参数。然后利用此特性进行 js 与 native 的互相通信。详细的可以参考文章:

参数文章:
https://www.jianshu.com/p/8bd6aeb719ff
https://www.jianshu.com/p/d45ce14278c7

WangXin wechat
欢迎订阅我的微信公众号,第一时间获取最新文章!
坚持原创技术分享,您的支持将鼓励我继续创作!