因为我只弄了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项目

接下来将路径切到任意目录,输入<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文件,将其导入手机即可安装。

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

结论

至此完成了用phonegap构建web项目的过程,是不是灰常复杂,而且网上的其他文章的安装过程,笔者尝试绝大部分未能成功,在此将自己安装过程总结下来,希望能帮到大家。

原文地址:http://yanhaijing.com/mobile/2014/06/24/12-how-use-phonegap-package-web-app/

PhoneGap打包webApp的更多相关文章

  1. hybrid App cordova打包webapp PhoneGap

    Hybrid APP基础篇(一)->什么是Hybrid App APP三种开发模式--之--HybridApp解决方案 Hybrid App开发 四大主流平台分析 Hybrid App 开发模式 ...

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

    如何使用PhoneGap打包Web App 最近做了一款小游戏,定位是移动端访问,思来想去最后选择了jQuery mobile最为框架,制作差不多以后,是否可以打包成App,恰好以前对PhoneGap ...

  3. cordova+vue打包webapp

    使用cordova+vue打包webapp,可以快速给网页套上一个android和ios壳子,完成一个app的开发. 1. 环境准备. (1)node.js  下载地址: https://nodejs ...

  4. cordova打包webapp

    cordova打包webapp 在项目开发中,需要将h5页面打包成app,这个时候我们可以使用cordova来打包.在官方文档中,我们可以了解到创建一个app十分简单,你的电脑上有nodejs就行,我 ...

  5. Maven package打包webapp项目遇到的问题

    环境Java: JDK_1.7.0_79Eclipse: Mars(4.5.0)Maven: 3.3.3最近公司同事重构某Java web项目,完成之后发现部署启动总是不成功 Caused by: o ...

  6. 如何使用PhoneGap打包Web App

    最近做了一款小游戏,定位是移动端访问,思来想去最后选择了jQuery mobile最为框架,制作差不多以后,是否可以打包成App,恰好以前对PhoneGap有耳闻,便想用这个来做打包,可以其中艰辛曲折 ...

  7. [Phonegap+Sencha Touch] 移动开发18 Sencha Touch项目通过phonegap打包后的程序名字的问题

    之前说过 sencha phonegap init com.pushsoft.myapp MyApp 之后打包的程序安装包apk的名字是"MyApp.apk",显示在手机桌面上的程 ...

  8. sencha touch 扩展篇之将sencha touch打包成安装程序(下)- 使用phonegap打包安装程序

        这讲我们来讲解下如何使用phonegapa创建项目环境并通过她们将sencha touch打包成app,这里我们只讲解打包android的apk,打包ios的过程有点类似,但是需要在mac环境 ...

  9. 我的第一个phonegap开发WebApp的demo 怎么搭建安卓开发环境以及安装phonegap

    一.先来张图,赏心悦目观赏一下,哈 . 这个就是使用phonegap框架搭建起来的,运行在安卓环境上的第一个demo. 安卓的开发环境,大家都会搭建了,所以不赘述.讲一下,安装phonegap的步骤. ...

随机推荐

  1. 安装、卸载 node.js出错 Could not access network location *:\node.js\ 出错

    上周五,WIN10自动更新系统,导致我的node.js 和 Gradle 还有解压的winRAR都不能用!!!可恶 自动更新!!可恶啊!!! 然后我想把node.js重新卸载了再安装,结果 很慌很慌, ...

  2. pycharm安装指导教程

    pycharm下载安装教程 1.pycharm下载官网 http://www.jetbrains.com/pycharm/ 2.下载好安装包后双击点开安装包文件,这边以专业版为例 按以上图片所示教程, ...

  3. 好好的 Tair 排行榜不用,非得自己写?20 行代码实现高性能排行榜

    TairZset 是阿里云自研的可实现任意维度 double 类型的分值排序的数据结构,借助 Tair 客户端同时可实现扩展性,即可以将计算任务分布至多个数据节点完成,实现分布式排行榜能力.本文介绍了 ...

  4. 【java+selenium3】特殊元素iframe的定位及详解(三)

    一.iframe 内联框架 1.自己写个网页,仅供理解iframe演示使用,如下 <!DOCTYPE html> <html> <head> <meta ch ...

  5. pip 更新方法

    使用python -m pip install --upgrade pip 使用python -m pip install -U --force-reinstall pip 使用pip install ...

  6. LeetCode刷题 链表专题

    链表专题 链表题目的一般做法 单链表的结构类型 删除节点 方法一 方法二 增加节点 LeedCode实战 LC19.删除链表的倒数第N个结点 解法思路 LC24.两两交换链表中的节点 解法思路 LC6 ...

  7. Linux基础五:网络配置与管理

    五.网络配置与管理 1.网络知识 2.命令 ifconfig命令  <=>  ip  addr  show 命令--查看本地所有网卡配置信息 ens32:本地以太网网卡,lo:本地回环网卡 ...

  8. centos7系列的网络yum源配置

    因为新安装centos机器yum比较旧,主要是对网易源进行配置,其它源也差不多.我是在securecrt远程ssh工具操作的,非虚拟机软件上. yum install lszrz -y   安装上传工 ...

  9. [ARC117D]Miracle Tree

    将$E_{i}$从小到大排序(显然不会相同),假设$E_{p_{i}}$为从小到大第$i$小 此时,必然有$E_{p_{1}}=1$,否则可以将$E_{p_{i}}$都减去$E_{p_{1}}-1$, ...

  10. [tc14634]ExtremeSpanningTrees

    保序回归论文题 要求某一个边集为原图的最小生成树,这等价于非树边比所在环(指树上)的所有边小,最大生成树类似 将这些大小关系的限制看作一张有向图,即若要求$w_{i}\le w_{j}$则连边$(i, ...