WebViewJavascriptBridge和Cordova原理比较解析

        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原理解析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;

万变不离其宗

       

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Asia_ZhangQQ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值