Cordova 3.x+ 基礎 -- 環境搭建（Windows / Android）

Cordova 3.x+ 基礎 -- 環境搭建（Windows / Android）

1.    PhoneGap(Cordova)

        Mobile App分爲三大類：Native App,HybridApp,Web App。其中Hybrid App介於Native App和Web App之間，它能兼顧Native App的良好用戶體驗及強大的功能並具有WebApp跨平臺快速開發的優勢。缺點在於依賴於各平臺的WebView，WebView的性能好壞直接決定了Hybrid App的性能。

    目前國內外的HybridApp開發框架很多，比較有代表的是國外的Cordova(akaPhoneGap)、Sencha Touch、Titanium、Intel XDK、RhoMobile、Xamarin等和國內的AppCan、Rexsee、xFace，而Dr. Dobb's Journal頒佈的2014年度移動開發工具類Jolt大獎中 PhoneGap和Titanium獲得Jolt生產力獎。Titanium應該屬於Web到Native的Converter，還有一種就是 NativeJavaScript的應用，比如Chrome Apps／Firefox OS／Windows 8 apps。

    基於開源的Cordova，各大公司都推出了自己的產品，比如：AdobePhoneGap、Oracle ADF Mobile、SAP Kapsel、IBM Worklight、Microsoft的Visual Studio也支持Cordova。

2.    安裝運行

（1）前提環境

    安裝Ant，把%ANT_HOME%\bin加到Path環境變量中，不然會報Error “executing command 'ant'”錯。

引用

ant -h
ant -version

安裝AndroidSDK，把%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools加到Path環境變量中，不然會 報"Error:An error occurred while listing Android targets"錯，並提前創建好一個AVD。

引用

android -h
adb version
android list avd

    安裝Node.js

引用

node -v
npm -v

如果需要從git地址安裝插件，好需要安裝Git

引用

git --version

（2）安裝PhoneGapCordova CLI

引用

> npm install -g phonegap

> npm install -gcordova

安裝路徑：
C:\Users\YourDomain\AppData\Roaming\npm\node_modules\cordova


    更新Cordova版本

引用

npm update cordova –g

如果安裝速度很慢的話可以設置代理：

引用

npm config set proxyhttp://xx.xx.xx.xx:xxxx
npm config set https-proxy http://xx.xx.xx.xx:xxxx
npm config list

或者使用國內的鏡像站：http://cnpmjs.org

引用

 

npm config set registryhttp://registry.cnpmjs.org
npm info cordova
npm --registry http://registry.cnpmjs.org info cordova

（3）創建並運行project

a.進入需要放置工程的文件夾pro，並進入

引用

> cd  C:\...\pro

b.創建一個“myapp”工程，包命爲com.yourname.myapp，標題爲MyApp

引用

> cordova create myapp “com.yourname.myapp” MyApp

c.進入工程目錄

引用

> cd myapp

d.添加平臺支持

引用

> cordova platforms addios
> cordova platforms add android

> cordova platforms ls(查看安裝了哪些平臺)

CLI使用各個平臺的SDK來創建工程。

更新Cordova工程平臺的版本

cordova platform check

如果有類似“android @ 3.3.0 could be updatedto: 3.4.0”的提示可以執行更新
也可以查看platforms\android\assets\www\cordova.js確認當前版本信息

cordova platform update android

如果提示“All platforms are up-to-date.”說明不需要更新。

e.添加插件

引用

>  cordova plugin searchkeyword（搜索相關keyword插件）

 

> cordova plugin addorg.apache.cordova.device
> cordova plugin add org.apache.cordova.console

> cordova plugin ls

插件可以從很多地方安裝：

第三方插件庫：http://plugins.cordova.io/#/

插件名（從plugin repository下載）：cordova plugin add org.apache.cordova.console
git地址：cordova plugin addhttps://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
本地地址：cordova plugin addd:\cordova-3.3.0\cordova-plugin-camera
本地文件：cordova plugin add plugin.tar.gz
指定版本
cordova plugin add [email protected]
cordova plugin add https://github.com/apache/cordova-plugin-console.git#r0.2.0
cordova plugin add https://github.com/someone/aplugin.git#:/my/sub/dir
cordova plugin add https://github.com/someone/aplugin.git#r0.0.1:/my/sub/dir
等等

f.編譯代碼

引用

> cordova build android

g.運行代碼
在模擬器上運行（前提是創建好AVD）

引用

> cordova emulateandroid

Windows下convert命令衝突，直接“cordova emulate android”會報Error: spawn ENOENT，需要先啓動模擬器。

h.在瀏覽器運行（服務器）

引用

> cordova serve android

瀏覽器訪問地址：http://localhost:8000/，就可以和調試頁面一樣調試app的佈局了。如果app中使用了cordova的NativeAPI調用，會彈出以下對話框：

這是因爲瀏覽器無法提供@JavascriptInterface的接口，Cordova視圖通過prompt()和Native交互，這樣做是因爲Android2.3 simulator的Bug。所以調試頁面佈局，無視即可。

i.通過USB直接安裝到真機

引用

> cordova run android

（注：可用PhoneGap指令替換，如下：

$ phonegap  create  yourProjectName  “com.example.yourpackage”  yourProjectTitleName

$ cd  yourProjectName 

$ phonegap  run  android （run + 平臺，表示在那個平臺下運行編譯））

3.    常用命令

（1）create <directory> [<id> [<name>]]
創建一個cordova工程，id爲package名。

（2）platform [ls | list]
列出該工程支持哪些平臺

（3）platform add <platform> [<platform> ...]
爲工程添加一個或多個平臺支持

（4）platform [rm | remove] <platform> [<platform>...]
刪除該工程的某個平臺支持

（5）platform [up | update] <platform>
更新該工程某個平臺的Cordova版本

（6）plugin [ls | list]
列出該工程包含哪些插件

（7）plugin add <path-to-plugin> [<path-to-plugin>...]
爲工程添加一個或多個插件

（8）plugin [rm | remove] <plugin-name>[<plugin-name> ...]
從該工程中刪除某個插件

（9）plugin search [<keyword1> <keyword2> ...]
根據關鍵字從registry中搜索插件

（10）compile [platform...]
編譯指定平臺的app包

（11）build [<platform> [<platform> [...]]]
先做prepare（拷貝文件）後做compile

（12）emulate [<platform> [<platform> [...]]]
啓動模擬器運行應用

（13）serve [port]
啓動本地web服務來訪問www，默認端口是8000

引用

platform和platforms等價
plugin和plugins等價

詳細的內容可以通過cordova help命令查看。

目錄結構

（1）目錄一覽：

引用

myApp/
|-- config.xml
|-- hooks/
| | |-- before_xxx/
| | `-- after_xxx/
|-- merges/
| | |-- android/
| | `-- ios/
|-- platforms/
| |-- android/
| `-- ios/
|-- plugins/
| |-- org.apache.cordova.console/
| `-- org.apache.cordova.device/
|-- www/
| |-- css/
| |-- img/
` |-- js/
  `-- index.html

（2）config.xml
cordova的配置文件

（3）hooks目錄
存放自定義cordova命令的腳本文件。每個project命令都可以定義before和after的Hook，比如：before_build、after_build。
Hook可以採用任何編程語言來寫，Cordova CLI採用的是Node.js，所以一般都是用它來寫。

這裏提供了3個常用的Hook腳本：
http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/

（4）merges目錄
存放各個平臺特殊的文件，會和www進行合併編譯，相同的文件merges下的文件優先。

比如：

引用

merges/
|-- ios/
| `-- app.js
|-- android/
| `-- android.js
www/
`-- app.js

編譯成iOS應用的話，包含merges/ios/app.js；而Android應用的話，包含www/app.js、merges/android/android.js

（5）platforms目錄
各個平臺的原生代碼工程，不要手動修改，因爲在build的時候會被覆蓋。

（6）plugins目錄
插件目錄（cordova提供的原生API也是以插件的形式提供的）。

（7）www目錄
源代碼目錄，在cordova prepare的時候會被copy到各個平臺工程的assets\www目錄中。
其中index.html爲應用的入口文件。