目前，随着Google的Android手机和苹果的iphone手机的逐渐普及，越来越多开发者加入到移动应用开发的大军当中。其中，Android应用是基于Java语言基础上进行开发的，而苹果公司的iphone则是基于C语言开发的。如果开发者编写的应用需要同时在不同的移动设备上运行的话，则必须要掌握多种开发语言。而为了进一步简化移动应用的编程，Nitobi公司推出了一套开源的移动应用解决方案PhoneGap(http://www.phonegap.com)。
　　PhoneGap是一款开源的手机应用开发平台，它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。PhoneGap将移动设备本身提供的复杂的API进行了抽象和简化，提供了一系列丰富的API供开发者调用，只要你会HTML和Javascript或者Java语言，就可以利用PhoneGap提供的API去调用各种功能，PhoneGap就能让你可以制作出在各种手机平台上运行的应用，这对移动应用开发者来说无疑是个福音。 目前，PhoneGap已实现对iPhone/ipad、Android、Symbian,Palm、黑莓各版本绝大部分功能的支持,其中官方文档中对其支持的详细说明如下图所示：

<IGNORE_JS_OP>

11.jpg (17.3 KB, 下载次数: 72)

下载附件  保存到相册

2012-1-20 23:51 上传

 
 
　在本文中，将以一个简单的能在Android平台上运行的HelloWorld的示例，讲解如何安装PhoneGap的开发框架并配合Eclipse进行开发的过程。
　　基于Android SDK安装PhoneGap框架
　　首先，要明白一点，就是要利用PhoneGap框架开发移动应用时，也是必须在开发环境上安装对应移动设备应用的SDK的。比如你要开发一个运行在Android上的应用，则必须安装 Android的SDK包，开发iphone应用，就要安装iphone sdk。本文将介绍如何安装基于Android SDK下安装PhoneGap。
　　无论是开发基于哪种平台的移动应用，首先要到PhoneGap的官方网站下载
　　PhoneGap包，地址是：http://www.phonegap.com/download，目前最新的版本是0.9.1,下载之后，解压缩后，会发现如下图所示的若干个文件夹

<IGNORE_JS_OP>

22.jpg (17.3 KB, 下载次数: 50)

下载附件  保存到相册

2012-1-20 23:51 上传

 
 
　这里，由于我们是构建Android应用，因此只有phonegap-android对我们是有用的。
　　由于PhoneGap是通过Ruby语言以及所开发的目标移动设备的SDK一起搭配工作的，因此除了下载PhoneGap外，开发者还必须安装如下的软件(以Android为例)
　　Android SDK,建议安装最新的版本，比如Android 2.1或者2.2
　　Eclipse IDE
　　Apache Ant 1.8.1 (http://ant.apache.org)
　　JDK 1.5以上
　　Android 的Eclipse开发插件ADT(http://developer.android.com/sdk/eclipse-adt.html)
　　Ruby 1.9.1，建议到http://rubyinstaller.org/直接下载1.9.1的版本直接安装。
　　此外，我们还要对windows下的运行环境变量进行设置。首先我们到控制面板-系统-环境变量中，增加如下几个系统环境变量。
　　JAVA_HOME:指向所安装的JDK的目录，比如c:\jdk15
　　ANT_HOME:指向所安装的Apache_ANT目录，比如d:\ant
　　ANDROID_HOME;指向所安装的Android SDK目录，比如d:\androidsdk
　　对Path进行设置,分别将ruby,jdk,android sdk,ant加入到原有的path中,如：
　　c:\ruby\bin;c:\jdk15\bin;d:\ant\bin;d:\androidsdk\tools
　　其中，下载Ruby 1.9.1的Windows版本后，直接选择安装到指定目录即可。
　　在完成上面的这些工作后，我们接下来就通过PhoneGap框架的脚手架功能，快速生成一个android的原型程序。
通过PhoneGap生成基于Android的原型程序
　　1 进入PhoneGap-Android目录，并进入MS-DOS方式，在命令行下，按如下格式执行该命令：
　　ruby bin/droidgap "[android_sdk_path]" [name] [package_name] "[www]" "[path]"
　　上述参数说明如下：
　　其中android_sdk_path指定了android sdk的安装位置，比如：
　　d:/androidsdk,注意这里不要写成“\”,应该是“/”作为分隔符。
　　Name：要生成的android应用的名字。
　　Package_name:生成的android应用中源代码中的包名，注意必须至少有一层的包关系，即com.XXXX的形式。
　　WWW：这里指应用中存放HTML,Javascipt,CSS的位置目录名称。
　　PATH:这里指通过PhoneGap生成的项目原型工程的目录位置，注意的是，该目录位置不能指定为eclipse的workspace工作空间内。
　　下面是一个例子：
　　ruby bin/droidgap “d:/androidsdk” HelloWorldGap com.phonegap www
　　“d:/HelloWorldGap”
　　运行上述命令后，会发现在D盘会生成一个HelloWolrdGap的工程目录，phonegap已经为我们生成了项目的框架了。
　　将工程导入到ECLIPSE中
　　如果安装了Android for eclipse的插件ADT后，我们可以将PhoneGap生成的工程导入到Eclipse中去。首先我们打开Eclipse,新建一个Android Project，如下图

<IGNORE_JS_OP>

33.jpg (58.61 KB, 下载次数: 33)

下载附件  保存到相册

2012-1-20 23:51 上传

 
 
其中输入Project name的名称为HelloGapAndroid，其中在Create project from existing source中选择上文中用PhoneGap生成的项目的目录。之后在Eclipse中则会看到如下结构的

<IGNORE_JS_OP>

44.jpg (19.27 KB, 下载次数: 21)

下载附件  保存到相册

2012-1-20 23:51 上传

 
 
可以看到其中assets下的www目录存放了工程中需要用到的HTML、Javascript和CSS文件。此外，还要确认工程的lib目录下面，存在phonegap.jar文件。
　　接下来我们试着运行下这个工程，会在模拟器中看到如下效果：

<IGNORE_JS_OP>

55.jpg (33.67 KB, 下载次数: 55)

下载附件  保存到相册

2012-1-20 23:51 上传

 
 
　运行的结果是显示了PhoneGap中默认显示的index.html页面，其中演示了其中的一些功能，大家可以尝试去试验一下。
　　编写HelloWorld程序
　　接下来，我们来在此基础上编写HelloWorld程序。我们切换到index.html中去，在代码模式下，删除原来phonegap生成的代码，写入如下代码：
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=320; user-scalable=no" />      <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  5. <title>PhoneGap Android App</title>
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
  7. <script type="text/javascript" charset="utf-8">
  8. var showMessageBox = function() {
  9. navigator.notification.alert("Hello World of PhoneGap");
  10. }
  11. function init(){
  12. document.addEventListener("deviceready", showMessageBox, true);
  13. }
  14. </script>
  15. </head>
  16. <body onload="init();"  >
  17. </body>
  18. </html>

复制代码

可以看到，这其实是普通的HTML和Javascript代码。首先在onload触发的方法init中，通过Javascript的回调方法中调用了phonegap封装好的事件
　　deviceready，这个事件含义是当设备在将其应用程序加载完毕后触发的。在引入phonegap提供的API时，必须通过 的方式引入进行调用。在这里的回调函数showMessageBox中，就调用了phonegap封装好的方法 navigator.notification.alert，这个方法实际上是
　　显示了一个带文本的提示框，运行结果如下图：

<IGNORE_JS_OP>

66.jpg (32.02 KB, 下载次数: 25)

下载附件  保存到相册

2012-1-20 23:51 上传

 
 
改进HelloWorld程序
　　接下来我们改进下这个程序，实现的功能是我们可以在文本框里输入名字，然后点确定按钮后，弹出提示窗口显示Hello+你输入的名字。修改程序代码如下：
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=320; user-scalable=no" />
  5. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  6. <title>PhoneGap</title>
  7. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
  8. <script type="text/javascript" charset="utf-8">
  9. var displayHello = function() {
  10. var name =      document.getElementById("firstname").value;
  11. navigator.notification.alert("name" + name);
  12. }
  13. </script>
  14. </head>
  15. <body onload="init();" id="bdy" >
  16. <div id="txt">
  17. <input   type="text" name="firstname" id="firstname" />
  18. </div>
  19. <div id ="btn">
  20. <a href="#" class="btn" onclick="displayHello();">Say Hello</a>
  21. </div>
  22. </div>
  23. </body>
  24. </html>

复制代码

如果你懂得HTML和Javascript的话，上面的程序实在容易理解。其中我们添加了一个名为firstname的文本框，并且在按钮的onclick事件中调用的displayHello()方法中通过document.getElementById的Javascript方法获得了用户输入的名字，然后同样用navigator.notification.alert的方法输出结果，输入的界面和输出的结果如下图所示：

<IGNORE_JS_OP>

77.jpg (40.7 KB, 下载次数: 36)

下载附件  保存到相册

2012-1-20 23:51 上传

 
 

<IGNORE_JS_OP>

88.jpg (32.33 KB, 下载次数: 27)

下载附件  保存到相册

2012-1-20 23:51 上传

 
 
总结
　　通过PhoneGap这套开源框架对开发移动设备SDK的封装，我们今后在开发移动应用时，只需要调用PhoneGap封装好的API，结合已有的Java、HTML、CSS和Javascript技术，就可以很方便地进行开发了，更多的资料请查看PhoneGap的帮助文档。

[转]跨平台开发：PhoneGap移动开发框架初探的更多相关文章

  1. 老司机学新平台 - Xamarin开发环境及开发框架初探

    随着被微软收购,最近一年间,Xamarin的火爆程度与日俱增.免费.更好的VS2015集成.更好的模拟器,甚至,在windows上运行和调试iOS平台程序,让我这样接触了十几年.NET平台的老司机,即 ...

  2. 跨平台移动开发phonegap/cordova 3.3全系列教程-目录

    目录(更新完成后会附上源码供参考) 第一章 android平台开发 phonegap/cordova简介 1.开发环境搭建 2.helloworld 3.启动画面 4.结合asp.net/jqmboi ...

  3. PhoneGap移动开发框架

    phonegap是一个跨平台的移动app开发框架,可以把html css js写的页面打包成跨平台的可以安装的移动app,并且可以调用原生的几乎所有的功能,比如摄像头,联系人,加速度等    看到一篇 ...

  4. 为什么 Flutter 是跨平台开发的终极之选

    跨平台开发是当下最受欢迎.应用最广泛的框架之一.能实现跨平台开发的框架也五花八门,让人眼花缭乱.最流行的跨平台框架有 Xamarin.PhoneGap.Ionic.Titanium.Monaca.Se ...

  5. 在 Windows 10 上搭建 Cordova 跨平台开发 Android 环境

    目录 安装 Cordova 安装 Java 和 Android 环境 创建 Cordova 应用程序 构建和运行 Cordova Cordova 简介:Cordova 原名 PhoneGap,是一个开 ...

  6. 【Xamarin开发 Android 系列 2】VS2015跨平台开发的几种方式

    原文:[Xamarin开发 Android 系列 2]VS2015跨平台开发的几种方式 在微软Build大会上,微软宣布在VS2015中支持三种方式进行跨平台的开发. 1. Xamarin 2. Co ...

  7. [.net 面向对象程序设计深入]（9）.NET Core 跨平台开发环境搭建

    [.net 面向对象程序设计深入](9).NET Core 跨平台开发环境搭建 1.概述 读前必备:认识.NET Core 上篇介绍了.NET 新的生态环境:包括.NET Framework..NET ...

  8. 我发起了一个 .Net 开源 跨平台 GUI （界面开发框架）项目 HtmlCore

    大家好 , 我发起了一个 .Net 开源 跨平台 GUI (界面开发框架)项目 , 名字叫 HtmlCore  . 项目的一个主要目标是可以用 .Net 在 移动设备 上 开发 GUI 程序 (界面程 ...

  9. Jexus 网站服务器和 ASP.NET 跨平台开发

    微软的跨平台战略 微软在过去的一年多中时间中发生了令整个 IT 行业感到惊叹的变化.这一切始于 Ballmer 的退位和 Nadella 的决心,更始于早已在微软各个基层部门蠢蠢欲动的二次创业. 以开 ...

随机推荐

  1. 第四节：Windows系统安装时BIOS设置及注意

    BIOS系统 BIOS是英文"Basic Input Output System"的缩略词,直译过来后中文名称就是"基本输入输出系统".在IBM PC兼容系统上 ...

  2. iOS逆向+越狱

    感觉本文涉及内容有点多的,但是自己不愿意写太多,就简单的谢谢关于ios上手的东西吧 初级入手不免要用到,pp助手,i4 tools等 iOS逆向-ipa包重签名及非越狱手机安装多个应用 1.常识 我们 ...

  3. Python学习之路：一天搞定基础部分

    ~代表省略的内容,如变量名.字符串等等 1.Pyhton中比较特别的运算: **:代表指数运算,例如2**3 = 8 //:代表整除运算,这一点和Java不同 2.Python的注释: #:单行注释 ...

  4. 解决ScrollViewer嵌套的DataGrid、ListBox等控件的鼠标滚动事件无效

    C# 中,两个ScrollViewer嵌套在一起或者ScrollViewer里面嵌套一个DataGrid.ListBox.Listview(控件本身有scrollviewer)的时候,我们本想要的效果 ...

  5. python类与对象的组合与继承

    1.把类的对象实例化放到一个新的类里面叫做类的组合,组合就是指几个横向关系的类放在一起,纵向关系的类放在一起是继承,根据实际应用场景确定.简单的说,组合用于“有一个”的场景中,继承用于“是一个”的场景 ...

  6. OpenGL学习笔记(6) 基础光照的计算方法

    这个笔记只是冯氏光照模型下漫反射光以及镜面光照的计算方式的笔记 基础光照 基础光照分为环境光,漫反射光,镜面光照 环境光 环境光是一个常量,表示在没有光源的情况下物体的光 漫反射光 漫反射光分量的计算 ...

  7. 有关JOIN ON的心得体会

    在第一家公司工作大概有一年之后,我的上司开始让我负责一个项目了. 说起这个项目,其实就是类似一个报表系统的抽数据的活.我的主要工作就是将我们公司产生的数据进行抽取清理,然后生成一些带有分析性质的数据. ...

  8. hadoop之定制自己的Partitioner

    partitioner负责shuffle过程的分组部分,目的是让map出来的数据均匀分布在reducer上,当然,如果我们不需要数据均匀,那么这个时候可以自己定制符合要求的partitioner. 下 ...

  9. Refs 和 DOM

    在常规的 React 数据流中,props 是父组件与子组件交互的唯一方式.要修改子元素,你需要用新的 props 去重新渲染子元素.然而,在少数情况下,你需要在常规数据流外强制修改子元素.被修改的子 ...

  10. 对Largest函数的测试

    题目:查找list[]中的最大值:int Largest(int list[], int length); int Largest(int list[], int length) { int i,ma ...