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

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

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

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

4、梁，封裝了移動(dòng)設(shè)備的平臺(tái)差異，統(tǒng)一使用JavaScript接口訪問(wèn)設(shè)備本地API，以此提供了一個(gè)優(yōu)秀的跨平臺(tái)解決方案。相信大家都對(duì)移動(dòng)應(yīng)用開(kāi)發(fā)的框架使用已經(jīng)有大概了解。接下來(lái)就講述Cordova的環(huán)境部署。用命令行的方式來(lái)部署Cordova：1.安裝 nodejs下載：/download/.安裝完畢后需要重啟。2.安裝 cordova打開(kāi)cmd命令行，執(zhí)行：npm install -g cordova安裝約10分鐘。3.安裝 ant下載ant包，解壓到一個(gè)文件夾，如：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)境變量中，此時(shí)若android sdk未配置環(huán)境變量的，一并配置。以防后面報(bào)錯(cuò)。Window中設(shè)置androidSDK環(huán)境變量：ANDROID_SDK_HOME ：E:AndroidSDKPATH

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

7、待。下載完成。5.進(jìn)入工程文件夾cd hello6.添加平臺(tái)支持有多種平臺(tái)可選.命令如下：$ 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在工程文件夾下輸入該命令：項(xiàng)目創(chuàng)建完畢。7.添加插件支持主要為系統(tǒng)硬件訪問(wèn)的插件，常見(jiàn)如照相機(jī)、媒體訪問(wèn)、設(shè)備訪問(wèn)、加速設(shè)備、定位設(shè)備等?？梢詣?dòng)態(tài)的按需求去添加，譬如按以下方式添加,，更多插件請(qǐng)去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訪問(wèn)設(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)建到添加的各平臺(tái)內(nèi)。如 android 平臺(tái)，會(huì)構(gòu)建到此目錄：helloplatformsandroidassetswww。eg:android 將主目錄下文件導(dǎo)入 android 和 IOS 相關(guān)目錄下進(jìn)入目錄： cordova build android 遇到兩個(gè)問(wèn)題：1.需要下載gradle-2.2.1-all； 放入到C:Userszhangxy02.gradlewrapperdistsgradle-2.2.1-all2m8005s69iu8v0oiejfej094b目錄下面；9.測(cè)試應(yīng)用A)在模擬器上安裝測(cè)試應(yīng)用

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