前言
首先谈一下Cordova的相识，随着大前端的到来，越来越多的应用开始嵌套h5页面，既要保证了用户信息的及时性和业务更新的及时性，也要保证用户在操作的流畅体验。所以在开发hybirdApp的路上，我们不断的在总结和吸取经验。由于项目组的融合，也带了技术的碰撞，大家用的框架也不尽相同，从而引入了Cordova的相识，那就静下来看看和我们之前的豆瓣混合框架有何不同吧！
一、首先回忆我们交互的方式
从了解到使用，现在遇到的传输方式无非就2种：
1.约定好互调的js方法进行传输（Cordova）
2.约定好url，h5发送对应的url，native进行捕捉，来传输数据（豆瓣的混合框架//www.jianshu.com/p/8174bd232aa7）
二、去了解Cordova的传输机制
在了解之前先要学会使用，如果一个框架你都不会使用，那你看他的源码有何意义。
图像永远都比语言要更加直白的表达：

cordova思维导图.png

下面就详细的解读一下图示：
1.首先我们要创建我们本地提供方法的类，这个类一定是要继承QHPlugin，带表我们本地要做出响应的类。这个类可以获取到你将来要展示web页面的一些详细信息，包含vc和webview的实例，所以你可以在这个类里直接部署你本地的方法去搞事情。
2.为了方便h5的调用我们本地方法，我们按照Cordova的规则来定制我们本地功能类对应的js文件，js类里面是我们对要调用的js方法的封装
3.配置的xml文件要注意name和value的名字都是本地类名，这个会在以后解析找到对应本地类的文件，一定要配置正确
4.在cordova_plugins.js文件里面添加自己本地的响应类对应的js类，里面一共有4个参数：id（标示，可以自定义），file（js文件的本地路径），pluginId(要和你响应类的js文件里定义的id保持一致)，merges（将来在html中调用方法对应的类名）
5.完成本地配置工作后就需要h5导入jscode
<scripttype="text/javascript"src=“local_intercept/www/cordova.js”></script>
此处会将本地h5需要的js资源在页面生成时注入（本地会在加载h5的时候拦截并以local_intercept为key去讲原有的js文件替换为本地的js）。这个地方会出现js还未注入完毕，页面就已渲染完成，这就需要h5在渲染前先保证我们的js文件已注入完成实例代码：
<script>
document.addEventListener('deviceready',function(){
varpage=$we.widget.add("h5.app",{
hashSupport:true
});
},false);
</script>
执行过程
6.h5点击事件触发之前写好的js对象方法
7.js最后会根据Cordova的exec.js类将按照规则定义的方法进行解析，并生成对应的callbackid
8.将处理后的js文件，通过框架里约定的js方法nativeFetchMessages()传递给native，native在webview的代理方法-(BOOL)webView:(UIWebView)theWebViewshouldStartLoadWithRequest:(NSURLRequest)requestnavigationType:(UIWebViewNavigationType)navigationType
里面进行接收
9.native拿到信息找到对应的类(在vc的viewDidLoad将类注册进去），在完成操作后，把完成结果通过调用cordova类的方法将结果写入成QHPluginResult对象
10.QHPluginResult对象会调用QHWebViewEngineProtocol协议方法
11.协议方法里面会调用stringByEvaluatingJavaScriptFromString方法调用定义好的nativeCallback方法，传递给js
12.js拿到返回数据后，根据callbackID找到对应的js类
13.对应的callback方法再通过js类回调给html，html再作出响应整个过程就结束
三、总结执行顺序和核心处理
我们将本地要做操作的动作按照规则封装成类，对应的还要封装js文件，这样两边都高度封装调用方便，Cordova帮我们做中间协调，主要通过stringByEvaluatingJavaScriptFromString进行数据交换。html调用封好的js，js通过库调起我们本地类方法，本地完成后将数据返还给js，js再返回给h5。
对比豆瓣框架，因为交互的方式不同，调起本地豆瓣采用捕捉请求的方式，本地响应完成之后需要调stringByEvaluatingJavaScriptFromString方法进行callback，大型数据传输比如说用户信息，就需要h5发送post请求然后我们拦截之后，再把要返回的数据塞进请求的body里面重新发送出去，这里要注意WKWebView的body会丢失，所以在使用WKWebView时这样传递数据是无效的。总的来看豆瓣框架是整个过程得到了分离，并不是一个完美的闭环；
Cordova则是native相对的任务多了一层，就是帮助h5编写对应的js文件，使得h5调用非常方便，简短的代码和一致的输出更加系统，而且回调更加统一，整个过程是一个闭环，确实实用一些。 

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！