如何使用PhoneGap打包Web App-Android

使用PhoneGap搭建Android开发的项目整体步骤如下：

安装java环境。

安装ant构建工具。

安装android的开发环境并配置环境变量。

安装Node.js环境并配置环境变量。

安装git

使用npm安装PhoneGap全局环境。

使用PhoneGap命令创建PhoneGap项目。

将PhoneGap编译为android项目。

将上述项目导入ADT进行后续开发。

安装.apk文件

其实官网给出的安装过程忽略了很多步骤（因为这里是Andriod环境，所以才会比官网的例子多出不少步骤），像我这种前端开发人员，电脑里可是连java都没装的，下面就详细讲解这些步骤，并最终生成apk文件。

安装Java环境

这点不用我讲，网上一搜一大堆，而且很多程序员电脑里面都是有java环境的，需要强调的是安装java的环境要和后面下载andriod开发环境一致，不然会报错，要保证都是32位或64位，笔者就装了个64位jdk然后，安卓环境是32位的，运行不成功。

安装Ant构建工具

Adobe将PhoneGap已经放到Apache名下进行开源，并且还改了个名字，ant可以apache下的构建工具，所以……需要先安装ant才可以，安装过程其实非常简单，第一个就是下载，选择适合自己的版本，因为我的环境是win7 所以下载zip格式的就可以了。

然后将zip文件解压到任意目录，并添加环境变量

将bin目录添加到path里面

添加ANT_HOME变量为ant的根目录

确保安装了jdk并配置好了JAVA_HOME

然后保存环境变量，打开命令行输入 ant -version 你应该看见类似下面的输出，那恭喜成功了，可以进行下一步了，如果未成功，可百度下错误原因：

下载Andriod开发环境并配置环境变量

首先就是来这里下载环境，然后是安装，其实就是解压到任意目录，可以看这里，接下来需要添加环境变量，将sdk目录下的platform-tools 和 tools添加到path里。

然后你还需要设置avd，打开AVD Manager，点击新建，然后设置一些参数即可，由于我也不是搞安卓的，所以吗你要想深入了解需自行研究。

安装git

git是我非常喜欢的版本控制工具，我电脑上自带的是github for windows，只需将其git命令添加到path即可，如果你没有安装git我建议你安装mysygit，安装过程中记得勾上将git添加仅path选项。如果你安装的其他git工具，请确保将git命令加入path，因为安装phonegap过程会用到git命令。

来这里下载mysygit，注意下载过程非常缓慢（没办法了谁让我们在天朝呢，以前mysygit在google code上的时候速度更慢，下载迁移到github速度已经快很多了）。

如果你对git感兴趣，我建议你加入我的群一起交流，GitHub家园② 193091696，由于1群已满，群共享里也有mysygit的最新pre版，下载速度会是github上的几百倍吧！！！！

安装Node.js环境并配置环境变量

来这里下载你需要的版本，windows建议下载.msi安装包，自带npm，无需配置环境变量，如果你下载.exe的话下载的知识node，还需要自行配置环境变量和安装npm。现在的node安装过程真的非常简单了。

使用npm安装PhoneGap全局环境

到这里就可以安装官网上的提供的教程来了，打开刚刚安装的node的命令行工具，然后输入 npm install -g phonegap，将会自动安装phonegap，需要注意的是安装过程非常缓慢，因为安装期间回到用到git命令去下载文件（不是git慢，而是外网慢）。安装完成后会提示安装成功，当然你也可以输入 phonegap -v，你将会看到如下输出，说明你安装成功了：`

使用PhoneGap命令创建PhoneGap项目

接下来将路径切到任意目录，输入<code>phonegap create my-app 你将会看到如下画面：

将PhoneGap编译为android项目

接下来先切换到myapp1目录，然后运行phonegap run andriod

cd myapp

phonegap run android

会出现很多构建信息，成功后会自动启动adk模拟器

如果你不想运行安卓模拟器，而只想构将项目那么可以，你只需运行 phonegap build android 即可。

将上述项目导入ADT进行后续开发

启动ADT中的eclipse，然后选择File-New-Project,在打开的“New Project”向导中选择Android->Android Project from Existing Code，并选择Next

在下一步的导航页中Root Directory选择刚才创建的my-app/platforms/android文件夹，下方Projects会出现两个项目，都勾选，但是不要勾选Copy projects into workspace选项。

选择Finish完成上述导入

话说上面的导入过程是复制粘贴的，笔者导入的时候点击finished就是不起作用，不知为何，比较郁闷，不知你是否也会遇到同样的事情。

安装.apk文件

项目目录下的platforms\android\ant-build 里已经生成了对应的apk文件，将其导入手机即可安装。

转载

1. PhoneGap

它能提供一个很好的应用程序开发机制，开源并支持黑莓、Android、iOS、Symbian等7种 *** 作系统。该平台开发使用JavaScript和HTML5等Web编程语言，简单易用，因此开发成本非常低。

2. WidgetPad

它支持使用HTML5、JavaScript和CSS3编写最新的智能设备应用程序。这个工具的显著特点是，它配备了源代码编辑、协作、调试和版本区分阵列。开发者可利用它为Android、iOS和webOS等很多不同的 *** 作系统开发不同应用。

3. RhoMobile

这是一款深受开发人员欢迎的、可创建智能手机“本机应用程序”的跨平台开发工具。它为开发者提供了一个良好的开发环境，其开源的Rhodes编程框架，可让开发者只用HTML和Ruby就能开发Android、RIM、Windows Mobile、iPhone和Symbian等各种平台上的应用。

4. Sencha Touch

使用该工具，可基于同一个用户界面开发黑莓、Android、Windows和iOS等系统应用程序。它为同一个域中的其他工具设置了统一的网络标准。此外，它提供的增强触摸事件和数据集成能力，也是软件的亮点之一。

5. Appcelerator Titanium

这是一款全球公认的优秀跨平台开发工具，支持使用HTML、JavaScript等语言开发，同时也支持Ruby、PHP和Python。这款工具的最大吸引力在于，由于是基于硬件的开发，开发过程中所创建的应用程序可选择存储在设备上或者云端。

是网页制作软件的一款全名叫做AdobeDreamweaver是个原本由Macromedia公司所开发的著名网站开发工具。它使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。随Macromedia被Adobe收购后，Adobe也开始计划开发Linux版本的Dreamweaver了。Dreamweaver自MX版本开始，使用了Opera的排版引擎"Presto"作为网页预览。基本信息AdobeDreamweaverCS5.5软件大小：405.29MB开发商：Adobe软件语言：简体中文授权类型：共享(收费)软件软件类别：国外软件/网页制作运行环境：WinXP,Win7,WinVista,Win2003,Win2008软件功能CS5后的新增功能借助Adobe®Dreamweaver®CS5.5软件充满自信地进行设计、构建最新的HTML5和CSS3网站、令交互性更上一层楼。同时为多个设备进行设计，并对全面的代码检查充满自信。“多屏幕预览”面板借助“多屏幕预览”面板，为智能手机、Tablet和个人计算机进行设计。借助媒体查询支持，开发人员可以通过一个面板为各种设备设计样式并实现渲染可视化。CSS3/HTML5支持通过CSS面板设置样式，该面板经过更新可支持新的CSS3规则。设计视图现在支持媒体查询，在您调整屏幕尺寸的同时可应用不同的样式。使用HTML5进行前瞻性的编码，同时提供代码提示和设计视图渲染支持。实时视图现在包括对JQuery集成借助jQuery代码提示加入高级交互性。jQuery是行业标准JavaScript库，允许您为网页轻松加入各种交互性。借助针对手机的起动模板快速启动。借助PhoneGap构建本机Android和iOS应用程序借助新增的PhoneGap功能为Android™和iOS构建并打包本机应用程序。借助PhoneGap构建本机Android和iOS应用程序CS4后的新增功能实时视图新增功能借助DreamweaverCS4中新增的实时视图在真实的浏览器环境中设计网页,同时仍可以直接访问代码。呈现的屏幕内容会立即反映出对代码所做的更改。针对Ajax和JavaScript框架的代码提示新增功能借助改进的JavaScript核心对象和基本数据类型支持,更快速、准确地编写JavaScript。通过集成包括jQuery、Prototype和Spry在内的流行JavaScript框架,充分利用DreamweaverCS4的扩展编码功能。相关文件新增功能在DreamweaverCS4中使用“相关文件”功能更有效地管理构成目前网页的各种文件。单击任何相关文件即可在“代码”视图中查看其源代码,在“设计”视图中查看父页面。集成编码增强功能领略内建代码提示的强大功能,令HTML、JavaScript、Spry和jQuery等Ajax框架、原型和几种服务器语言中的编码更快、更清晰。代码导航器新增功能新增的“代码导航器”功能可显示影响当前选定内容的所有代码源,如CSS规则、服务器端包括、外部JavaScript功能、Dreamweaver模板、iframe源文件等。AdobeAIR创作支持新增功能在Dreamweaver中直接新建基于HTML和JavaScript的AdobeAIR™应用程序。在Dreamweaver中即可预览AIR应用程序。使AdobeAIR应用程序随时可与AIR打包及代码签名功能一起部署。FLV支持增强功能通过轻松点击和符合标准的编码将FLV文件集成到任何网页中-无需AdobeFLASH®软件知识。设计时在Dreamweaver全新的实时视图中播放FLV影片。支持领先技术在支持大多数领先Web开发技术的工具中进行设计和编码,这些技术包括HTML、XHTML、CSS、XML、JavaScript、Ajax、PHP、AdobeColdFusion®软件和ASP。学习最佳做法参考CSS最佳做法实现可视化设计并辅以通俗易懂的实用概念说明。在支持可访问性和最佳做法的同时创造Ajax驱动的交互性。CSS最佳做法新增功能无需编写代码即可实施CSS最佳做法。在“属性”面板中新建CSS规则,并在样式级联中清晰、简单地说明每个属性的相应位置。全面的CSS支持增强功能使用DreamweaverCS4中增强的CSS实施工具令您的网站脱颖而出。借助“设计”和“实时视图”中的即时可视反馈,在“属性”面板中快速定义和修改CSS规则。使用新增的“相关文件”和“代码导航器”功能找到定义特定CSS规则的位置。学习资源增强功能借助DreamweaverCS4中丰富的产品随附教程掌握Web构建技能。通过由社区推动的帮助系统与最新Web技术保持同步。更广阔的Dreamweaver社区增强功能从广阔的Dreamweaver社区受益,它包括在线AdobeDesignCenter和AdobeDeveloperConnection、培训与研讨会、开发人员认证计划以及用户论坛。在线服务轻击鼠标从Dreamweaver访问在线服务,与同事或客户共享屏幕、从在线社区获得所需的搜索结果并快速找到创意灵感。了解针对创意专业人士的在线服务›掌控内容使客户能从浏览器中直接更新他们的网页。无需数据库或复杂的编码即可将动态数据添加到站点。AdobePhotoshop智能对象新增功能将任何AdobePhotoshop®PSD文档插入Dreamweaver即可创建出图像智能对象。智能对象与源文件紧密链接。无需打开Photoshop即可在Dreamweaver中更改源图像和更新图像。HTML数据集新增功能无需掌握数据库或XML编码即可将动态数据的强大功能融入网页中。Spry数据集可以将简单HTML表中的内容识别为交互式数据源。全新用户界面新增功能借助共享型用户界面设计,在AdobeCreativeSuite®4的不同组件之间更快、更明智地工作。使用工作区切换器可以从一个工作环境快速切换到下一个环境。跨产品集成增强功能通过跨产品线的直接通信和交互,充分利用DreamweaverCS4和其它Adobe工具的智能集成和强大功能,包括AdobeFLASHCS4Professional、FIREWORKS®CS4、PhotoshopCS4和DeviceCentralCS4软件。AdobeInContextEditing新增功能在Dreamweaver中设计页面,使最终用户能使用AdobeInContextEditing在线服务编辑他们的网页,无需帮助或使用其它软件。作为Dreamweaver设计人员,您可以限制对特定页面、特殊区域的更改权,甚至可以自定格式选项。Subversion集成新增功能在Dreamweaver中直接更新站点和登记修改内容。DreamweaverCS4与Subversion®软件紧密集成,后者是一款开放源代码版本控制系统,可以提供更强大的登记/注销体验。跨平台支持增强功能随心所欲,尽情工作:DreamweaverCS4可用于基于Intel®或PowerPC®的Mac、Microsoft®Windows®XP以及WindowsVista®系统。在首选系统中设计,交付跨平台、可靠、一致、高性能的成果。回答完毕！！希望对你有帮助！！希望采纳！！（有不明白的可以追问我）参考资料：baike.baidu.com/view/7919.htm#5

---