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

1、Cordova優(yōu)缺點(diǎn)與環(huán)境部署一、簡(jiǎn)介Cordova是一個(gè)用基于HTML、CSS和JavaScript的，用于創(chuàng)建跨平臺(tái)移動(dòng)應(yīng)用程序的Bada和快速開(kāi)發(fā)平臺(tái)。它使開(kāi)發(fā)者能夠利用iPhone、Android、Palm、Symbian、WP7Bada和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)安裝，口采用W

2、eb技術(shù)開(kāi)發(fā)。它雖然看上去是一個(gè)原生應(yīng)用，口里面訪問(wèn)的實(shí)際上是一個(gè)Web應(yīng)用。原生應(yīng)用的優(yōu)勢(shì)：1、提供最佳的用戶體驗(yàn)、最優(yōu)質(zhì)的用戶界面和最華麗的交互；2、針對(duì)不同平臺(tái)提供不同體驗(yàn)；3、可節(jié)省帶寬成本；4、可訪問(wèn)本地資源；5、盈利模式明朗。原生應(yīng)用的劣勢(shì)：1、移植到不同平臺(tái)上比較麻煩；2、維護(hù)多個(gè)版本的成本比較高；3、需要通過(guò)store或market確認(rèn)；4、盈利需要與第三方分成。Web應(yīng)用的優(yōu)勢(shì)如下：1、開(kāi)發(fā)成本低；2、適配多種移動(dòng)設(shè)備的成本低；3、口平臺(tái)和終端；4、迭代更新容易；5、無(wú)需安裝成本。Web應(yīng)用的劣勢(shì)如下：1、瀏覽體驗(yàn)短期內(nèi)還無(wú)法超越原生應(yīng)用；2、不支持離線模式（HTML5將會(huì)解

3、決這個(gè)問(wèn)題）;3、消息推送不夠及時(shí)；4、調(diào)用本地文件系統(tǒng)的能力弱?；旌闲蛻?yīng)用可以說(shuō)是為了彌補(bǔ)上面兩種應(yīng)用開(kāi)發(fā)模式的缺陷而生，它是兩者混合的產(chǎn)物，并且盡可能繼承了雙方的優(yōu)勢(shì)：首先，它可以讓眾多Web首先，它可以讓眾多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ā)的效率。而相較于WebDO,開(kāi)發(fā)者可以通過(guò)包裝好的接口調(diào)用大部分常用的系統(tǒng)API。作為本文所講的Cordova,Cordova正是混合型框架中的佼佼者，口基于標(biāo)準(zhǔn)的Web技術(shù)HTML、JavaScript和CSS,OJavaScript包裝平臺(tái)的API供

4、開(kāi)發(fā)者調(diào)用，具備強(qiáng)大的編譯工具來(lái)為不同平臺(tái)生成應(yīng)用，同時(shí)擁有豐富的第三方資源和產(chǎn)業(yè)鏈。PhoneGap在Web應(yīng)用和設(shè)備之間搭建了一個(gè)通信的橋梁，封裝了移動(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：.安裝nodejs下載： HYPERLINK /download/.%e5%ae%89%e8%a3%85%e5%ae%8c%e6%af%95%e5%90%8e%e9%9c%80%e8%a6%81%e9%87%8d

5、%e5%90%af%e3%80%82 /download/.安裝完畢后需要重啟。.安裝cordova打開(kāi)cmd命令行，執(zhí)行：npminstall-gcordova安裝約10分鐘。CMsd1,3SAdeidniati-AlorriprrInsta-gcordounDataXJiojkninsnpfnMo(J.e_riodulesxe*i*CfliTinwa-lthpft.21跖H*31-2*11.properties-parserPH-33bnlist-parse3BHvearl?2shelljsEQl4自pmPl3q.dep-g-raplii?1.1.0kcu.6.6letnenttreel?

6、e.1.S,nptn&nf(??globed.2.11jjliscwitlJ-patcheS6.5.1,re：(ru.estO2r2S.3Fc蚓3電.cordpva-js63.6n2C=、11s-sI*sAdndnxsti*a.tcr.安裝ant下載ant下載ant包，解壓到一個(gè)文件夾，如：軟酷網(wǎng)DDDDDD配置該路徑到環(huán)境變量中，此時(shí)若面報(bào)錯(cuò)。androidsdk配置該路徑到環(huán)境變量中，此時(shí)若面報(bào)錯(cuò)。androidsdk未配置環(huán)境變量的，一并配置。以防后.創(chuàng)建一個(gè)cordova工程cordovacreatehellocom.shj.helloworldhelloapp其中，

7、第一個(gè)hello是文件夾的名稱;是工程的名稱，也是應(yīng)用的名稱。om.shj.helloworld是其中，第一個(gè)hello是文件夾的名稱;是工程的名稱，也是應(yīng)用的名稱。提示下載口，請(qǐng)等待。1）：VcflrdouaGreatshellocfln.shj.hGllDuar-ld.heiloapptreatingfanewcord&jectuithandidt4cchfn.shj.heLlouorld*1a.tLocationxhtlljolhDouenLoadingccrdova.libraryfor”，Dounloadconplete下載完成。.進(jìn)入工程文件夾cdhello.添加平臺(tái)支持有多種平臺(tái)

8、可選.命令如下：$cordovaplatformaddios$cordovaplatformaddamazon-fireos$cordovaplatformaddandroid$cordovaplatformaddblackberry10$cordovaplatformaddfirefoxos$cordovaplatformaddwp7$cordovaplatformaddwp8$cordovaplatformaddwindows8此處選擇cordovaplatformaddandroid在工程文件夾下輸入該命令：軟酷網(wǎng)DDDDDDDtxhc1Lutdr.dAUapLatfoinAddidDa

9、kinLoa.iilng(cdfiJoualibi*Ai-9fofandroid_.DDUnIta.dGreatLiigdifidiroidproject.Greatin9Gordo4aptrojectfortheflndraidplat-fPath：iJlatFormsAiid.raidf-com.slij.heliauarldHamh匕口口ppAndinidtarget-andlraid-lCopyingtemplatefiles-.RiAFintnr-androidupdatepibojectskibjpiojectspathplatfopm&androi(i0-上aE$Etandioi

10、d-19libi*apyJCbFiiauaLiliiResulued.Ideationoflibpapifpp&jectto：D：helloKplatfOFm&xak/idp&idXJCardcuiLibUpdated,pertiestopi,pertiesUpdatellocal.pFapartiesNoprojectnamespecifi&d,usinyfictiuit9nAine*he1loapp*.If9011vLshtochangeit,edittJiefirstlineofhuild.krL_AddedfileD；ielloplatf&rixsandroidxbuildxnlAdd

11、edfileD；MiElloDlatfofUbsvaitdrnzidiJrDSHJiintL-prDject(;第匕Updated,petti&s：Updated.LHerprojectnamespecifiedfitsin尋projectFoLdtr-name1CoiHdouaLib,.1FyouiJLshtochangeitreriittJiefiistlineofhulld.xnL_AdtieelfileD：Miello*vplatfor-nsandioidGorelovaLihJiuild.xmlAddedfileD：1ie11oplatf&pmsAridpoidCopovaLihpi

12、sjguard-pvojfctt.txtFt*j心心u_ce轡gfuJlycreate*.DODOODD7.000000主要為系統(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è)備APID：$cordovapluginaddorg.apache.cordova.device網(wǎng)路連接和電池0：$work-information$cordovapluginaddorg.apache.cordova.battery-status相機(jī)、媒體重播和捕獲：$cordovapluginad

13、dorg.apache.cordova.camera$cordovapluginaddorg.apache.cordova.media-capture$cordovapluginaddorg.apache.cordova.media訪問(wèn)設(shè)備或網(wǎng)路(檔API)上的檔：$cordovapluginaddorg.apache.cordova.file$cordovapluginaddorg.apache.cordova.file-transfer.構(gòu)建應(yīng)用軟酷網(wǎng)軟酷網(wǎng)cordovabuild HYPERLINK 口上圖出現(xiàn)此命令需更新ant版本BUILDSUCCESSFULTotaltime;1,3

14、9seconds上圖出現(xiàn)該提示，BUILD成功。即將hello/www下的內(nèi)容，構(gòu)建到添加的各平臺(tái)內(nèi)。如android平臺(tái)，會(huì)構(gòu)建到此目錄：helloplatformsandroidassetswww。.測(cè)試應(yīng)用A）在模擬器上安裝測(cè)試應(yīng)用如android平臺(tái)，應(yīng)先將android模擬器啟動(dòng)并打開(kāi)。cordovaemulateandroidB）使用真機(jī)測(cè)試（推薦）可使用如下命令：cordovarunandroidC）在瀏覽器中運(yùn)行cordovaserveandroidD）使用RippleEmulator調(diào)試npminstall-gripple-emulatorrippleemulate打包為發(fā)布

15、的應(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)入即可。Sele-ctanimportsource:typefiltertextGeneral1_ndfciid曾ExiwtimgAndroidCedeJntoW&rkspaw&C/C+;以rGitl&Install&Run/口號(hào)bugh&GVM口&Team0&XMLImportProjrt帛Seiertsdire-ctorytosearchf&rexistingAndroidproje-rtsRootDire

16、ctory:D:helIoBrowse.Projects:Proje-rttoImportWewProjectNameSelectAll|VjplatformsXandroidh&lloappDes-electA.II印platforrri5androidCordovaLibhelloapp-CordovaLibRefreshCopyprojectsintoworkspace項(xiàng)目成功導(dǎo)進(jìn)來(lái)了。t:喝he-lloapphe-lloapp-CordovaLib接下來(lái)就可以把網(wǎng)頁(yè)直接放到項(xiàng)目里面了。先看PC直接打開(kāi)網(wǎng)頁(yè)的效果。軟酷網(wǎng)士r25publicclasshelloappexte-ndsCordovaActivity27-OverridepublicvoidanCrEBteCBundle5avedln5tanceState)2931superinit()j32-pihw門(mén)門(mén)十門(mén)門(mén)十.一二”！門(mén)Hpm.kj-m1，口門(mén)干上日用n*1335.七-1口11)廣1(匚口開(kāi)于士目、仔七5占口411()；34/super.lo-adUrl(lpfilei/iandrold_asse/Index.ahtmlin)j犯)36137publicifstaticStringget5tartLfrl()publicif(5EL./=null|set/startUrl=nu