WebApp的Cordova之旅
首先谈一下Cordova的相识，随着大前端的到来，越来越多的应用开始嵌套h5页面，既要保证了用户信息的及时性和业务更新的及时性，也要保证用户在操作的流畅体验。所以在开发hybirdApp的路上，我们不断的在总结和吸取经验。由于项目组的融合，也带了技术的碰撞，大家用的框架也不尽相同，从而引入了Cordova的相识，那就静下来看看和我们之前的豆瓣混合框架有何不同吧！
一、首先回忆我们交互的方式从了解到使用，现在遇到的传输方式无非就2种：1.约定好互调的js方法进行传输（Cordova）2.约定好url，h5发送对应的url，native进行捕捉，来传输数据（豆瓣的混合框架http://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导入js code<script type="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 () {var page=$we.widget.add("h5.app",{hashSupport: true});}, false);</script>执行过程6.h5点击事件触发之前写好的js对象方法7.js最后会根据Cordova的exec.js类将按照规则定义的方法进行解析，并生成对应的callbackid8.将处理后的js文件，通过框架里约定的js方法nativeFetchMessages()传递给native，native在webview的代理方法- (BOOL)webView:(UIWebView)theWebView shouldStartLoadWithRequest:(NSURLRequest)request navigationType:(UIWebViewNavigationType)navigationType里面进行接收9.native拿到信息找到对应的类(在vc的viewDidLoad将类注册进去），在完成操作后，把完成结果通过调用cordova类的方法将结果写入成QHPluginResult对象10.QHPluginResult对象会调用QHWebViewEngineProtocol协议方法11.协议方法里面会调用stringByEvaluatingJavaScriptFromString方法调用定义好的nativeCallback方法，传递给js12.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调用非常方便，简短的代码和一致的输出更加系统，而且回调更加统一，整个过程是一个闭环，确实实用一些。以上是本人对Cordova框架的一些见解，如果有错误的地方希望大家多多指出。这里只是从使用入手介绍了执行过程，并没有深入的去讲解每个类的实现，如果大家有兴趣可以去直接翻看源码，希望会受益良多！
命令行形式开发
Cordova是利用Node.js进行管理，所以需要先下载Node.js。其中，就包含了npm管理器。Node.js怎么安装就不再赘述，大家可以自己搜索。
在命令行窗口确认安装完成：
node.js和npm管理器
安装Cordova
在命令行窗口输入：npm install -g cordova
过一段时间即可安装完毕，安装速度取决于网络情况。（安装挺慢的，而且有时会失败……,建议使用国内的镜像站，具体配置方法大家自己搜索）。
安装完成后，可以在C:\User\<用户名>\AppData\Roaming\npm\node_modules下可以看到cordova的安装包。
安装完成，可以输入命令：cordova -v 查看版本
安装完成
创建项目
cd到要创建项目的目录下，利用命令行创建一个空项目。命令：cordova create MyApp
也可执行：cordova help create 查看具体的创建帮助。
创建项目
添加运行平台
创建Cordova项目后，cd到项目目录。从项目目录中，需要添加一个要构建应用程序的平台。要添加平台，请键入命令：cordova platform add <平台名>
支持的完整平台列表，可以运行命令：cordova platform 进行查看。
这里以浏览器浏览为例：
添加运行平台
运行你的APP
从命令行运行：cordova run <平台名>
最终运行效果如下：
浏览器运行结果
Visual Studio 2015/2017 中开发
命令行的形式大家可能觉得不太方便。宇宙第一IDE Visual Studio在2015、2017版本中已经支持Cordova的快速开发。
vs运行效果
VS中基于浏览器的新模拟器可实现快速编码并即时在浏览器中查看结果。 实时重新加载、插件模拟和 Ionic 框架支持使 VS 拥有市场中最快的开发人员工作流。今日先简单介绍，后续将以VS为主，继续给大家介绍Cordova相关的开发技术。
vs模拟器
最后说一句，纸上得来终觉浅，绝知此事要躬行。
欢迎点击关注，你的关注就是我的动力~
上一篇：testtest
发表评论