Cordova/Ionic 代码合并方案

一、前言

经过上一次解决Ionic跨域的问题已经整整快两月了，这次我们又碰上了不同部门之间不同的APP需要进行合并的问题。（A部门使用原生Cordova、B部门使用Ionic+Angular）由于前期技术选型不同导致这遍文章的出现。

PS：本次合并方案仅限于Android并未将IOS纳入范围，另外合并是将Ionic/platform/android 生成的代码合并到cordova/platform/android工程当中。

二、 Ionic 与 Cordova的区别

就我个人理解而言，本质上Ionic是在Cordova的基础上进行二次封装。

• Ionic

  但是需要明确的是Ionic是Angular （目前已支持VUE等等）的衍生品，Angular是单独的js库，和jQuery一样能够独立用于开发应用，而Ionic只是对Angular/Cordova底层进行了扩展，利用Angular实现了很多符合移动端应用的组件，并搭建了很完善的样式库，是对Angular最成功的应用样例。即使不使用Ionic，Angular也可与任意样式库，如Bootstrap、Foundation等搭配使用，得到想要的页面效果。

• Cordova

  cordova通过定制Engine(Webview)作为桥梁 并以JSBridge作为 Native 和非 Native 间消息通信的通道，而且这个通信的通道是双向的。Cordova插件亦是通过JSBridge进行通信。具体介绍可通过查看 Cordova官网-架构

  其原理如下：
  (H5->通过某种方式触发一个url->Native捕获到url,进行分析->原生做处理->Native调用H5的JSBridge对象传递回 调)

三、 合并步骤

• copy 源码

  通过 cordova/Ionic 以下命令即可生成 Android 原生工程

  cordova platform add android --save
  ionic cordova platform add android
  复制代码

  1. 将Ionic中 ionic/platform/app/src/main/com.ionicframework.cordova.webview 包以及类复制到 cordova/platforms/android/app/src/main/ 文件夹当中。

  2. 同样的ionic/platforms/android/app/src/main/res/xml/config.xml 文件修改为ionic_config.xml并拷贝到ionic/platforms/android/app/src/main/res/xml/目录当中。

     为什么要这么做呢？ 主要是Ionic也是对cordova进行封装的所以原生cordova 工程本身也是存在ionic_config.xml文件的为了避免起冲突。最后再进行解释。

3. 和上面步骤一样将安装的插件同样复制到cordova/platforms/android/app/src/main/目录当中，但是有一点不同哪就是如果存在相同的插件就需要进行复制了。当然了也可以通过Ionic中的config.xml以及cordova中的config.xml 内容进行对比插件是否重复。

4. 在cordova/platforms/android/app/src/main/assets/www新建一个ionic的文件夹并将ionic/platforms/android/app/src/main/assets/www的所有内容copy进来，需要注意的一点是plugins文件夹底下的插件需要与config.xml and Java源码保持一致不然启动的时候插件加载失败会导致页面变成白屏无法显示页面内容。

• 调整Java源码

  1. 在cordova/platform/android 调整org.apache.cordova.ConfigXmlParser类中的 parse方法，增加重载方法。如图所示：

2. cordova/platform/android中新建一个IonicActivity，重写loadConfig方法。将加载自由名称修改为ionic_config同时路径地址指向新创建的cordova/platforms/android/app/src/main/assets/www/ionic 文件地址。

3. 最后通过通过插件或者是修改原生代码启动相对应的IonicActiivty即可达到目的，startActivity相信大家都会，传值这方面应该就不用多讲了。

四、 总结

• 为什么不是通过修改IonicWebViewEngine来达到合并的目的？

  由于项目周期较赶时间上不允许，如果时间上来的及通过修改IonicWebViewEngine达到是最好的解决方案。

• Ionic 的IonicWebViewEngine

  事实上是继承Cordova 的SystemWebViewEngine 并在本地构建一个WebViewLocalServer 这个在上一遍文档跨域中有解释

• 为什么没有包含IOS？
  Ios的原理和Android是类似的，只要对wkwebview-engine有一定的了解一样可以实现。