Cordova LOGO

【牢騷幾句】
我們的項(xiàng)目中，我們需要把CordovaLib集成到項(xiàng)目中悟狱。由于時(shí)間緊静浴，當(dāng)時(shí)大致研究了一下各個(gè)文件之間的關(guān)系，然后按照這種規(guī)則挤渐，照貓畫虎寫了一下苹享，完成了任務(wù)，當(dāng)時(shí)看并沒有什么問題挣菲。但是隨著不斷增加集成的插件富稻，再加上自己編寫的一些插件，發(fā)現(xiàn)沒有按照Cordova的編寫規(guī)范來做白胀，在以下場(chǎng)景比較麻煩：

• 插件管理：增加、刪除抚岗、更新版本
• 想在一個(gè)Cordova工程中復(fù)用這些插件
  全都要手工完成

最近看了下文檔或杠，結(jié)合之前項(xiàng)目中的經(jīng)歷，發(fā)現(xiàn)最簡單有效的辦法宣蔚，其實(shí)還是按照Cordova-CLI的規(guī)則來玩向抢，按照插件的規(guī)范編寫插件，然后通過Cordova-CLI來將插件加入項(xiàng)目胚委，這樣的好處：

• 方便插件管理
• 方便在Cordova工程中進(jìn)行插件復(fù)用

之前為了省事挟鸠，雖然插件接口是按規(guī)則編寫的，但都是每個(gè)平臺(tái)直接編寫原生插件亩冬，并且單獨(dú)編寫cordova_plugins.js艘希、config.xml、插件配置.js硅急。這樣看似省事覆享，實(shí)際上就出現(xiàn)了上述的維護(hù)等問題。

【正題開始】
下面說下在普通iOS工程中营袜，引入CordovaLib的正確姿勢(shì)：
先發(fā)個(gè)總體步驟：

1. 創(chuàng)建原生工程撒顿；
2. 使用Cordova-CLI創(chuàng)建Cordova工程；
3. 從“Cordova工程”的“原生平臺(tái)工程”中荚板，提取需要的文件凤壁，主要是以下幾部分：
    config.xml
    ios.json 或 android.json
    platform_www 文件夾
    插件的原生部分代碼
4. 加入到之前創(chuàng)建的原生工程中吩屹。

以下是詳細(xì)步驟說明

一、創(chuàng)建標(biāo)準(zhǔn)iOS工程拧抖，引入CordovaLib

使用Xcode創(chuàng)建標(biāo)準(zhǔn)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

二绞绒、下載需要的插件婶希，生成配置文件

以安裝以下兩個(gè)插件舉例：

cordova-plugin-console
cordova-plugin-inappbrowser

使用Cordova-CLI創(chuàng)建工程，添加平臺(tái)蓬衡，引入插件
執(zhí)行腳本如下：

# 創(chuàng)建工程
cordova create CordovaFileGenerator com.herbert.cordova.filegenerator CordovaFileGenerator
# 進(jìn)入 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工程中需要的文件，提取到單獨(dú)的文件夾 CordovaFiles 中

提取相關(guān)文件
以下為執(zhí)行的 shell 腳本：

cd CordovaFileGenerator
# 創(chuàng)建存放 Cordova 文件的目錄
mkdir -p ../CordovaFiles/iOS
mkdir -p ../CordovaFiles/Android
# >>>>>>>>>>>>>>>>>>>>>>>>>>>>> 復(fù)制 iOS 相關(guān)文件 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
# 復(fù)制 config.xml
cp -rf ./platforms/ios/CordovaFileGenerator/config.xml ../CordovaFiles/iOS/config.xml
# 復(fù)制 ios.json
cp -rf ./platforms/ios/ios.json ../CordovaFiles/iOS/ios.json
# 復(fù)制原生代碼文件
cp -rf ./platforms/ios/CordovaFileGenerator/Plugins/ ../CordovaFiles/iOS/Plugins
# 復(fù)制 Web 文件
cp -rf ./platforms/ios/platform_www/ ../CordovaFiles/iOS/www
# <<<<<<<<<<<<<<<<<<<<<<<<<<<<< 完成復(fù)制 iOS 相關(guān)文件 <<<<<<<<<<<<<<<<<<<<<<<<<<<<

# >>>>>>>>>>>>>>>>>>>>>>>>>>>>> 復(fù)制 Android 相關(guān)文件 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
# 復(fù)制 config.xml
cp -rf ./platforms/android/res/xml/config.xml ../CordovaFiles/Android/config.xml
# 復(fù)制 android.json
cp -rf ./platforms/android/android.json ../CordovaFiles/Android/android.json
# 復(fù)制原生代碼文件
mkdir -p ../CordovaFiles/Android/Plugins/org/apache/cordova/
cp -rf ./platforms/android/src/org/apache/cordova/ ../CordovaFiles/Android/Plugins/org/apache/cordova/
# 復(fù)制 Web 文件
cp -rf ./platforms/android/platform_www/ ../CordovaFiles/Android/www/
# <<<<<<<<<<<<<<<<<<<<<<<<<<<<< 完成復(fù)制 Android 相關(guān)文件 <<<<<<<<<<<<<<<<<<<<<<<<

得到如下文件列表：

./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

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

提取出的內(nèi)容整體結(jié)構(gòu)如下：

.
|-Plugins/ ......... 原生插件代碼————以源碼形式加入工程
|-www/ ............. Web 相關(guān)內(nèi)容筒饰，以及插件代碼的 js 部分————以資源形式加入工程
|-config.xml ....... 工程配置————以源碼形式加入工程
'-ios.json ......... 引用插件的描述————以源碼形式加入工程

其中：

• config.xml是CordovaLib直接讀取的，必須放在指定位置壁晒，iOS是直接的目錄下瓷们，Android應(yīng)該是xml文件夾
• Plugins/中的內(nèi)容，是插件的原生代碼部分秒咐，需要參與編譯谬晕，必須作為源碼引入
• ios.json 本身沒有任何實(shí)際用途，但是里面記錄著引用的插件及配置携取，加入進(jìn)來備用攒钳。后文中描述“遠(yuǎn)程頁面”（如：www.baidu.com）無法加入<script src="cordova.js"></script>的情況，就需要手工加載插件雷滋，這時(shí)解析ios.json比較方便方便

五不撑、補(bǔ)充說明

發(fā)現(xiàn)iOS版的CordovaLib 4.3.0之后，訪問遠(yuǎn)程鏈接惊豺，會(huì)導(dǎo)致調(diào)用系統(tǒng)瀏覽器打開燎孟。
解決方法：
在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="*" />，這樣會(huì)導(dǎo)致拉起其他App時(shí)失敗。

（完）