1.1. Hybrid App介紹
隨著Html5的興起以及手機(jī)硬件性能的提升,越來越多的移動應(yīng)用采用Web技術(shù)進(jìn)行開發(fā),從而產(chǎn)生了一種新的應(yīng)用叫
Hybrid App(混合型移動應(yīng)用)。所謂的混合模式移動應(yīng)用,是指一種介于Native App(本地原生應(yīng)用)與Web App (網(wǎng)頁應(yīng)用)之間的應(yīng)用,該類應(yīng)用的開發(fā)除了使用到本地平臺開發(fā)技術(shù)(Android、iOS、 BlackBerry等)外,部分功能還使用了Web技術(shù),通過內(nèi)嵌瀏覽器顯示網(wǎng)頁的方式來實現(xiàn),目前市面上好多移動應(yīng)用都是混合型的,像QQ,微信,支付寶,淘寶等。
1.2. Hybrid App特點
與本地原生應(yīng)用相比,混合型應(yīng)用有兩個主要的優(yōu)勢:一個是跨平臺,不用再針對不同的移動平臺進(jìn)行開發(fā),大大降低了開發(fā)的成本;另外一個是升級維護(hù)變得容易和簡單,只需更新網(wǎng)頁即可,不需要用戶重新下載安裝包進(jìn)行升級;不足的地方表現(xiàn)在速度和用戶體驗上,但隨著移動硬件性能的提升,這個差距正在逐漸縮小。
|
Web App(網(wǎng)頁應(yīng)用) |
Hybrid App(混合型應(yīng)用) |
Native App(原生應(yīng)用) |
開發(fā)成本 |
低 |
中 |
高 |
維護(hù)更新 |
簡單 |
簡單 |
復(fù)雜 |
體驗 |
差 |
中 |
優(yōu) |
安裝 |
不需要 |
需要 |
需要 |
跨平臺 |
優(yōu) |
優(yōu) |
差 |
圖1:Web App、Hybrid App、Native App 之間的對比
1.3. 基于Cordova進(jìn)行Hybrid App開發(fā)
那么,如何快速地高效地開發(fā)這種混合型應(yīng)用呢?目前有不少用于開發(fā)Hybrid App的移動開發(fā)框架,比如PhoneGap/
Cordova、WeX5、APICloud、Appcelerator、ExMobi等。本文主要介紹如何使用PhoneGap/
Cordova框架的進(jìn)行Hybrid App的開發(fā),下面先了解一下PhoneGap與
Cordova。
1.3.1. PhoneGap與Cordova
PhoneGap是一個使用Web技術(shù)(HTML,CSS和JavaScript)開發(fā)跨平臺移動應(yīng)用的免費(fèi)且開源框架,目前很多主流的移動開發(fā)框架均源于PhoneGap,比如WeX5、appMobi、Worklight等。而要了解
Cordova,得先了解一下PhoneGap的一些背景:
PhoneGap框架的起源于加拿大一家叫Nitobi的軟件公司,08年一次iOS開發(fā)者大會上,該公司的幾個人提出一個想法:Bridging the gap between the web and the iPhone sdk,想做一個工具來彌補(bǔ)Web和iOS開發(fā)之間的不足,
這是PhoneGap名字的來源。
2011年10月,Adobe收購了創(chuàng)立PhoneGap項目的Nitobi公司,隨后把PhoneGap項目捐給了Apache基金會,但Adobe保留了PhoneGap的商標(biāo)所有權(quán)。故項目到了Apache旗下,改了個名字叫Apache Callback,因為名字毫無新意,后來又作了一次改名,即現(xiàn)在的
Apache Cordova。Cordova是Nitobi團(tuán)隊當(dāng)時坐落的街道名稱,用此名來紀(jì)念Nitobi團(tuán)隊的貢獻(xiàn)。
到此,我們差不多了解PhoneGap與Cordova之間的關(guān)系了:
Cordova是Adobe公司把PhoneGap捐給Apache后新起的名字,它作為一個開源項目,是從PhoneGap中抽取出來的核心,Cordova與PhoneGap的關(guān)系就類似于WebKit與Chrome或Safari的關(guān)系。
1.3.2.基于Cordova開發(fā)Hybrid App
了解完
Cordova之后,下面可以搭建環(huán)境,實現(xiàn)我們的例子了。
1.3.2.1. Cordova開發(fā)準(zhǔn)備工作
1.3.2.1.1. 安裝nodeJS
官網(wǎng)下載地址:
https://nodejs.org/
Cordova是利用nodeJS進(jìn)行管理的,所以需要先下載nodeJS。下載安裝完后,在cmd中輸入npm -version,如果看到版本號則表示安裝成功了,如下圖所示:
NPM的全稱是Node Package Manager,是一個nodeJS包管理和分發(fā)工具,已經(jīng)成為了非官方的發(fā)布Node模塊(包)的標(biāo)準(zhǔn)。nodeJS提供了一些基本模塊,但僅僅依靠這些基本模塊可能還不能滿足實際開發(fā)需求,因此會用到很多的nodeJS庫和框架。但眾多的庫或框架管理起來又很麻煩,因此有了NPM,通過它可以很快的找到要使用的包,進(jìn)行下載、安裝以及管理已經(jīng)安裝的包。
1.3.2.1.2. 安裝Cordova
在cmd中執(zhí)行如下安裝Cordova的命令開始安裝:
npm install -g cordova
之后,你可能需要等待很長一段時間。在國內(nèi)使用NPM是很慢,可能是因為GFW的原因,我們可以使用淘寶的npm解決此問題,具體操作如下:
第一步:命令行下輸入:
npm config set registry https://registry.npm.taobao.org
第二步:再執(zhí)行以下命令:
npm info underscore
如果第一步配置正確,這個命令應(yīng)該會有類似下面的輸出:
接下來再執(zhí)行上面安裝Cordova的命令就可以了,安裝成功后,在cmd中輸入cordova -v則會顯示相應(yīng)的版本號,如下圖所示:
1.3.2.1.3. 安裝Apache Ant
下載地址:http://apache.fayea.com/apache-mirror/ant/binaries/
設(shè)置環(huán)境變量,新建:ANT_HOME=E:\ant\apache-ant-1.9.4
Path中添加:%ANT_HOME%\bin;
1.3.2.1.4. 安裝Android SDK
下載安裝Android SDK,新建ANDROID_HOME環(huán)境變量,設(shè)置為sdk安裝的根目錄,并把sdk下面的tools和platform-tools兩個目錄配置到環(huán)境變量path中。
1.3.2.1.5. 創(chuàng)建CordovaSample項目
第一步:進(jìn)入工作空間目錄(例如:D:\workspace_cordova),cmd中執(zhí)行以下命令創(chuàng)建一個叫CordovaSample的項目:
cordova create CordovaSample cn.itcast.cordova CordovaSample
第一個參數(shù)CordovaSample,指定目錄名稱;
第二個參數(shù)cn.itcast.cordova為Java包名;
第三個參數(shù)CordovaSample 指定了應(yīng)用程序的顯示標(biāo)題;
第二步:進(jìn)入CordovaSample 目錄:
cd CordovaSample
第三步:添加項目要支持的移動平臺(此處表示添加支持Android平臺)
cordova platform add android
第四步:把CordovaSample作為Android工程導(dǎo)入到eclipse中:
編譯沒報錯,就可以運(yùn)行了,執(zhí)行結(jié)果如下圖所示:
圖2 CordovaSample運(yùn)行結(jié)果
以上操作可能會出現(xiàn)的問題:你的sdk的版本太低或不匹配,或者項目導(dǎo)入到eclipe后編譯出錯,這時你需要把你的Android SDK升級到一個比較高的版本,比如android 5.0。
1.3.2.1.6. 添加插件支持
如上圖2我們看到的,Cordova默認(rèn)提供的程序界面和功能非常簡單。當(dāng)然你可以根據(jù)你的需要,運(yùn)行標(biāo)準(zhǔn)Web開發(fā)技術(shù)對頁面進(jìn)行設(shè)計。當(dāng)你需要和不同的設(shè)備進(jìn)行通訊交互時,你就需要借助于一些插件,以便能夠訪問Cordova提供的核心API。一般來說,你添加一個插件的目的是為了利用Cordova的API訪問設(shè)備。詳細(xì)的可用插件列表你可以在社區(qū)中看到:http://plugins.cordova.io
你可以通過以下命令安裝插件,例如:
cordova plugin add org.apache.cordova.camera // 攝像頭
cordova plugin add org.apache.cordova.vibration // 震動
cordova plugin add org.apache.cordova.contacts // 聯(lián)系人
你可以用以下命令查看所有已經(jīng)安裝的插件
cordova plugin ls
使用以下命令刪除插件:
cordova plugin rm org.apache.cordova.console
1.3.2.2. 在網(wǎng)頁中實現(xiàn)業(yè)務(wù)邏輯代碼
修改項目中assets/www/index.html文件,在<header>中引入cordova開發(fā)庫,并實現(xiàn)業(yè)務(wù)代碼showDialog方法;當(dāng)點擊<body>中的超鏈接時,會調(diào)用showDialog()方法,在該方法中會調(diào)用cordova sdk彈出android原生對話框:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function showDialog(){
navigator.notification.alert("你好Cordova!");
}
</script>
<title>Hello Cordova</title>
</head>
<body>
<h1>Hello Cordova</h1>
<a onClick="showDialog()" href="">顯示對話框</a>
</body>
</html> |
執(zhí)行運(yùn)行結(jié)果如下圖所示:
至此,我們使用Cordova開發(fā)Anroid Hybrid App的例子就實現(xiàn)完了。
本文版權(quán)歸黑馬程序員Android+物聯(lián)網(wǎng)培訓(xùn)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明作者出處。謝謝!
作者:黑馬程序員Android+物聯(lián)網(wǎng)培訓(xùn)學(xué)院
首發(fā):http://android.itheima.com