目前要开发 Web App 还是有比较多的选择的 如 Phonegap、MUI、AppCan，接下来以 Web前端开发工程师 的角度来一个 Phonegap 的 First Blood

一、开发环境：

这里先以 Windows 为例：

Node.js 官网下载，百度云盘 版本号：10.35 for x64

安装完成后（目前已经整合了 NPM ），最好在系统变量 Path 中加入安装路径；

$ node -v
v0.10.35
$ npm -v
1.4.28

Adroid ADT Bundle for Windows ，百度云下载 sdk版本号:135.1641136：

下载完成后设置路径，比如： F:\Android SDK\adt-win-x64-135</code> 用来安装 SDK 软件
F:\Android SDK\local-sdk 用来安装 sdk 组件 （都随意……）

安装不是很慢是特别慢，幸好是无人值守型……

在安装完成后，第一次启动的会显示 Fetching Android SDK component information，然后在 Setup Wizard - Downloading Components 界面下面开始下载 Andorid SDK，如果感觉被“qiang”，（组件下载特别的缓慢甚至中断报错）请移步这里

或者请参考网友们的方法：
a：关闭安装向导（不行？那就结束进程吧）；
b：打开 Android Studio 安装目录的 F:\Android SDK\adt-win-x64-135\bin 目录下面的 idea.properties 文件，添加一条配置项：禁用开始运行向导；

# by highsea 2015-1-4
disable.android.first.run=true

在 F:\Android SDK\local-sdk 下有个 SDK Manager.exe 另外 AVD Manager.exe 是模拟器，打开 Manager 是一个组件包管理器；如果有安装失败的请重试。

设置 Android SDK Manager 代理：
首先打开 组件管理器 依次展开： Tools > options 在弹出的 Settings 窗口中选择 Http Proxy Server 填入： mirrors.neusoft.edu.cn Port 中填入 80 并选中 Others 选项中的 第一项；最后 单击 Close 关闭，并返回。

注：上图中的 组件是远远不够的，请根据实际开发扩展

JDK 官网下载，百度云盘 jdk 7u71 x64

如果你还在用6请升级到7，不然在安装 Android SDK 会报错

接着 Path 中加入如下路径：

%java_home%/bin;

设置系统变量，变量名： JAVA_HOME ；变量值：

C:\Program Files\Java\jdk1.7.0_71   

IDE/编辑器 ，自选，推荐 Sublime Text 2 :ST2 2.0.2 X64 相关插件请移步这里

安装Eclipse 官网下载，百度云盘 jee

区别： Eclipse有许多版本，最常见的就是 Eclipse IDE for Java Developers 与Eclipse IDE for Java EE Developers 他们都可以用来开发 android 应用，推荐安装后者（后者包含前者），后者主要的有点还有多了一些 web 插件，更适合开发网络应用。

• 为 Eclipse 配置 ADT 插件

ADT 插件必须通过 Eclipse Install New Software 向导来进行安装。按照 ADT 插件的下载说明（可在 Android 开发人员 SDK 页面 - Eclipse 获取）执行操作。这些步骤将指导您完成整个 ADT 插件的安装过程。

1. 启动 Eclipse ；选择 Help > Install New Software
2. 在右上角单击“添加”按钮；
3. 在出现的对话框中添加库，对话框中输入名称：“ADT插件”；和网址：

https://dl-ssl.google.com/android/eclipse/

注：Android开发者工具更新网站需要一个安全的连接，URL输入HTTPS。确保从站点更新的。

1. 点击 OK
2. 在软件的对话框，请选中复选框并单击开发工具"下一步"。
3. 在下一个窗口中，您会看到一个要下载的工具列表。单击“下一步”。
4. 阅读并接受许可协议，然后单击“完成”。如果提示你一个安全警告说该软件的真实性或有效性不成立，点击OK。

5. 重新启动 Eclipse。

6. 设置Android SDK 路径以及配置

注：在线安装网络出错的话，可以下载离线包：猛击这里；还是下载不了？上百度云

接下来安装 离线包，和 在线安装相同的 1、2 步骤

1. 在“添加库”对话框中，单击 "Archive" 本地安装。
2. 选择下载的文件 adt-23.0.4.zip 并点击OK 。输入 “ADT插件” 的名称并单击 “确定”。
3. 在软件的对话框，请选中复选框并单击"下一步"。
4. 在下一个窗口中，您会看到一个要下载的工具列表（如：ADDMS/ADT/AHV/ANDT/AT/TOE），单击“下一步”。
5. 阅读并接受许可协议，然后单击“完成”。
6. 如果提示你一个安全警告说该软件的真实性或有效性不成立，点击OK。（如果中途因为网络被 qiang 而报错请手动下载 这里 并解压至 安装目录 的 对应文件夹中 ）

'Installing Software' has encountered a problem.An error occurred while collecting items to be installed

1. 安装完成后，重新启动Eclipse。

2. 设置Android SDK 路径以及配置

注：eclipse 代理设置 window > preferences > general > network connections

安装 PhoneGap

npm install -g cordova

注：为什么是 cordova ？ 移步这里

二、新建项目（三种）

1、通过 Android Studio 新建项目（不推荐）

a、设置Android SDK和JDK的路径：

依次打开：configure > project Defaults > Project Structure 

第一个是 sdk 组件目录 F:\Android SDK\local-sdk
第二个是 jdk 目录 C:\Program Files\Java\jdk1.7.0_71

b、Star a new Android Studio project

设置 名称如： firstblood ；域如：highsea90.com ；路径如： F:\Android SDK\new local sdk\firstblood 一路按下一步，完成后，开始构建项目：

注：1、但是这样创建的项目并不是 web 工程师 所喜欢的，因为这需要原生语言（Java）开发的。
2、没有4G内存请勿随意创建、运行，推荐内存 6GB

2.1、通过 NPM cordova 命令行 新建项目（推荐）

    #进入你本地的项目文件夹
$ cd /f/Android\ SDK/new\ local\ sdk/#演示版本号，可能各版本略有不同
$ cordova -v#4.1.2#创建项目
$ cordova create firstblood com.highsea90.first first#进入项目
$ cd firstblood/#添加android支持 **注意，tip**
$ cordova platform add android#生成
$cordova build#运行(需要添加模拟器)
$cordova emulate android

tip: 如果 android 环境没有搭好这里可能提示 比如： Error: Please install Android target "android-19". 说明在 Android SDK Manager 里没有安装好 Android 4.4.2；Why？

如下图：依次类推，报 target 什么错就缺什么组件

2.2、 任性的使用 phonegap

依旧要使用 phonegap 也可以，但是国外镜像下载失败概率较大，这里以 淘宝镜像为例

    #安装cnpm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org#安装 phonegap
$ cnpm install phonegap -g#进入项目
$ cd my-second#运行ios模拟
$ phonegap run ios   #phonegap 报错 请使用 cordova 指令，好吧同上……
[phonegap] executing 'cordova platform add ios'...
Applications for platform ios can not be built on this OS - win32.[phonegap] executing 'cordova run ios'...
No platforms added to this project. Please use `cordova platform add <platform>`.

3、通过 Eclipse 新建项目（不推荐）

对于比较怀旧的同学可以去PhoneGap 安装页面直接下载 PhoneGap 2.9.1，这里百度云盘又准备好了
下载后我将其解压到了 F:\Android SDK\new local sdk 路径下；

打开 eclipse 按 Ctrl+n 打开 File > Import > Android
选择 Existing Android Code Into Workspace （即导入项目）
点击 Next 选择文件路径，或者直接输入 F:\Android SDK\new local sdk\phonegap-2.9.1\lib\android\test 点击完成

当然你也可以自己新建一个项目：

cordova 插件安装

查看已经插件

进入项目 执行：

$ cordova plugin
No plugins added. Use `cordova plugin add <plugin>`.

安装相关插件

• 基本设备资讯-设备API

  cordova plugin add org.apache.cordova.device

• 网络连接

  cordova plugin add org.apache.cordova.network-information

• 电池事件

  cordova plugin add org.apache.cordova.battery-status

• 加速度计算

  cordova plugin add org.apache.cordova.device-motion

• 指南针

  cordova plugin add org.apache.cordova.device-orientation

• 地理定位

  cordova plugin add org.apache.cordova.geolocation

• 相机

  cordova plugin add org.apache.cordova.camera

• 媒体

  cordova plugin add org.apache.cordova.media

• 捕获

  cordova plugin add org.apache.cordova.media-capture

• 访问设备

  cordova plugin add org.apache.cordova.file

• 网络文件传输

  cordova plugin add org.apache.cordova.file-transfer

• 对话方块通知

  cordova plugin add org.apache.cordova.dialogs

• 震动发出通知

  cordova plugin add org.apache.cordova.vibration

• 联络人

  cordova plugin add org.apache.cordova.contacts

• 全球化

  cordova plugin add org.apache.cordova.globalization

• 启动动画

  cordova plugin add org.apache.cordova.splashscreen

• 打开新的浏览器视窗-InAppBrowser

  cordova plugin add org.apache.cordova.inappbrowser

• 调试控制台

  cordova plugin add org.apache.cordova.console

三、运行项目

这个，上面已经提到了，记得添加模拟器就行，不会？那就没办法了……，待续吧

完

参考文章：

使用 Eclipse PhoneGap 构建 Android 应用程序入门；移步
环境搭建教程（最新版本1.3） phonegap cn android；移步
Android开发所需的Android SDK、开发中用到的工具、Android开发教程、Android设计规范，免费的设计素材等 移步