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