淺談Cordova優(yōu)缺點與環(huán)境部署

1、簡介Cordova是一個用基于HTML、CSS和JavaScript的，用于創(chuàng)建跨平臺移動應(yīng)用程序的快速開發(fā)平臺。它使開發(fā)者能夠利用iPhone、Android、Palm、Symbian、WP7、Bada和Blackberry等智能手機(jī)的核心功能包括地理定位、加速器、聯(lián)系人、聲音和振動等，此外Cordova擁有豐富的插件，可以調(diào)用。優(yōu)缺點時下流行的移動Web應(yīng)用可分為三種：原生應(yīng)用、Web應(yīng)用和混合型應(yīng)用。原生應(yīng)用：通過各種應(yīng)用市場安裝，采用平臺特定語言開發(fā)。Web應(yīng)用：通過瀏覽器訪問，采用Web技術(shù)開發(fā)?；旌闲蛻?yīng)用：通過各種應(yīng)用市場安裝，但采用Web技術(shù)開發(fā)。它雖然看上去是一個原生應(yīng)用，但里

2、面訪問的實際上是一個Web應(yīng)用。原生應(yīng)用的優(yōu)勢：提供最佳的用戶體驗、最優(yōu)質(zhì)的用戶界面和最華麗的交互；針對不同平臺提供不同體驗；可節(jié)省帶寬成本；可訪問本地資源；盈利模式明朗。原生應(yīng)用的劣勢：移植到不同平臺上比較麻煩；維護(hù)多個版本的成本比較高；需要通過store或market確認(rèn)；盈利需要與第三方分成。Web應(yīng)用的優(yōu)勢如下：開發(fā)成本低；適配多種移動設(shè)備的成本低；跨平臺和終端；迭代更新容易；無需安裝成本。Web應(yīng)用的劣勢如下：瀏覽體驗短期內(nèi)還無法超越原生應(yīng)用；不支持離線模式（HTML5將會解決這個問題）；消息推送不夠及時；調(diào)用本地文件系統(tǒng)的能力弱。混合型應(yīng)用可以說是為了彌補(bǔ)上面兩種應(yīng)用開發(fā)模式的缺陷

3、而生，它是兩者混合的產(chǎn)物，并且盡可能繼承了雙方的優(yōu)勢：首先，它可以讓眾多Web開發(fā)人員幾乎零成本地轉(zhuǎn)型成移動應(yīng)用開發(fā)者。其次，相同的代碼只需針對不同平臺進(jìn)行編譯就能實現(xiàn)在多平臺的分發(fā)，大大提高了多平臺開發(fā)的效率。而相較于Web應(yīng)用，開發(fā)者可以通過包裝好的接口調(diào)用大部分常用的系統(tǒng)API。作為本文所講的Cordova，Cordova正是混合型框架中的佼佼者，它基于標(biāo)準(zhǔn)的Web技術(shù)HTML、JavaScript和CSS，用JavaScript包裝平臺的API供開發(fā)者調(diào)用，具備強(qiáng)大的編譯工具來為不同平臺生成應(yīng)用，同時擁有豐富的第三方資源和產(chǎn)業(yè)鏈。PhoneGap在Web應(yīng)用和設(shè)備之間搭建了一個通信的橋

4、梁，封裝了移動設(shè)備的平臺差異，統(tǒng)一使用JavaScript接口訪問設(shè)備本地API，以此提供了一個優(yōu)秀的跨平臺解決方案。相信大家都對移動應(yīng)用開發(fā)的框架使用已經(jīng)有大概了解。接下來就講述Cordova的環(huán)境部署。用命令行的方式來部署Cordova：1.安裝 nodejs下載：/download/.安裝完畢后需要重啟。2.安裝 cordova打開cmd命令行，執(zhí)行：npm install -g cordova安裝約10分鐘。3.安裝 ant下載ant包，解壓到一個文件夾，如：E:NodeJsapache-ant-1.9.6Ant官網(wǎng)：http:/ant.apache.o

5、rg/bindownload.cgi配置環(huán)境變量：配置環(huán)境變量.(如果不清楚環(huán)境變量配置的話，可以查找相關(guān)資料，這里不做具體介紹。)window中設(shè)置ant環(huán)境變量：（以筆者為例）ANT_HOME： E:NodeJsapache-ant-1.9.6Path： E:NodeJsapache-ant-1.9.6binClasspath： E:NodeJsapache-ant-1.9.6lib配置該路徑到環(huán)境變量中，此時若android sdk未配置環(huán)境變量的，一并配置。以防后面報錯。Window中設(shè)置androidSDK環(huán)境變量：ANDROID_SDK_HOME ：E:AndroidSDKPATH

6、：%ANDROID_HOME%tools; 驗證：android hWindow中設(shè)置androidSDK環(huán)境變量：ANDROID_HOME ：E:AndroidSDKPATH：;%ANDROID_SDK_HOME%platform-tools;%ANDROID_SDK_HOME%tools;驗證：adb4.創(chuàng)建一個 cordova 工程cordova create hello com.shj.helloworld helloapp其中，第一個 hello 是文件夾的名稱；om.shj.helloworld 是app id，第二個 helloapp是工程的名稱，也是應(yīng)用的名稱。提示下載庫，請等

7、待。下載完成。5.進(jìn)入工程文件夾cd hello6.添加平臺支持有多種平臺可選.命令如下：$ 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此處選擇cordova p

8、latform add android在工程文件夾下輸入該命令：項目創(chuàng)建完畢。7.添加插件支持主要為系統(tǒng)硬件訪問的插件，常見如照相機(jī)、媒體訪問、設(shè)備訪問、加速設(shè)備、定位設(shè)備等?？梢詣討B(tài)的按需求去添加，譬如按以下方式添加,，更多插件請去cordova 官網(wǎng)查看?；驹O(shè)備資訊 （設(shè)備 API）：$ cordova plugin add org.apache.cordova.device網(wǎng)路連接和電池事件：$ cordova plugin add work-information$ cordova plugin add org.apache.cordova.battery-status相機(jī)、 媒體重

9、播和捕獲：$ cordova plugin add org.apache.cordova.camera$ cordova plugin add org.apache.cordova.media-capture$ cordova plugin add org.apache.cordova.media訪問設(shè)備或網(wǎng)路 （檔 API） 上的檔：$ cordova plugin add org.apache.cordova.file$ cordova plugin add org.apache.cordova.file-transfer8.構(gòu)建應(yīng)用cordova build若上圖出現(xiàn)此命令需更新ant版

10、本上圖出現(xiàn)該提示，BUILD成功。即將 hello/www 下的內(nèi)容，構(gòu)建到添加的各平臺內(nèi)。如 android 平臺，會構(gòu)建到此目錄：helloplatformsandroidassetswww。eg:android 將主目錄下文件導(dǎo)入 android 和 IOS 相關(guān)目錄下進(jìn)入目錄： cordova build android 遇到兩個問題：1.需要下載gradle-2.2.1-all； 放入到C:Userszhangxy02.gradlewrapperdistsgradle-2.2.1-all2m8005s69iu8v0oiejfej094b目錄下面；9.測試應(yīng)用A)在模擬器上安裝測試應(yīng)用

11、如android平臺，應(yīng)先將 android 模擬器啟動并打開。cordova emulate androidB)使用真機(jī)測試（推薦）可使用如下命令：cordova run androidC)在瀏覽器中運行cordova serve androidD)使用 Ripple Emulator 調(diào)試npm install -g ripple-emulatorripple emulate打包為發(fā)布的應(yīng)用打包android應(yīng)用：借助 eclipse 來完成。打開安裝配置好 adt 插件的 eclipse ，使用向?qū)?dǎo)入一個 android 項目的方式，選擇當(dāng)前工程文件夾，此時會顯示導(dǎo)入兩個項目，導(dǎo)入即可。項目成功導(dǎo)進(jìn)來了。接下來就可以把網(wǎng)頁直接放到項目里面了。先看PC直接打開網(wǎng)頁的效果。這是未修改配置的啟動界面。也就是剛剛