Cordova入門課程

標籤：android   cordova   

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

 

1. 安裝 nodejs

下載：http://nodejs.org/download/

2. 安裝 cordova

開啟cmd命令列，執行：

npm install -g cordova

3. 安裝 ant

ant 下載：

http://ant.apache.org/bindownload.cgi?Preferred=http%3A%2F%2Fmirrors.cnnic.cn%2Fapache%2F

4. 建立一個 cordova 工程

cordova create 建立檔案目錄  包名  項目名稱(如果省略包名就會建立一個預設包名和項目名稱的cordova的項目)，例如：cordova create d:\cordovatest com.saiven.cordovaTest CordovaTestProject

5. 進入工程檔案夾

 

6. 添加平台支援

有選擇的添加即可，如這裡以 android 樣本。首先應確定已安裝配置好了 Android SDK 開發環境，然後執行如下命令：

$ cordova platform add android

您也可有選擇的添加其他平台支援，針對每種平台，均應確定已配置好了對應平台的開發環境。

$ cordova platform add ios

$ cordova platform add amazon-fireos

$ cordova platform add android

$ cordova platform add blackberry10

$ cordova platform add firefoxos

$ cordova platform add wp7

$ cordova platform add wp8

$ cordova platform add windows8

7. 添加外掛程式支援

主要為系統硬體訪問的外掛程式，常見如照相機、媒體訪問、裝置訪問、加速裝置、定位裝置等。應按需添加。

基本裝置資訊 （裝置 API）：

$ cordova plugin add org.apache.cordova.device

網路串連和電池事件：

$ cordova plugin add org.apache.cordova.network-information

$ cordova plugin add org.apache.cordova.battery-status

加速度計、 指南針、 和地理定位：

$ cordova plugin add org.apache.cordova.device-motion

$ cordova plugin add org.apache.cordova.device-orientation

$ cordova plugin add org.apache.cordova.geolocation

相機、 媒體重播和捕獲：

$ cordova plugin add org.apache.cordova.camera

$ cordova plugin add org.apache.cordova.media-capture

$ cordova plugin add org.apache.cordova.media

訪問裝置或網路 （檔 API） 上的檔：

$ cordova plugin add org.apache.cordova.file

$ cordova plugin add org.apache.cordova.file-transfer

通過對話方塊或震動發出通知：

$ cordova plugin add org.apache.cordova.dialogs

$ cordova plugin add org.apache.cordova.vibration

連絡人：

$ cordova plugin add org.apache.cordova.contacts

全球化：

$ cordova plugin add org.apache.cordova.globalization

閃屏：

$ cordova plugin add org.apache.cordova.splashscreen

開啟新的瀏覽器視窗 (InAppBrowser):

$ cordova plugin add org.apache.cordova.inappbrowser

調試主控台：

$ cordova plugin add org.apache.cordova.console

查看當前應用已安裝的外掛程式：

$ cordova plugin ls # or ‘plugin list’

[ ‘org.apache.cordova.console’ ]

刪除已安裝的外掛程式：

$ cordova plugin rm org.apache.cordova.console

$ cordova plugin remove org.apache.cordova.console # same

通過多個參數增加或刪除外掛程式：

$cordovaplugin add org.apache.cordova.console org.apache.cordova.device

具體可參考這裡：

http://docs.phonegap.com/zh/3.4.0/guide_cli_index.md.html

8. 參考 API 文檔，開發應用

主要為開發 lzwmeapp/www 目錄下的 html5 應用。志文工作室推薦您結合 jQuery Mobile 或 Sencha Touch 進行快速開發。

API 參考：

http://docs.phonegap.com/zh/3.4.0/cordova_plugins_pluginapis.md.html

http://docs.phonegap.com/zh/3.4.0/cordova_events_events.md.html

9. 構建應用

cordova build

或

cordova build android

即將 lzwmeapp/www 下的內容，構建到添加的各平台內。如 android 平台，會構建到此目錄：

lzwmeapp\platforms\android\assets\www

10. 測試應用

10.1 在模擬器上安裝測試應用

如android平台，應先將 android 模擬器啟動並開啟。

cordova emulate android

10.2 使用真機測試（推薦）

可使用如下命令：

cordova run android

10.3 在瀏覽器中運行

cordova serve android

10.4 使用 Ripple Emulator 調試

npm install -g ripple-emulator

ripple emulate

詳細參考：http://lzw.me/a/ripple-emulator.html

11. 打包為發布的應用

1. 本地打包（需要安裝配置對應平台開發環境）

cordova build android –release

2. phonegap 線上打包

https://build.phonegap.com/

3. 新浪 sae 雲窗調試器

http://sae.sina.com.cn/doc/mobile/tutorial.html

4. 打包android應用：藉助 eclipse 來完成

12. 常用命令

（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命令查看。

13. 目錄結構

assets\www 

這個就是Cordova工程根目錄下的www檔案夾的所有內容。（cordova.js和cordova_plugins.js是Cordova自動建立的） 

 

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

 

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

14. UI架構介紹

文檔一開始提到Cordova只是提供硬體裝置調用的介面，不提供任何UI的支援。UI架構方面我們主要介紹JQueryMobile和SenchaTouch

14.1 JQueryMobile簡介

jQuery Mobile是jQuery 在手機上和平板裝置上的版本。jQuery Mobile 不僅會給主流移動平台帶來jQuery核心庫，而且會發布一個完整統一的jQuery移動UI架構。支援全球主流的移動平台。

此架構簡單易用。頁面開發主要使用標記，無需或僅需很少 JavaScript。

jQuery Mobile 架構的整體大小比較小，JavaScript 庫 12KB，CSS 6KB，還包括一些表徵圖。

所有瀏覽器都應該能夠訪問全部基礎內容。

所有瀏覽器都應該能夠訪問全部基礎功能。

開發方式：html(html5) + css(css3) + javascript

14.2 SenchaTouch簡介

Sencha Touch可以讓你的Web App看起來像Native App。美麗的使用者介面組件和豐富的資料管理，全部基於最新的HTML5和CSS3的 WEB標準，全面相容Android和Apple iOS裝置。

基於JavaScript編寫的Ajax架構ExtJS,將現有的ExtJS整合JQTouch、Rapha?l庫，推出適用於最前沿Touch Web的Sencha Touch架構

開發方式：Extjs(javascript)

 

14.3 JQueryMobile和SenchaTouch比較JQueryMobile優點：

ü 易開發

ü 不錯的第三方支援，外掛程式就是知識，知識就是力量

ü 易調試

ü Stackoverflow

JQueryMobile卻點：

ü 比Sencha Touch慢

ü APP幾乎是同樣的UI，如果你是個能忍的UI設計師，那你就可以接受這種獃滯的UI

ü 官方文檔缺少一些東西，因為其在UI方面介紹的太多而欠缺在架構方面的介紹

 

SenchaTouch優點：

ü 運行非非常流暢，有中像是原生API開發的一樣

ü 有MVC結構

ü 文檔很完美

 

SenchaTouch缺點：

ü 對於缺乏經驗的開發人員來說過於複雜

ü 第三方支援太少

ü 由於只支援webkit，所以除過混合應用程式外，對於一般程式來說作用不大

ü IDE和支援都得付費

 

 

 

 

 

 

Cordova入門課程