Cordova那些事儿（一）——Cordova相关目录结构

Cordova LOGO

一、使用Cordova-CLI建立的工程目录结构

使用cordova create命令建立的工程，结构如下：

./
|-hooks/ ............ 一些build时的特殊脚本 
|-platforms/ ........ 原生平台代码
|-plugins/ .......... 插件
|-www/ .............. Web内容
|  '-index.html
'-config.xml ........ 工程配置文件，包括工程id、名字、描述、一些白名单等等

二、使用Cordova-CLI，创建的iOS工程

./HelloCordova/
|-CordovaLib/ .................................. Cordova 库
|-HelloCordova/ ................................ Cordova iOS 工程
|  |-Classes/
|  |-Plugins/ .................................. 插件原生代码
|  |  |-cordova-plugin-console/ ................ 示例
|  |  |  |-CDVLogger.h
|  |  |  '-CDVLogger.m
|  |  |-cordova-plugin-inappbrowser/ ........... 示例
|  |  |  |-CDVInAppBrowser.h
|  |  |  '-CDVInAppBrowser.m
|  |  '-README
|  |-config.xml ................................ iOS工程的配置，包括引用的插件、引用方式等，可由 Cordova-CLI 生成
|  '-main.m
|-HelloCordova.xcodeproj/ ...................... 工程文件
|-HelloCordova.xcworkspace/ .................... Workspace 文件
|-cordova/ ..................................... 用于执行 build 的相关脚本内容，与代码无关
|-platform_www/ ................................ 平台相关的 Web 内容
|  |-cordova-js-src/
|  |  |-exec.js
|  |  '-platform.js
|  |-plugins/ .................................. 插件相关的 js 代码
|  |  |-cordova-plugin-console/ ................ 示例
|  |  |  '-www/
|  |  |     |-console-via-logger.js
|  |  |     '-logger.js
|  |  '-cordova-plugin-inappbrowser/ ........... 示例
|  |      '-www/
|  |         '-inappbrowser.js
|  |-cordova.js
|  '-cordova_plugins.js ........................ 用于导入所引用插件相关的配置的 js，由引用的插件内容而定
|-www/ ......................................... 自定义的 Web 内容 + platform_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
|  '-index.html
'-ios.json .................................... 所引用插件相关的配置，标准 JSON，其中 modules 部分与 cordova_plugins.js 的 module.exports 部分内容相同，可以直接通过iOS解析，获取所引用的插件信息。此文件不会被打包。

特定平台工程和Cordova工程都包含了config.xml文件，目前的理解：

• Cordova工程中的config.xml，是一些跨平台的通用配置。
• 特定平台工程中的config.xml，除了包含通用配置，还有一些平台的特性化配置，比如：引用插件、插件的加载执行方式等等。

三、使用Cordova-CLI打包后的结构

使用cordova build命令打包后的目录结构（以iOS为例，除原生代码外，都在www文件夹中，手集成CordovaLib的话，文件夹可以自己定义）：

./www/
|-cordova-js-src/ ................. 存放用于与原生功能桥接的JS（无需改动）
|  |-exec.js ...................... 无需改动
|  '-platform.js .................. 无需改动
|-plugins/ ........................ 插件 js 部分的代码
|  |-cordova-plugin-console/
|  |  '-www/
|  |     |-console-via-logger.js
|  |     '-logger.js
|  '-cordova-plugin-inappbrowser/
|     '-www/
|        '-inappbrowser.js
|-cordova.js ...................... 用于加载插件，一般在 index.html 中引用（无需改动）
|-cordova_plugins.js .............. 所有引用的插件（需要根据引用的插件来进行调整）
'-index.html

这些在www中的内容，除了index.html，其余的并没有出现在Cordova工程中。
从一、二两个结构的比较中可以看出：“二”中的以下文件并没有包含在“一”中：

cordova-js-src/ ................. 存放用于与原生功能桥接的JS（无需改动）
 |-exec.js ...................... 无需改动
 '-platform.js .................. 无需改动
cordova.js ...................... 用于加载插件，一般在 index.html 中引用（无需改动）
cordova_plugins.js .............. 所有引用的插件（需要根据引用的插件来进行调整）

这些内容属于：

• 应用在JS执行原生调用时需要
• 但又不需要手工编辑

所以在Cordova工程中没有出现，而是在Cordova-CLI进行打包的过程中塞了进去。

四、在自己工程中引入CordovaLib

对于在自己的工程中引入Cordova的情况，需要在工程中引入config.xml。如果需要进行原生插件调用，把“二”中的内容加进去，并保证这些页面能正常加载到这些JS。

五、plugin目录结构

通过Cordova-CLI安装的插件，需要按照一定的格式组织代码。

./cordova-plugin-console/
|-doc/ ......................... 文档目录
|-src/ ......................... 源码目录（重要：需要编写代码）
|  |-ios/ ...................... 平台分类 iOS
|  |  |-CDVLogger.h
|  |  '-CDVLogger.m
|  |-ubuntu/ ................... 平台分类 Ubuntu
|  |  |-console.cpp
|  |  '-console.h
|  '-wp/ ....................... 平台分类 Windows Phone
|     '-DebugConsole.cs
|-tests/ ....................... 测试文件夹
|  |-plugin.xml
|  '-tests.js
|-www/ ......................... 用于与原生代码交互的 js（重要：需要编写代码）
|  |-console-via-logger.js
|  '-logger.js
|-package.json ................. 插件的说明信息，用于搜索等作用，貌似对程序没有实际作用
'-plugin.xml ................... 插件的配置文件，其中包含每个平台的配置，使用命令行安装插件时，会把文件中各个平台的内容，插入到各个平台代码的 config.xml 中（重要：需要开发插件时编写）

六、plugin.xml文件结构
plugin.xml是编写的插件的描述文件，其中主要是若干个<platform>标签中的内容。根据不同的平台，提供不同的设置。在执行cordova plugin add命令时，会把不同平台的配置，分别插入到“各个平台工程代码”中的config.xml中。
例如：

    <!-- ios -->
    <platform name="ios">
        <js-module src="www/inappbrowser.js" name="inappbrowser">
            <clobbers target="cordova.InAppBrowser.open" />
            <clobbers target="window.open" />
        </js-module>  
        <config-file target="config.xml" parent="/*">
            <feature name="InAppBrowser">
                <param name="ios-package" value="CDVInAppBrowser" /> 
            </feature>
        </config-file>

        <header-file src="src/ios/CDVInAppBrowser.h" />
        <source-file src="src/ios/CDVInAppBrowser.m" />
        
        <framework src="CoreGraphics.framework" />
    </platform>

<platform>标签中

• <config-file>标签用于指定将里面<feature>标签中的内容插入到config.xml中。
• <js-module>标签用于生成cordova_plugins.js的内容
• <header-file>、<source-file>、<framework>分别表示头文件、实现文件和需要引用的framework。

<platform>标签中的内容并不是所有平台都一样，而是根据平台特性，自行定义。

---

以下为InAppBrowser插件的Android和iOS部分配置

<?xml version="1.0" encoding="UTF-8"?>

<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
           id="cordova-plugin-inappbrowser"
      version="1.6.1">

    <name>InAppBrowser</name>
    <description>Cordova InAppBrowser Plugin</description>
    <license>Apache 2.0</license>
    <keywords>cordova,in,app,browser,inappbrowser</keywords>
    <repo>https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git</repo>
    <issue>https://issues.apache.org/jira/browse/CB/component/12320641</issue>

    <engines>
      <engine name="cordova" version=">=3.1.0" /><!-- Needs cordova/urlutil -->
    </engines>

    <!-- android -->
    <platform name="android">
        <js-module src="www/inappbrowser.js" name="inappbrowser">
            <clobbers target="cordova.InAppBrowser.open" />
            <clobbers target="window.open" />
        </js-module>
        <config-file target="res/xml/config.xml" parent="/*">
            <feature name="InAppBrowser"> 
                <param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser"/>
            </feature>
        </config-file>

        <source-file src="src/android/InAppBrowser.java" target-dir="src/org/apache/cordova/inappbrowser" />
        <source-file src="src/android/InAppBrowserDialog.java" target-dir="src/org/apache/cordova/inappbrowser" />
        <source-file src="src/android/InAppChromeClient.java" target-dir="src/org/apache/cordova/inappbrowser" />

        <!--  drawable src/android/resources -->
        <resource-file src="src/android/res/drawable-hdpi/ic_action_next_item.png" target="res/drawable-hdpi/ic_action_next_item.png" />
        <resource-file src="src/android/res/drawable-mdpi/ic_action_next_item.png" target="res/drawable-mdpi/ic_action_next_item.png" />
        <resource-file src="src/android/res/drawable-xhdpi/ic_action_next_item.png" target="res/drawable-xhdpi/ic_action_next_item.png" />
        <resource-file src="src/android/res/drawable-xxhdpi/ic_action_next_item.png" target="res/drawable-xxhdpi/ic_action_next_item.png" />

        <resource-file src="src/android/res/drawable-hdpi/ic_action_previous_item.png" target="res/drawable-hdpi/ic_action_previous_item.png" />
        <resource-file src="src/android/res/drawable-mdpi/ic_action_previous_item.png" target="res/drawable-mdpi/ic_action_previous_item.png" />
        <resource-file src="src/android/res/drawable-xhdpi/ic_action_previous_item.png" target="res/drawable-xhdpi/ic_action_previous_item.png" />
        <resource-file src="src/android/res/drawable-xxhdpi/ic_action_previous_item.png" target="res/drawable-xxhdpi/ic_action_previous_item.png" />

        <resource-file src="src/android/res/drawable-hdpi/ic_action_remove.png" target="res/drawable-hdpi/ic_action_remove.png" />
        <resource-file src="src/android/res/drawable-mdpi/ic_action_remove.png" target="res/drawable-mdpi/ic_action_remove.png" />
        <resource-file src="src/android/res/drawable-xhdpi/ic_action_remove.png" target="res/drawable-xhdpi/ic_action_remove.png" />
        <resource-file src="src/android/res/drawable-xxhdpi/ic_action_remove.png" target="res/drawable-xxhdpi/ic_action_remove.png" />
    </platform>

    <!-- ios -->
    <platform name="ios">
        <js-module src="www/inappbrowser.js" name="inappbrowser">
            <clobbers target="cordova.InAppBrowser.open" />
            <clobbers target="window.open" />
        </js-module>  
        <config-file target="config.xml" parent="/*">
            <feature name="InAppBrowser">
                <param name="ios-package" value="CDVInAppBrowser" /> 
            </feature>
        </config-file>

        <header-file src="src/ios/CDVInAppBrowser.h" />
        <source-file src="src/ios/CDVInAppBrowser.m" />
        
        <framework src="CoreGraphics.framework" />
    </platform>

    <!-- osx -->
    <platform name="osx">
        <js-module src="www/inappbrowser.js" name="inappbrowser">
            <clobbers target="cordova.InAppBrowser.open" />
            <clobbers target="window.open" />
        </js-module>
        <config-file target="config.xml" parent="/*">
            <feature name="InAppBrowser">
                <param name="osx-package" value="CDVInAppBrowser" />
            </feature>
        </config-file>

        <header-file src="src/osx/CDVInAppBrowser.h" />
        <source-file src="src/osx/CDVInAppBrowser.m" />
    </platform>

    <!-- browser -->
    <platform name="browser">
        <js-module src="www/inappbrowser.js" name="inappbrowser">
            <clobbers target="cordova.InAppBrowser.open" />
            <clobbers target="window.open" />
        </js-module>
        <js-module src="src/browser/InAppBrowserProxy.js" name="InAppBrowserProxy">
            <merges target="" />
        </js-module>
    </platform>
</plugin>