鄭重聲明:此系列博客文章所涉知識點來自他人博客轉摘,由自己親手實踐後加以總結,省略了很多操作細節,目的是鞏固所學,後續將陸續推出關於Cordova的自學系列博文。
一、關於Cordova的一些認知
Mobile App分為三大類:Native App,Hybrid App,Web App。其中Hybrid App介於Native App和Web App之間,它能兼顧Native App的良好用戶體驗及強大的功能並具有Web App跨平台快速開發的優勢。缺點在於依賴於各平台的WebView,WebView的性能好壞直接決定了 Hybrid App的性能。 目前國內外的Hybrid App開發框架很多,比較有代表的是國外的Cordova(aka PhoneGap)、Sencha Touch、Titanium、Intel XDK、RhoMobile、Xamarin等和國內的AppCan、Rexsee、xFace,而Dr. Dobb's Journal頒布的2014年度移動開發工具類Jolt大獎中PhoneGap和 Titanium獲得Jolt生產力獎。Titanium應該屬於Web到Native的Converter,還有一種就是Native JavaScript的應用,比如Chrome Apps/Firefox OS/Windows 8 apps。 基於開源的Cordova,各大公司都推出了自己的產品,比如:Adobe PhoneGap、Oracle ADF Mobile、SAP Kapsel、IBM Worklight、Microsoft的Visual Studio也支持Cordova。
二、環境搭建的相關准備
1、JDK開發環境及環境變量的配置 檢測命令:java -version 2、Android SDK開發環境及環境變量的配置 檢測命令:android -h 3、Ant下載安裝及環境變量配置 檢測命令: ant -version 4、Nodejs下載安裝及環境變量配置 檢測命令:node -v npm -v 5、Git下載安裝及環境變量配置 檢測命令:git --version 6、Cordova CLI安裝及環境變量配置 檢測命令:npm install -g cordova
三、項目創建到運行系列操作
1、創建項目的根目錄,命令提示符中進入該目錄 cd e:\proroot.(以後通過各種命令生成或下載的文件都會放在這個目錄中)
2、創建一個項目firstdemo 命令:cordova create firstdemo com.test.firstdemo MyDemo 項目文件夾為firstdemo,包名為com.test.firstdemo,項目名稱為MyDemo(MyDemo也就是以後導入到eclipse工程後的工程名稱)
3、進入工程目錄firstdemo,添加平台支持,操作命令如下: cordova platforms add ios cordova platforms add android 顯示平台列表命令:cordova platforms ls
4、為項目添加所需要的開發插件,操作命令如下: cordova plugin add 命令需要開發員指定外掛程序代碼的存儲庫,常用插件列表如下:
(1)基本設備資訊API cordova plugin add org.apache.cordova.device
(2)網絡連接和電池事件 cordova plugin add org.apache.cordova.network-information cordova plugin add org.apache.cordova.battery-status
(3)加速指針、指南針和地理位置 cordova plugin add org.apache.cordova.device-motion cordova plugin add org.apache.cordova.device-orientation cordova plugin add org.apache.cordova.geolocation
(4)相機、媒體重播和捕獲 cordova plugin add org.apache.cordova.camera cordova plugin add org.apache.cordova.media-capture cordova plugin add org.apache.cordova.media
(5)訪問設備或網絡上的文件 cordova plugin add org.apache.cordova.file cordova plugin add org.apache.cordova.file-transfer
(6)通過對話框或振動發出通知 cordova plugin add org.apache.cordova.dialogs cordova plugin add org.apache.cordova.vibration
(7)連系人 cordova plugin add org.apache.cordova.contacts
(8)國際化 cordova plugin add org.apache.cordova.globalization (9)閃屏(啟動動畫) cordova plugin add org.apache.cordova.splashscreen
(10)打開新的浏覽器窗口 cordova plugin add org.apache.cordova.inappbrowser
(11)調試主控台 cordova plugin add org.apache.cordova.console
5、編譯項目代碼 cordova build android
6、運行項目 (1)在模擬器上運行:cordova emulate android(需要先創建好虛擬機) (2)通過USB在真機上運行:cordova run android (3)在浏覽器上運行:cordova serve android
注意:每次對項目做了改動之後,需要運行編譯命令和運行命令才能看到最新的效果 四、常用命令
(1)create
[ [name]] 創建一個cordova工程,id為package名。
(2)platform [ls | list] 列出該工程支持哪些平台
(3)platform add [...] 為工程添加一個或多個平台支持
(4)platform [rm | remove] [...] 刪除該工程的某個平台支持
(5)platform [up | update] 更新該工程某個平台的Cordova版本
(6)plugin [ls | list] 列出該工程包含哪些插件
(7)plugin add [path-to-plugin...] 為工程添加一個或多個插件 (8)plugin [rm | remove] [plugin-name...] 從該工程中刪除某個插件
(9)plugin search [ ...] 根所關鍵字從registry中搜索插件
(10)compile [platform...] 編譯指定平台的app包
(11)build [ [] [...]] 先做prepare(拷貝文件)後做compile
(12)emulate[ [][...]] 啟動模擬器運行應用
(13)serve[port] 啟動本地web服務來訪問www,默認端口是8080
五、Cordova相關文件簡介 1、config.xml cordova的配置文件
2、hooks目錄 存放自定義cordova命令的腳本文件。每個project命令都可以定義before和after的Hook,比如:before_build、after_build。 Hook可以采用任何編程語言來寫,Cordova CLI采用的是Node.js,所以一般都是用它來寫。
3、merges目錄 存放各個平台特殊的文件,會和www進行合並編譯,相同的文件merges下的文件優先。編譯使用
4、platforms目錄 各個平台的原生代碼工程,不要手動修改,因為在build的時候會覆蓋。
5、plugins目錄 插件目錄(cordova提供的原生API也是以插件的形式提供的) 6、www目錄 源代碼目錄,在cordova prepare的時候會被copy到各個平台工程的assets\www目錄中。其中index.html為應用的入口文件。