Android+物聯(lián)網(wǎng)培訓(xùn)之使用Cordova框架開發(fā)Android Hybrid App

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