Cordova 3.x 基礎（6） -- Sample工程解析

標籤：

原文http://rensanning.iteye.com/blog/2020843

（1）通過Cordova CLI建立Cordova工程 

最簡化建立應用： 

引用cordova create app1

***預設使用package名：io.cordova.hellocordova、應用程式名稱：HelloCordova。 

指定package名和應用程式名稱： 

引用cordova create app2 com.rensanning.app.cordova CordovaSample

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

帶漢字的應用程式名稱： 

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

***config.xml檔案使用‘UTF-8‘編碼。 
 

（2）www檔案夾下的代碼 

成功建立完成工程後，Cordova會預設產生index.html, css/index.css, img/logo.png 和 js/index.js。 

index.hml 
針對Webview應用的設定 

Html代碼  

1. <meta name="format-detection" content="telephone=no" />  
2. <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" />  

調用Cordova核心API的js 

Html代碼  

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

***從Cordova 3開始採用plugin的方式提供核心API，所以cordova.js檔案中只是提供一些基本函數。 

調用index.js 

Html代碼  

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

initialize()函數實際上是做deviceready事件的監聽設定，當deviceready完成後，顯示“Device is Ready”把“Connecting to Device”隱藏。 

（3）Android工程 

添加平台支援 
cordova platform add android 
***Cordova會調用Android SDK在app1\platforms\android中建立一個完整的Android應用工程。 
 

工程目錄結構 
assets\www 
這個就是Cordova工程根目錄下的www檔案夾的所有內容。（cordova.js和cordova_plugins.js是Cordova自動建立的） 
***可見Cordova最終也會把你的代碼以assets的形式打包到apk中，所以代碼安全上，需要對js等進行壓縮，核心代碼最好不要放在用戶端！！！ 

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

cordova 
編譯、運行工程的指令碼。 

platform_www 
防止使用者換機器.cordova/lib不存在，備份cordova.js到此檔案夾。build的時候實際上是用的這個檔案。 

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

（4）在Eclipse中Import Android工程 

在Cordova建立Eclipse的Android工程，做了兩個特殊的設定： 

• 讓Android工程下的"assets/www"和"res/xml/config.xml"不可見（還有一些其他不希望使用者修改的檔案夾）
• 把Cordova工程的merges檔案夾、www檔案夾、config.xml檔案連結到了Android工程下

因為platforms\android下的代碼都是在build的時候自動產生的，所以修改的話沒有什麼意義，應該修改Cordova工程根目錄下的檔案。你也可以通過Eclipse的Resource設定把他們顯示出來。 



Cordova Android工程的代碼不是特別的複雜，通過繼承CordovaActivity在首頁面的Activity中，解析config.xml檔案，做初期化設定，然後嵌入CordovaWebView並載入config.xml中配置的頁面URL。 

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

Cordova 3.x 基礎（6） -- Sample工程解析