Sample 工程解析

通過 Cordova CLI 創(chuàng)建 Cordova 工程

最簡化創(chuàng)建應(yīng)用：

引用

cordova create app1

***默認使用 package 名：io.cordova.hellocordova、應(yīng)用名：HelloCordova。

指定 package 名和應(yīng)用名：

引用

cordova create app2 com.rensanning.app.cordova CordovaSample

***也可以單獨只指定 package 名

帶漢字的應(yīng)用名：

引用

cordova create app3 com.rensanning.app.cordova Cordova例子

***config.xml 文件使用'UTF-8'編碼。

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/6.1.png" alt="picture6.1" />

www 文件夾下的代碼

成功創(chuàng)建完成工程后，Cordova 會默認生成 index.html, css/index.css, img/logo.png 和 js/index.js。

index.hml
針對 Webview 應(yīng)用的設(shè)置

Html 代碼

<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

調(diào)用 Cordova 核心 API 的 js

Html 代碼

<script type="text/javascript" src="cordova.js"></script>

***從 Cordova 3開始采用 plugin 的方式提供核心 API，所以 cordova.js 文件中只是提供一些基本函數(shù)。

調(diào)用 index.js

Html 代碼

<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    app.initialize();
</script>

initialize()函數(shù)實際上是做 deviceready 事件的監(jiān)聽設(shè)置，當(dāng) deviceready 完成后，顯示“Device is Ready”把“Connecting to Device”隱藏。

Android 工程

添加平臺支持
cordova platform add android
***Cordova 會調(diào)用 Android SDK 在 app1\platforms\android 中創(chuàng)建一個完整的 Android 應(yīng)用工程。

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/6.2.png" alt="picture6.2" />

工程目錄結(jié)構(gòu)
assets\www
這個就是 Cordova 工程根目錄下的 www 文件夾的所有內(nèi)容。（cordova.js 和 cordova_plugins.js 是 Cordova 自動創(chuàng)建的）

***可見 Cordova 最終也會把你的代碼以 assets 的形式打包到 apk 中，所以代碼安全上，需要對 js 等進行壓縮，核心代碼最好不要放在客戶端?。?！

CordovaLib
從3.3以后，Cordova 從.jar 改成了 Library Project 的形式。

cordova
編譯、運行工程的腳本。

platform_www
防止用戶換機器.cordova/lib 不存在，備份 cordova.js 到此文件夾。build 的時候?qū)嶋H上是用的這個文件。

libs
空的文件夾，以前版本可能包含 cordova-*.jar。如果你想添加 android-support-v4.jar，可以通過插件的形式添加。

在 Eclipse 中 Import Android 工程

在 Cordova 創(chuàng)建 Eclipse 的 Android 工程，做了兩個特殊的設(shè)置：

• 讓 Android 工程下的"assets/www"和"res/xml/config.xml"不可見（還有一些其他不希望用戶修改的文件夾）
• 把 Cordova 工程的 merges 文件夾、www 文件夾、config.xml 文件鏈接到了 Android 工程下

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/6.3.png" alt="picture6.3" />

因為 platforms\android 下的代碼都是在 build 的時候自動生成的，所以修改的話沒有什么意義，應(yīng)該修改 Cordova 工程根目錄下的文件。你也可以通過 Eclipse 的 Resource 設(shè)置把他們顯示出來。

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/6.4.png" alt="picture6.4" />

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/6.5.png" alt="picture6.5" />

Cordova Android 工程的代碼不是特別的復(fù)雜，通過繼承 CordovaActivity 在首頁面的 Activity 中，解析 config.xml 文件，做初期化設(shè)置，然后嵌入 CordovaWebView 并加載 config.xml 中配置的頁面 URL。

Cordova 只是一個 Webview 的架子，只提供給你能夠調(diào)用 Native API 的接口，在 UI 方面他不會管你頁面是什么樣子，也不會提供給你任何 UI 方面的功能，所以 UI 方面還要借助于 jQuery Mobile、Sencha Touch、App Framework（jQMoby）、KendoUI Mobile、Adobe Topcoat、jQTouch、Ionic Framework、Onsen UI 等等。