Cordova那些事儿（二）——App中集成Cordova的正确

2016-12-26 本文已影响177人舌尖上的大胖

Cordova LOGO

【牢骚几句】
我们的项目中，我们需要把CordovaLib集成到项目中。由于时间紧，当时大致研究了一下各个文件之间的关系，然后按照这种规则，照猫画虎写了一下，完成了任务，当时看并没有什么问题。但是随着不断增加集成的插件，再加上自己编写的一些插件，发现没有按照Cordova的编写规范来做，在以下场景比较麻烦：

插件管理：增加、删除、更新版本
想在一个Cordova工程中复用这些插件
全都要手工完成

最近看了下文档，结合之前项目中的经历，发现最简单有效的办法，其实还是按照Cordova-CLI的规则来玩，按照插件的规范编写插件，然后通过Cordova-CLI来将插件加入项目，这样的好处：

方便插件管理
方便在Cordova工程中进行插件复用

之前为了省事，虽然插件接口是按规则编写的，但都是每个平台直接编写原生插件，并且单独编写cordova_plugins.js、config.xml、插件配置.js。这样看似省事，实际上就出现了上述的维护等问题。

【正题开始】
下面说下在普通iOS工程中，引入CordovaLib的正确姿势：
先发个总体步骤：

1. 创建原生工程；
2. 使用Cordova-CLI创建Cordova工程；
3. 从“Cordova工程”的“原生平台工程”中，提取需要的文件，主要是以下几部分：
    config.xml
    ios.json 或 android.json
    platform_www 文件夹
    插件的原生部分代码
4. 加入到之前创建的原生工程中。

以下是详细步骤说明

一、创建标准iOS工程，引入CordovaLib

使用Xcode创建标准iOS工程，通过Cocoapod引入CordovaLib，配置如下：

platform :ios, '8.0'
target 'TestCordovaLibIntegration' do
  pod 'Cordova'
end

如果要使用CordovaLib的4.x版本，则只能支持iOS 8以上。
如果需要兼容iOS 7，可以使用CordovaLib的3.x版本，3.x系列中，最新是3.8，Podfile配置如下：

platform :ios, '7.0'
target 'TestCordovaLibIntegration' do
    pod 'Cordova', '~> 3.8.0'
end

二、下载需要的插件，生成配置文件

以安装以下两个插件举例：

cordova-plugin-console
cordova-plugin-inappbrowser

使用Cordova-CLI创建工程，添加平台，引入插件
执行脚本如下：

# 创建工程
cordova create CordovaFileGenerator com.herbert.cordova.filegenerator CordovaFileGenerator
# 进入 Cordova 工程目录
cd CordovaFileGenerator
# 添加 iOS 原生工程
cordova platform add ios
cordova platform add android
# 添加需要的插件
cordova plugin add cordova-plugin-console
cordova plugin add cordova-plugin-inappbrowser

三、将Cordova工程中需要的文件，提取到单独的文件夹 CordovaFiles 中

提取相关文件
以下为执行的 shell 脚本：

cd CordovaFileGenerator
# 创建存放 Cordova 文件的目录
mkdir -p ../CordovaFiles/iOS
mkdir -p ../CordovaFiles/Android
# >>>>>>>>>>>>>>>>>>>>>>>>>>>>> 复制 iOS 相关文件 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
# 复制 config.xml
cp -rf ./platforms/ios/CordovaFileGenerator/config.xml ../CordovaFiles/iOS/config.xml
# 复制 ios.json
cp -rf ./platforms/ios/ios.json ../CordovaFiles/iOS/ios.json
# 复制原生代码文件
cp -rf ./platforms/ios/CordovaFileGenerator/Plugins/ ../CordovaFiles/iOS/Plugins
# 复制 Web 文件
cp -rf ./platforms/ios/platform_www/ ../CordovaFiles/iOS/www
# <<<<<<<<<<<<<<<<<<<<<<<<<<<<< 完成复制 iOS 相关文件 <<<<<<<<<<<<<<<<<<<<<<<<<<<<

# >>>>>>>>>>>>>>>>>>>>>>>>>>>>> 复制 Android 相关文件 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
# 复制 config.xml
cp -rf ./platforms/android/res/xml/config.xml ../CordovaFiles/Android/config.xml
# 复制 android.json
cp -rf ./platforms/android/android.json ../CordovaFiles/Android/android.json
# 复制原生代码文件
mkdir -p ../CordovaFiles/Android/Plugins/org/apache/cordova/
cp -rf ./platforms/android/src/org/apache/cordova/ ../CordovaFiles/Android/Plugins/org/apache/cordova/
# 复制 Web 文件
cp -rf ./platforms/android/platform_www/ ../CordovaFiles/Android/www/
# <<<<<<<<<<<<<<<<<<<<<<<<<<<<< 完成复制 Android 相关文件 <<<<<<<<<<<<<<<<<<<<<<<<

得到如下文件列表：

./CordovaFiles/
|-Android/
|  |-Plugins/
|  |  '-org/
|  |     '-apache/
|  |        '-cordova/
|  |           |-inappbrowser/
|  |           |  |-InAppBrowser.java
|  |           |  |-InAppBrowserDialog.java
|  |           |  '-InAppChromeClient.java
|  |           '-whitelist/
|  |              '-WhitelistPlugin.java
|  |-www/
|  |  |-cordova-js-src/
|  |  |  |-android/
|  |  |  |  |-nativeapiprovider.js
|  |  |  |  '-promptbasednativeapi.js
|  |  |  |-plugin/
|  |  |  |  '-android/
|  |  |  |      '-app.js
|  |  |  |-exec.js
|  |  |  '-platform.js
|  |  |-plugins/
|  |  |  '-cordova-plugin-inappbrowser/
|  |  |      '-www/
|  |  |          '-inappbrowser.js
|  |  |-cordova.js
|  |  '-cordova_plugins.js
|  |-android.json
|  '-config.xml
'-iOS/
   |-Plugins/
   |  |-cordova-plugin-console/
   |  |  |-CDVLogger.h
   |  |  '-CDVLogger.m
   |  |-cordova-plugin-inappbrowser/
   |  |  |-CDVInAppBrowser.h
   |  |  '-CDVInAppBrowser.m
   |  '-README
   |-www/
   |  |-cordova-js-src/
   |  |  |-exec.js
   |  |  '-platform.js
   |  |-plugins/
   |  |  |-cordova-plugin-console/
   |  |  |  '-www/
   |  |  |     |-console-via-logger.js
   |  |  |     '-logger.js
   |  |  '-cordova-plugin-inappbrowser/
   |  |     '-www/
   |  |        '-inappbrowser.js
   |  |-cordova.js
   |  '-cordova_plugins.js
   |-config.xml
   '-ios.json

四、将提取出的文件加入到原生工程中

提取出的内容整体结构如下：

.
|-Plugins/ ......... 原生插件代码————以源码形式加入工程
|-www/ ............. Web 相关内容，以及插件代码的 js 部分————以资源形式加入工程
|-config.xml ....... 工程配置————以源码形式加入工程
'-ios.json ......... 引用插件的描述————以源码形式加入工程

其中：

config.xml是CordovaLib直接读取的，必须放在指定位置，iOS是直接的目录下，Android应该是xml文件夹
Plugins/中的内容，是插件的原生代码部分，需要参与编译，必须作为源码引入
ios.json 本身没有任何实际用途，但是里面记录着引用的插件及配置，加入进来备用。后文中描述“远程页面”（如：www.baidu.com）无法加入<script src="cordova.js"></script>的情况，就需要手工加载插件，这时解析ios.json比较方便方便

五、补充说明

发现iOS版的CordovaLib 4.3.0之后，访问远程链接，会导致调用系统浏览器打开。
解决方法：
在config.xml中增加如下代码：

    <feature name="IntentAndNavigationFilter">
        <param name="ios-package" value="CDVIntentAndNavigationFilter" />
        <param name="onload" value="true" />
    </feature>
    <allow-navigation href="http://*/*" />
    <allow-navigation href="https://*/*" />

注意：！！！
不要指定为 <allow-navigation href="*" />，这样会导致拉起其他App时失败。

（完）