Cordova入門

??由于公司業(yè)務(wù)發(fā)展需求蒙揣,最近都在研究混合式開發(fā)APP,項目采用的Apache的Cordova框架,這篇文章就是所有編程語言的第一步今瀑,創(chuàng)建第一個Cordova安卓平臺HellWorld

創(chuàng)建APP

$ cordova create hello com.example.hello HelloWorld

??這將會為你的cordova應(yīng)用創(chuàng)造必須的目錄。默認(rèn)情況下点把,cordova create命令生成基于web的應(yīng)用程序的骨骼橘荠,項目的主頁是 www/index.html 文件。

添加平臺

??所有后續(xù)命令都需要在項目目錄或者項目目錄的任何子目錄運行:先進入項目目錄

$ cd hello

??給你的App添加目標(biāo)平臺郎逃。我們將會添加'ios'和'android'平臺哥童,并確保他們保存在了config.xml中:

$ cordova platform add ios --save
$ cordova platform add android --save

??檢查你當(dāng)前平臺設(shè)置狀況,查看平臺:

$ cordova platform ls

??刪除平臺

& cordova platform remove android
& cordova platform rm android

??運行add或者remove平臺的命令將會影響項目 platforms的內(nèi)容褒翰,在這個目錄中每個指定平臺都有一個子目錄

注意:在你使用CLI創(chuàng)建應(yīng)用的時候贮懈, 不要 修改/platforms/目錄中的任何文件。當(dāng)準(zhǔn)備構(gòu)建應(yīng)用或者重新安裝插件時這個目錄通常會被重寫优训。

安裝構(gòu)建先決條件

??要構(gòu)建和運行App朵你,你需要安裝每個你需要平臺的SDK。另外揣非,當(dāng)你使用瀏覽器開發(fā)你可以添加 browser平臺抡医,它不需要任何平臺SDK。

??檢測你是否滿足構(gòu)建平臺的要求:

$ cordova requirements
Requirements check results for android:
Java JDK: installed .
Android SDK: installed
Android target: installed android-19,android-21,android-22,android-23,Google Inc.:Google APIs:19,Google Inc.:Google APIs (x86 System Image):19,Google Inc.:Google APIs:23
Gradle: installed

Requirements check results for ios:
Apple OS X: not installed
Cordova tooling for iOS requires Apple OS X
Error: Some of requirements check failed

構(gòu)建App

??默認(rèn)情況下, cordova create生產(chǎn)基于web應(yīng)用程序的骨架早敬,項目開始頁面位于www/index.html文件忌傻。任何初始化任務(wù)應(yīng)該在www/js/index.js文件中的deviceready事件的事件處理函數(shù)中大脉。
運行下面命令為所有添加的平臺構(gòu)建:

$ cordova build

你可以在每次構(gòu)建中選擇限制平臺范圍

$ cordova build android

運行

模擬器上運行

$ cordova emulate android

瀏覽器上運行

$ cordova serve android

瀏覽器訪問http://localhost:8000即可
真機上運行

$ cordova run android

添加插件

??你可以修改默認(rèn)生成的App通過標(biāo)準(zhǔn)的web技術(shù),但是App要接觸設(shè)備級別的特性水孩,就需要你添加插件了镰矿。
??一個插件 通過JavascriptAPI暴露原生SDK功能。插件通常由npm分發(fā)荷愕,你可以搜索他們在 插件搜索頁衡怀。一些關(guān)鍵的API由Apache Cordova開源項目提供并且這些插件是作為[核心插件API]的。你也可以使用CLI啟動搜索頁:

$ cordova plugin search camera

??plugin要添加camera插件安疗,我們需要指定camera的npm包名:

$ cordova plugin add cordova-plugin-camera
Fetching plugin "cordova-plugin-camera@~2.1.0" via npm
Installing "cordova-plugin-camera" for android
Installing "cordova-plugin-camera" for ios

??插件也可以通過目錄或者git倉庫添加抛杨。
??使用 plugin ls (或者 plugin list, 或者 plugin自己)查看當(dāng)前安裝的插件。每個插件現(xiàn)實它的標(biāo)識:

使用 merges自定義每個平臺

??雖然Cordova允許你輕松的部署App在各個平臺荐类,但是有時我們需要在某些平臺做一些自定義怖现。在這種情況下, 不要想去修改頂級platforms目錄下的www目錄玉罐,因為屈嗤,通常會被頂級 www目錄的跨平臺源碼替換
??取而代之,頂級merges目錄提供了特定平臺部署特定資源的地方吊输。每個特定平臺在merges中的子目錄反映了www 源代碼樹中的結(jié)構(gòu)饶号, 允許你重寫和添加文件。例如季蚂,這是如何使用merges來提供Android設(shè)備中的默認(rèn)字體大小茫船。

  • 編輯www/index.html文件,添加link標(biāo)簽來添加額外的css文件, overrides.css在這種情況下:
<link rel="stylesheet" type="text/css" href="css/overrides.css" />
  • (可選)創(chuàng)建一個空的www/css/overrides.css文件,適合所有非Android構(gòu)建扭屁,來防止文件找不到的錯誤算谈。
  • 在merges/android里面創(chuàng)建一個css子目錄,然后添加對應(yīng)的overrides.css文件。特定的CSS重寫www/css/index.css文件中的12px的默認(rèn)大小料滥,例子:
body { font-size:14px; }

??當(dāng)你重寫構(gòu)建項目然眼,Android具有自定義的字體大小,而其他平臺的不變葵腹。
??你也可以在merges目錄中添加www目錄中不存在的文件高每。例如,一個應(yīng)用程序在iOS界面中要包含一個 后退按鈕,存儲在merges/ios/img/back_button.png
,而Android版本則可以捕獲后退按鈕事件通過對應(yīng)的硬件按鈕践宴。

更新Cordova和你的項目

在安裝cordova工具之后觉义,你可以運行下面命令更新到最新版本:

$ sudo npm update -g cordova```
用下面語法安裝指定版本:

$ sudo npm install -g cordova@3.1.0-0.2.0```
運行cordova -v查看當(dāng)前版本。要查找最新的cordova版本浴井,可以運行:

$ npm info cordova version```
更新完cordova后晒骇,更新目標(biāo)項目的平臺:

$ cordova platform update android --save
$ cordova platform update ios --save

####總結(jié)
hybrid app相對native app來說開發(fā)起來速度快,相對容易,但是沒有native那么流暢洪囤,性能和體驗稍微差些徒坡。并且文件大小相差也很大,同樣一個應(yīng)用native只要幾k瘤缩,而hybrid卻要幾兆喇完。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市剥啤,隨后出現(xiàn)的幾起案子锦溪,更是在濱河造成了極大的恐慌,老刑警劉巖府怯,帶你破解...
    沈念sama閱讀 218,122評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件刻诊,死亡現(xiàn)場離奇詭異,居然都是意外死亡牺丙,警方通過查閱死者的電腦和手機则涯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來冲簿,“玉大人粟判,你說我怎么就攤上這事÷吞蓿” “怎么了档礁?”我有些...
    開封第一講書人閱讀 164,491評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長吝沫。 經(jīng)常有香客問我呻澜,道長,這世上最難降的妖魔是什么野舶? 我笑而不...
    開封第一講書人閱讀 58,636評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮宰衙,結(jié)果婚禮上平道,老公的妹妹穿的比我還像新娘。我一直安慰自己供炼,他們只是感情好一屋,可當(dāng)我...
    茶點故事閱讀 67,676評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著袋哼,像睡著了一般冀墨。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上涛贯,一...
    開封第一講書人閱讀 51,541評論 1 305
  • 那天诽嘉,我揣著相機與錄音,去河邊找鬼。 笑死虫腋,一個胖子當(dāng)著我的面吹牛骄酗,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播悦冀,決...
    沈念sama閱讀 40,292評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼趋翻,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了盒蟆?” 一聲冷哼從身側(cè)響起踏烙,我...
    開封第一講書人閱讀 39,211評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎历等,沒想到半個月后讨惩,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,655評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡募闲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,846評論 3 336
  • 正文 我和宋清朗相戀三年步脓,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片浩螺。...
    茶點故事閱讀 39,965評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡靴患,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出要出,到底是詐尸還是另有隱情鸳君,我是刑警寧澤,帶...
    沈念sama閱讀 35,684評論 5 347
  • 正文 年R本政府宣布患蹂,位于F島的核電站或颊,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏传于。R本人自食惡果不足惜囱挑,卻給世界環(huán)境...
    茶點故事閱讀 41,295評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望沼溜。 院中可真熱鬧平挑,春花似錦、人聲如沸系草。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,894評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽找都。三九已至唇辨,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間能耻,已是汗流浹背赏枚。 一陣腳步聲響...
    開封第一講書人閱讀 33,012評論 1 269
  • 我被黑心中介騙來泰國打工亡驰, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人嗡贺。 一個月前我還...
    沈念sama閱讀 48,126評論 3 370
  • 正文 我出身青樓隐解,卻偏偏與公主長得像,于是被迫代替她去往敵國和親诫睬。 傳聞我的和親對象是個殘疾皇子煞茫,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,914評論 2 355

推薦閱讀更多精彩內(nèi)容