Cordova那些事兒（一）——Cordova 相關(guān)目錄結(jié)構(gòu)

Cordova LOGO
一、使用 Cordova-CLI 建立的工程目錄結(jié)構(gòu)

使用 cordova create 命令建立的工程，結(jié)構(gòu)如下：

./
|-hooks/ ............ 一些build時的特殊腳本 
|-platforms/ ........ 原生平臺代碼
|-plugins/ .......... 插件
|-www/ .............. Web內(nèi)容
|  '-index.html
'-config.xml ........ 工程配置文件，包括工程id、名字、描述、一些白名單等等
二、使用 Cordova-CLI，創(chuàng)建的 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/ ..................................... 用于執(zhí)行 build 的相關(guān)腳本內(nèi)容，與代碼無關(guān)
|-platform_www/ ................................ 平臺相關(guān)的 Web 內(nèi)容
|  |-cordova-js-src/
|  |  |-exec.js
|  |  '-platform.js
|  |-plugins/ .................................. 插件相關(guān)的 js 代碼
|  |  |-cordova-plugin-console/ ................ 示例
|  |  |  '-www/
|  |  |     |-console-via-logger.js
|  |  |     '-logger.js
|  |  '-cordova-plugin-inappbrowser/ ........... 示例
|  |      '-www/
|  |         '-inappbrowser.js
|  |-cordova.js
|  '-cordova_plugins.js ........................ 用于導(dǎo)入所引用插件相關(guān)的配置的 js，由引用的插件內(nèi)容而定
|-www/ ......................................... 自定義的 Web 內(nèi)容 + platform_www/ 中的內(nèi)容
|  |-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 .................................... 所引用插件相關(guān)的配置，標(biāo)準(zhǔn) JSON，其中 modules 部分與 cordova_plugins.js 的 module.exports 部分內(nèi)容相同，可以直接通過iOS解析，獲取所引用的插件信息。此文件不會被打包。

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

  • Cordova 工程中的 config.xml，是一些跨平臺的通用配置。
  • 特定平臺工程中的 config.xml，除了包含通用配置，還有一些平臺的特性化配置，比如：引用插件、插件的加載執(zhí)行方式等等。
三、使用 Cordova-CLI 打包后的結(jié)構(gòu)

使用 cordova build 命令打包后的目錄結(jié)構(gòu)（以 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 .............. 所有引用的插件（需要根據(jù)引用的插件來進行調(diào)整）
'-index.html

這些在 www 中的內(nèi)容，除了index.html，其余的并沒有出現(xiàn)在 Cordova 工程中。
從一、二兩個結(jié)構(gòu)的比較中可以看出：“二”中的以下文件并沒有包含在“一”中：

cordova-js-src/ ................. 存放用于與原生功能橋接的JS（無需改動）
 |-exec.js ...................... 無需改動
 '-platform.js .................. 無需改動
cordova.js ...................... 用于加載插件，一般在 index.html 中引用（無需改動）
cordova_plugins.js .............. 所有引用的插件（需要根據(jù)引用的插件來進行調(diào)整）

這些內(nèi)容屬于：

  • 應(yīng)用在 JS 執(zhí)行原生調(diào)用時需要
  • 但又不需要手工編輯

所以在 Cordova 工程中沒有出現(xiàn)，而是在 Cordova-CLI 進行打包的過程中塞了進去。

四、在自己工程中引入 CordovaLib

對于在自己的工程中引入 Cordova 的情況，需要在工程中引入 config.xml。如果需要進行原生插件調(diào)用，把“二”中的內(nèi)容加進去，并保證這些頁面能正常加載到這些 JS。

五、plugin 目錄結(jié)構(gòu)

通過 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 ................... 插件的配置文件，其中包含每個平臺的配置，使用命令行安裝插件時，會把文件中各個平臺的內(nèi)容，插入到各個平臺代碼的 config.xml 中（重要：需要開發(fā)插件時編寫）
六、plugin.xml 文件結(jié)構(gòu)

plugin.xml 是編寫的插件的描述文件，其中主要是若干個 <platform> 標(biāo)簽中的內(nèi)容。根據(jù)不同的平臺，提供不同的設(shè)置。在執(zhí)行 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> 標(biāo)簽中

  • <config-file> 標(biāo)簽用于指定將里面 <feature> 標(biāo)簽中的內(nèi)容插入到 config.xml 中。
  • <js-module> 標(biāo)簽用于生成 cordova_plugins.js 的內(nèi)容
  • <header-file>、<source-file>、<framework>分別表示頭文件、實現(xiàn)文件和需要引用的 framework。

<platform>標(biāo)簽中的內(nèi)容并不是所有平臺都一樣，而是根據(jù)平臺特性，自行定義。

以下為 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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 134,969評論 19贊 139
  • Plugin.xml plugin.xml文件定義了你的插件所需的結(jié)構(gòu)和設(shè)置。它有幾個元素來提供有關(guān)你的插件的詳細...
    葛高召閱讀 1,228評論 0贊 1
  • 導(dǎo)語 這篇文章主要介紹了如何在Android平臺上使用Cordova 的command-line interfac...
    jorstinchan閱讀 22,728評論 6贊 41
  • Spring Boot 參考指南 介紹 轉(zhuǎn)載自:https://www.gitbook.com/book/qbgb...
    毛宇鵬閱讀 46,959評論 6贊 342
  • 不管現(xiàn)在的你是怎樣的你，記住你一直是個愛努力，愛學(xué)習(xí)，快樂的女孩。我很好奇以后的你會是什么樣?？赡軙?，可能會...
    雙魚和余閱讀 183評論 0贊 0