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

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

引用

cordova create app1

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

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

引用

cordova create app2 com.rensanning.app.cordova CordovaSample

***也可以單獨(dú)只指定 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 會(huì)默認(rèn)生成 index.html, css/index.css, img/logo.png 和 js/index.js。

index.hml
針對(duì) 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ù)實(shí)際上是做 deviceready 事件的監(jiān)聽設(shè)置，當(dāng) deviceready 完成后，顯示“Device is Ready”把“Connecting to Device”隱藏。

Android 工程

添加平臺(tái)支持
cordova platform add android
***Cordova 會(huì)調(diào)用 Android SDK 在 app1\platforms\android 中創(chuàng)建一個(gè)完整的 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
這個(gè)就是 Cordova 工程根目錄下的 www 文件夾的所有內(nèi)容。（cordova.js 和 cordova_plugins.js 是 Cordova 自動(dòng)創(chuàng)建的）

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

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

cordova
編譯、運(yùn)行工程的腳本。

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

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

在 Eclipse 中 Import Android 工程

在 Cordova 創(chuàng)建 Eclipse 的 Android 工程，做了兩個(gè)特殊的設(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" />

因?yàn)?platforms\android 下的代碼都是在 build 的時(shí)候自動(dòng)生成的，所以修改的話沒有什么意義，應(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 只是一個(gè) Webview 的架子，只提供給你能夠調(diào)用 Native API 的接口，在 UI 方面他不會(huì)管你頁面是什么樣子，也不會(huì)提供給你任何 UI 方面的功能，所以 UI 方面還要借助于 jQuery Mobile、Sencha Touch、App Framework（jQMoby）、KendoUI Mobile、Adobe Topcoat、jQTouch、Ionic Framework、Onsen UI 等等。