WebViewJavascriptBridge和Cordova原理比较解析

深藏阁楼爱情的钟 2022-04-21 19:28 212阅读 0赞

WebViewJavascriptBridge是一个开源的Native和Web App的轻量级的交互框架。实现实现之前方法互调，传值等操作。我们的WebViewJavascriptBridge的webview容器由两个部分组成，H5相关的JS（H5里js setupWebViewJavascriptBridge 初始化，js调原生方法等），Native这块的WebViewJavascriptBridge WebViewJavascriptBridge\_js等。

Cordova主要是phone Gap的一个开源hybride框架。主要用于跨平台iOS，Android和Web开发，也包括Native和Web之前的数据交互。我们的Cordova的webview容器由两个部分组成，H5相关的JSs（cordova.js、cordova\_plugins.js、exec.js、plugin.js）等、Html、css和Native的CDV的类组成（CDV、CDVCommandQueue、CDVCommandDelegate、CDVCommandDelegateImpl、CDVPlugin、CDVViewController）等。

关于这两个的原理解析网上文章比较多，可以参考：[WebViewJavascriptBridge原理解析][WebViewJavascriptBridge]，[Cordova浅析架构原理][Cordova]。具体的我就不在炒现饭。我来讲讲我在项目里对接这两个框架经历。

由于项目架构比较早，当时用的Cordova做H5和Natvie交互，甚至一些跨平台页面。但随着版本迭代，项目组规则不统一，导致用的越来越少，反而url拦截用的多。到如今显的Cordova过于笨重（使用过的人知道，没WebViewJavascriptBridge轻量级），我们需要一个轻量级的H5和Natvie交互框架。所以我这边就新写了一套基于WebViewJavascriptBridge的Native和Web App的轻量级的交互框架。但是因为一些原因，H5 js不能修改。只能原生修改。所以出现了Web端用的Cordova框架，iOS用的WebViewJavascriptBridge框架（Android提取了Cordova js层自己写了）这一奇观。然后讲讲对接里的那些坑。

Cordova的js层可以放客户端也可以放服务端，我们在客户端，WebViewJavascriptBridge的js在服务端。他们都是通过拦截特定的URL来判断loading还是走交互方法。web容器加载会把JS也加载进入，H5 Cordova js加载显然无法对接Native本地WebViewJavascriptBridge方法，虽然拦截URL原理一样。所以修改Cordova js方法，做拦截转成WebViewJavascriptBridge的js方法，然后web加载才能对接。一下省略部分代码

**function** iOSExec() \{ // H5 Cordova调用Js

**if** (successCallback || failCallback) \{

callbackId = service + cordova.callbackId++;

cordova.callbacks\[callbackId\] =   success:successCallback, fail:failCallback\};\}

actionArgs = massageArgsJsToNative(actionArgs);

**var** command = \[callbackId, service, action, actionArgs\];

appInvoked(service, \{'callbackId' : callbackId, 'service' : service, 'action' : action, 'actionArgs' : actionArgs\}, **function** (backData)\{nativeCallBack(backData.callbackId, backData.status, backData.message, backData.keepCallback)  \});//bridage 替换Cordova调原生流程，改为bridge调原生流程，但是数据格式还是Cordova的结构一致。

保持字段和原来动态一致，成功转换框架。里面还有不同，回调不同，Cordova 是时间戳+服务端id+加保持时间端，可以多次回调。而WebViewJavascriptBridge只有时间戳+本地id技术，只能够回调一次。Cordova的Selector是通过继承plugin H5拿到执行方法，而Selector我们走的回调机制。具体一些Api的比较这里就不详说，因为Cordova里的一些方法比WebViewJavascriptBridge灵活性更高，还有一些方法也没用到（毕竟是可以跨平台开发）。

从项目可扩转性来说Cordova明显适用，但是从便捷性来说WebViewJavascriptBridge更胜一筹。对于我们主打Native App来说，轻量级，减少依赖很有必要。加上现在项目里用到weex啥的。基本没需求用到Cordova跨平台开发。但是Cordova依然很强大，插件化+跨平台很有好处。干货不是很多，主要是自己对两个交互框架有了更深的认识，然后相关方法网上很多解读。这里记住核心方法

\- (**nullable** NSString \*)stringByEvaluatingJavaScriptFromString:(NSString \*)script;

- (**void**)evaluateJavaScript:(NSString \*)javaScriptString completionHandler:(**void** (^ **\_Nullable**)(**\_Nullable** **id**, NSError \* **\_Nullable** error))completionHandler;

万变不离其宗

[WebViewJavascriptBridge]: https://www.jianshu.com/p/d45ce14278c7
[Cordova]: https://www.jianshu.com/p/0bd13e9059fb