如何使用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项目

接下来将路径切到任意目录,输入<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/

参考文献:

时间: 2024-10-14 19:57:25

如何使用PhoneGap打包Web App的相关文章

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

如何使用PhoneGap打包Web App 最近做了一款小游戏,定位是移动端访问,思来想去最后选择了jQuery mobile最为框架,制作差不多以后,是否可以打包成App,恰好以前对PhoneGap有耳闻,便想用这个来做打包,可以其中艰辛曲折多次让我想放弃的心情,官方提供的例子,对我这种没用过的人而言,真是无语的很,所已将配置环境和打包过程写下做个记录. 因为我只弄了Andriod的环境,所以在此只以Andriod为例. 使用PhoneGap搭建Android开发的项目整体步骤如下: 安装ja

移动web:原生开发打包,嵌入h5页面 webApp:全部都是H5开发的应用 混合APP:使用第三方开发平台从apicloud,appcan,hbuilder等开发,cordova技术打包 原生APP:就是eclipse开发或者studio等工具开发

论坛43213 移动端webApp兼容问题解决 谈谈App混合开发 Hybrid APP混合开发的一些经验和总结 PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,WP8,Bada和Blackberry等智能手机的核心功能--包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以调用. Cordova提供了一组设备相关的

使用PhoneGap打包app

1.安装nodejs, 2.安装 PhoneGap npm install -g phonegap 3.PhoneGap 打包成安卓APK需要用到ANT打包工具,首先配置好java环境: 下载Java JDK和 eclipse,android SDK 点击安装Java JDK,在弹出的界面中建议使用默认值,所以一直点击“next>”,直到完成. 复制bin目录所在的路径,在环境变量中编辑 Path,添加java jdk路径 在命令行输入“Javac”,测试是否安装成功. 4.到ANT官方网站ht

Progressive Web App

下一代 Web 应用? 近年来,Web 应用在整个软件与互联网行业承载的责任越来越重,软件复杂度和维护成本越来越高,Web 技术,尤其是 Web 客户端技术,迎来了爆发式的发展. 包括但不限于基于 Node.js 的前端工程化方案:诸如 Webpack.Rollup 这样的打包工具:Babel.PostCSS 这样的转译工具:TypeScript.Elm 这样转译至 JavaScript 的编程语言:React.Angular.Vue 这样面向现代 Web 应用需求的前端框架及其生态,也涌现出了

html5实现web app摇一摇换歌

微信可以摇歌曲,根据声音识别出歌曲,然后返回歌曲信息,利用html5的deviceOrientation特性和deviceMotion事件也可以在web app上实现类似于微信摇一摇的功能,原生的app实现也有相关接口,这里只考虑web app的情况...... Section One 先来看下demo效果图: 测试地址:http://hcy2367.github.io/music/,请在手机浏览器中打开该链接,建议WiFi下操作,否则一首歌几M的流量挺坑的,然后摇一摇换歌,操作可能会有点慢.

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

    这讲我们来讲解下如何使用phonegapa创建项目环境并通过她们将sencha touch打包成app,这里我们只讲解打包android的apk,打包ios的过程有点类似,但是需要在mac环境下,最后通过xcode导出成ipa安装程序: 一.phonegap环境搭建: phonegap从3.0开始已经不再使用手动的方式搭建项目了,而是使用command-line命令行工具来搭建项目环境,并且插件引入的机制也在3.0做了调整,采用了模块化的方式,即需要什么功能模块就通过命令行工具来安装对应

Web App版权保护迎来曙光,APICloud提出平台级解决方案!

随着HTML5标准的定稿,市场对HTML5的热情再次被点燃,但目前Web App和HTML5游戏存在的盗版问题和代码安全问题一直备受关注,甚至成为阻碍行业发展的一个巨大瓶颈.开发者花半年辛苦完成的产品可能盗版者只需要3天时间就可以实现完全破解. 怎么保护基于HTML5技术的互联网产品版权?如何防止网页技术代码不被人抄袭复制?开发者通常会想到网页加密的方式解决,可是目前众多的Web App代码加密方式真的能满足开发者的需求么? 现有HTML5产品和技术不能完全解决问题! 网页代码受限于浏览器解析的

Native、Web App、Hybrid、React Native(简称RN)、Weex 间的异同点。

App常用开发模式简介 此处App为应用application,并非我们通常讲的手机App. 常用的几种APP开发模式-脑图 Native App 传统的原生App开发模式,有iOS和aOS两大系统,需要各自语言开发各自App. 优点:性能和体验都是最好的. 缺点:开发和发布成本高. 举个栗子:网易管家App (https://id.163.com/gj/) 应用技术:Swift,OC,Java. WebApp 移动端的网站,常被称为H5应用,说白了就是特定运行在移动端浏览器上的网站应用.一般泛

hybrid app、web app与native app工具

1.使用过哪些工具? Webapp:ThinkPHP Mobile(TPM).Ionic Framework.JingleUI Hybridapp:Apicloud.Phonegap(稍了解Hbuilder.Appcan.Wex5) Nativeapp:CrossApp.React-Native.Xcode.Eclipse-ADT/Android Studio 2. 以上工具各自的编程语言是? Webapp:主要使用H5(html5.css3.js)语言规范来编写,对JS语言掌握要求较高 Hyb