[Cordova學習]1.Cordova環境作成步驟

參考地址：

http://cordova.apache.org/docs/en/4.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface

前提

Cordova (Phonegap)在2.9.0以後、Cordova不能直接從官方文檔下載，而是用nodejs等工具下載。

現在下載的Cordova版本號：                                
Android：    Cordova-android-3.6.4                            
iOS:    Cordova-iOS-3.7.0                            

安裝環境：

Apache ant	Cordova工程編譯
Nodejs	Cordova工程下載

1）Ant的安裝 http://ant.apache.org/bindownload.cgi

apache-ant-1.9.4-bin.zip推薦下載安裝到英文路徑

2）nodejs的安裝 http://nodejs.org/

環境變量不設置的話就要跑到該運行的文件夾下運行CORDOVA CLI下載的命令。

Cordova CLI下載以及運行

Cordova CLI 是CordovaのCommand Line Interface簡稱。使用CordovaCLI、開發者可以用Cordova爲首的命令

簡單容易的做成Cordova工程、添加刪除插件。

好處：CLI命令可以快速做成Cordova工程，Native不懂的人可以迅速着手。                       
壞處：CLI不習慣使用沒有安裝nodejs等工具的開發環境下不方便、僅用於Cordova工程開發。

非CLI的話、Cordova的代碼需要自行下載（http://archive.apache.org/dist/cordova/ ），做成好的文件夾裏面

拷貝文件和相應的設置。

下面以Android爲例CLI的下載到CORDOVA工程的生成。(iOS的命令和Android是一樣的只不過安裝在本地的路徑區別)

１．nodejs文件夾下安裝Cordova CLI                        

　   npm install -g cordova   

安裝路徑爲：
C:\Documents and Settings\{userName} \Application Data\npm\node_modules\cordova    

２．在APP做成的文件夾下 生成Cordova的HelloWorld的工程        

cordova create hello com.example.hello  HelloWorld

３．作成的hello工程文件夾下Cordova命令追加支持的平臺。

下面以ANDROID爲例 cordova platforms add android

※刪除平臺的命令：cordova platform remove　android

４．編譯Cordova的hello工程    

        所有的OS都編譯的命令：cordova build
        只編譯Android OS的命令： cordova build android

５．Cordova工程的APP安裝    

   模擬器上安裝命令：cordova emulate android
   實際機器上安裝命令：cordova run android
空CordovaのAPP在Android的模擬器上默認的畫面是如下圖。    

Cordava文件夾結構

hello/
|-- config.xml
|-- hooks/
|-- platforms/
| |-- android/
| |-- ios/
|-- plugins/
| |-- org.apache.cordova.camera/
|-- www/
| |-- css/
| |-- img/
| |-- js/
  |-- index.html

config.xml cordovaの配置ファイル

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.hello" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HelloWorld</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <preference name="EnableViewportScale" value="true"/>
    <feature name="nativealert">
        <param name="android-package" value="com.test.nativealert.NativeAlert" />
    </feature>
    <author email="[email protected]" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
</widget>

<name> app名稱
<widget>　id 包名、version 版本號

<access>  origin 是訪問域名限制

<access origin="http://example.com" />
<access origin="http://foobar.example.com" />
<access origin="http://*.example.com" />
<access origin="*" /> （表示哪都可以訪問）

<preference> APP運行時的參數，平臺不同設置不同。
<feature > Native的插件內容（例如cordova plugin add org.apache.cordova.camera執行後有plugin.xml文件拷貝到這裏）                
<content> 網頁訪問地址。默認是index.html

hooks文件夾
Cordova命令在執行前執行後可以執行的腳本文件

platforms文件夾
存放各個平臺代碼文件夾，支持平臺的命令執行後代碼自動添加該文件夾

plugins文件夾
插件文件夾，插件增加的命令執行後自動添加到該文件夾

www文件夾
放置WEB資源和網頁的文件比如index.html