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时失败。
（完）
网友评论