??由于公司業(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卻要幾兆喇完。