Android培訓(xùn)實(shí)戰(zhàn)教程之使用Cordova框架開發(fā)Android Hybrid App

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解決此問(wèn)題，具體操作如下：
第一步：命令行下輸入：
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中：
編譯沒(méi)報(bào)錯(cuò)，就可以運(yùn)行了，執(zhí)行結(jié)果如下圖所示： 圖2 CordovaSample運(yùn)行結(jié)果
 
以上操作可能會(huì)出現(xiàn)的問(wè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í)，你就需要借助于一些插件，以便能夠訪問(wèn)Cordova提供的核心API。一般來(lái)說(shuō)，你添加一個(gè)插件的目的是為了利用Cordova的API訪問(wèn)設(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培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！
作者：傳智播客Android培訓(xùn)學(xué)院
首發(fā)：http://oisangadgets.com/android/