iOS中jsBridge的原理与封装应用

一,基本原理

A. Web向Native通信方式:

客户端Native内置的webView控件可以看做是一个简易的浏览器,可以使用该控件载入Web页面。当Web页面URL发生变化时会触发webView控件的urlReload函数,并可以拿到变化后的URL路径。若在此URL上附上一些特殊信息,便实现了Web向Native通信。

当前Web中比较流行的做法是在页面内隐式嵌套一个iFrame,通过改变此iFramesrc,达到触发NativeurlReload的目的。

B. Native向Web通信方式:

Native向Web通信的方式比较粗暴,在iOS端,webView内置了直接执行js的方法:

1
[_webView stringByEvaluatingJavaScriptFromString:javascriptCommand]

一般情况下,我们约定好Web页面js中定义的方法名,则此处便可以直接调用了。

二,大致流程:

Native载入H5页面时通过本地内置的js代码注入一个供H5页面调用的对象WebViewJavascriptBridge,该对象为H5页面提供函数注册方法:registerHandler(handlerName, handler),以供Native调用:

1
2
3
4
5
6
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
          log('ObjC called testJavascriptHandler with', data)
          var responseData = { 'Javascript Says':'Right back atcha!' }
          log('JS responding with', responseData)
          responseCallback(responseData)
      })

同时也提供调用函数:callHandler(handlerName, data, responseCallback),供H5直接调用Navtive的函数方法:

1
2
3
bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
              log('JS got response', response)
          })

当H5页面载入完成后,H5页面发送scheme://jsBridge/bridge_loaded,通知Native页面载入完成,则Native注入js对象WebViewJavascriptBridge,供H5注册本地函数与调用Native函数。

两方具体通信流程可参见下图:

image

image

Comments