前言及一些啰嗦的话

Hybrid开发是近两年来炒的很火热的一个话题，它使用HTML，CSS和JavaScript作为主要开发技术并号称“write once，run everywhere”，听起来很像当年的Java喊出的口号。但是同时也有很多人对这项技术提出了一些非议，其中提及最多的就是它的性能比较差，远远比不上原生开发出来的应用。我在很久之前就已经听说过这项技术，但是一直都没有去实际使用。古人说的好：道听途说，不如亲自动手（哈哈，其实是我自己说的）。与其在原生和Hybrid两者之间纠结，不如自己实际动手做做看。

目前来说，知名度比较大的Hybrid开发框架主要有Phonegap，Titanium，SenchaTouch。当然这样的开发框架还有许许多多，大家可以自行去谷歌寻找。我对Phonegap和Titanium了解一点，因此决定两者之间做个选择。但是当我发现Titanium居然不支持Android 4.X之后（不知道现在的情况如何，大家有兴趣可以自己去看看），果断选择了Phonegap。

Phonegap主页上对该项目的介绍为：使用你所钟爱的HTML，CSS和JavaScript等Web技术轻松创建应用。在Phonegap中，你可以像编写网页一般来编写app，除了一般的JavaScript接口，它还提供了一系列操纵设备的接口比如说加速感应器、相机、地理定位等等，并最终将其打包成为安卓或ios的应用安装包。

不像Titanium有自己的IDE，Phonegao依托的是传统的安卓开发IDE，一般来说是Eclipse。一开始我们需要使用Phonegap的几条简单的命令行来创建一个安卓项目，然后使用安卓开发IDE来打开这个项目来继续编写代码。有的同学可能会有疑虑：我是前端工程师完全没有接触过安卓开发环境怎么办？相信我，你在下面所要用到的IDE功能真的非常简单，你只需要记住几个按钮的用法就可以，其余的大部分时间你完全可以把精力花费在编写HTML，CSS和JavaScript上面。

开发环境配置

真如标题所说的，我们要使用Phonegap来编写一个类似于豆瓣电台的应用。它需要具备的功能有：1、播放音乐；2、选择不同的频道；3、创建用户自己的红心频道（也就是用户将自己喜欢的歌曲放入一个频道中）；4、最好能在没有网络连接或者wifi连接的时候实现离线播放（毕竟从互联网上下载音乐使用2G/3G的话在速度和流量资费方面都有点让人吃不消）。当然，最后我们还需要一个小清新风格的UI，但是这个方面有谁比前端工程师更拿手呢？

明确了项目需求，我们现在就开始着手开发工作了。正如前面所提到的，Phonegap没有自己的IDE，所以我们首先要下载一个IDE开发环境，对于像我这样的安卓开发新手，我使用了Google提供的集成开发环境ADT（Android Developer Tools的缩写），它帮助我们省去了很多配置的步骤，即下即用，非常方便。现在我们进入ADT的下载页面http://developer.android.com/sdk/index.html，如下图所示：

enter image description here

我们点击Download the SDK 按钮下载适合自己电脑操作系统的安装包。很快我们完成了下载工作，然后解压文件夹就可以了，很清松的完成了IDE的安装工作。

安装完了IDE环境之后，我们现在来配置Phonegap环境。Phonegap是这个项目一开始的名字，后来它被Adobe收购之后便改名为Cordova，所以你在开发时看的js文件是Cordova.js而不是Phonegap.js。反正不管怎么所，这两个名字代表一个东西，就好比

cordova = phonegap = "An Object"

一样，cordova和Phonegap是两个引用类型，二者指向同一个对象。

在此需要特别声明的是，Cordova项目现在的最新版本是3.2.0，它和其他很多项目一样，在3.0版本以后就投入了Node的怀抱。这意味着我们可以简单的使用一条npm命令来安装Cordova环境：

npm install -g cordova

但是先别急着敲键盘，如果使用3.0以后也就是使用npm配置环境的版本，在进行安卓开发时会出现file_error的问题，在这个问题上我挣扎了很久，看了许多论坛上的提问，有的人说是一个项目内的bug，但是给出的解决方案也没有凑效。大家如果有兴趣可以自己跟着文档中的例子试一试。

说了上面这么多，总结起来一句话就是新版本有点坑爹，还是使用老版本吧！于是我们进入老版本的下载页面http://phonegap.com/install/ ，现在又变成了Phonegap，而且Phonegap居然也有一个npm的安装模块。只能说贵项目真乱。还有大家可以去试着安装一下这个Phonegap的npm安装模块，一样的坑爹。我们把目光往下移动，这里有许多旧版本的下载链接，我们点击下载Phonegap 2.9.0版本。下载完成以后，将压缩文件解压到一个适当的文件夹中即可。

完成了下载工作以后，接下来非常重要的一个步骤是配置环境变量。在mac或者linux中，配置步骤为：

1.打开~目录路径下的.bash_profile文件；
2.在里面加入这段代码

 export PATH=${PATH}:/Development/adt-bundle/sdk/platform-tools:/Development/adt-bundle/sdk/tools

其中后面的/Development/adt-bundle/sdk/platform-tools和/Development/adt-bundle/sdk/tools是根据你的实际情况填写的，比如说我们把刚才下载的ADT解压到了~/Downloads目录下，解压后的文件夹名字叫做adt-bundle(名字会因为不同操作系统平台不太一样，比如我解压之后文件夹的名字就是adt-bundle-mac-x86_64-20131030)，这个文件夹里面有一个sdk文件夹，里面有platform-tools和tools两个文件夹，于是我需要在.bash_profile文件中添加的代码就是：

export PATH=${PATH}:~/Downloads/adt-bundle-mac-x86_64-20131030/sdk/platform-tools:/Downloads/adt-bundle-mac-x86_64-20131030/sdk/tools

说的这么清楚，应该已经明白了吧；

3.保存.bash_profile文件，然后执行下面的命令行：

 source ~/.bash_profile

mac和linux下的环境就已经配置好了。

在window7环境下，配置步骤如下所示：

1.右键点击我的电脑，选择属性；
2.点击高级系统设置；
3.点击环境变量按钮； 4.选择PATH变量并编辑； 5.将下面的路径信息添加到PATH变量中，其中的路劲信息说明请参看上面的mac和linux环境变量配置中的部分：

 ;C:\Development\adt-bundle\sdk\platform-tools;C:\Development\adt-bundle\sdk\tools

6.保存变量并退出即可；

正式开始

一通手忙脚乱的工作之后，终于把开发环境给搭建好了，现在可以正式开始我们的项目了（接下来的操作均在mac/linux环境下，window7类似，唯一的区别只在于路径不一样）。

进入我们刚才解压的phonegap-2.9.0文件夹:

cd phonegap-2.9.0

进入其中的lib文件夹：

cd lib

我们在lib文件夹下可以看到许多命名为不同移动平台的文件夹，比如说android、ios、blackberry等等，我们现在要开发一个安卓应用，于是进入android文件夹:

cd android

然后进入bin文件夹：

cd bin

其实上面的命令可以合为一条：

cd Phonegap-2.9.0/lib/android/bin

现在我们使用命令行来新建一个安卓项目，运行下面的命令：

./create ~/Desktop/Radio com.jabez.Radio "Radio"

解释一下上面这条命令，./create是bin文件夹下的一个可执行文件，~/Desktop/Radio代表我要将项目建立在~/Desktop中的Radio文件夹内，com.jabez.Radio是安装包的名字，一般来说jabez是公司或者团体名称，Radio是项目名称，最后的”Radio”是应用名称，也就是最后安装在你的安卓手机上以后图标下面会显示的应用名称。

完成了上面的步骤之后，我们就已经创建了一个叫做Radio的安卓项目了。接下来，我们打开adt中的Eclipse，然后依次选择file，new，project，在对话框中选择Android Project from Existing Code，点击next，然后在Root Directory中选择我们刚才创建的Radio文件夹，点击Finish。

enter image description here