【转】如何使用PhoneGap打包Web App

如何使用PhoneGap打包Web App

最近作了一款小游戏，定位是移动端访问，思来想去最后选择了jQuery mobile最为框架，制做差很少之后，是否能够打包成App，刚好之前对PhoneGap有耳闻，便想用这个来作打包，能够其中艰辛曲折屡次让我想放弃的心情，官方提供的例子，对我这种没用过的人而言，真是无语的很，所已将配置环境和打包过程写下作个记录。

由于我只弄了Andriod的环境，因此在此只以Andriod为例。

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

1. 安装java环境。
2. 安装ant构建工具。

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

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

5. 安装git

6. 使用npm安装PhoneGap全局环境。

7. 使用PhoneGap命令建立PhoneGap项目。

8. 将PhoneGap编译为android项目。

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

10. 安装.apk文件

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

安装Java环境

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

资源

jdk 下载：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

配置java环境：http://zhidao.baidu.com/link?url=OY0oVYGYuBgsCu-ASgWoY2V1Sh0W5R0yPgpndOjA1c_cvAqUnBGv3RWGVZGIvSeAEUXPN39Pg6kUzTgizeuoYq

安装Ant构建工具

Adobe将PhoneGap已经放到Apache名下进行开源，而且还改了个名字，ant能够apache下的构建工具，因此……须要先安装ant才能够，安装过程其实很是简单，第一个就是下载，选择适合本身的版本，由于个人环境是win7 因此下载zip格式的就能够了。

而后将zip文件解压到任意目录，并添加环境变量，具体能够参看这里

1. 将bin目录添加到path里面
2. 添加ANT_HOME变量为ant的根目录
3. 确保安装了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项目

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

将PhoneGap编译为android项目

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

cd my-app
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文件，将其导入手机便可安装。

我也不知道这两个apk有什么区别，我讲第一个放到手机里试了试，挺完美的。

结论

至此完成了用phonegap构建web项目的过程，是否是灰常复杂，并且网上的其余文章的安装过程，笔者尝试绝大部分未能成功，在此将本身安装过程总结下来，但愿能帮到你们。

注

参考文献：

http://zhidao.baidu.com/link?url=TQDJTCYZqa-lG9AvhAvYjbj3DqbHwZLkIbGvBlFBMsomC73s0Ro-byUvAxu9fsByVPjpSicFFFGtS2dVrVqzpYcVU2NK8ljogH0dX8XXp1i

http://zhaochaozcx.blog.163.com/blog/static/22000865201375102830684/