用PHONEGAP开发_移动应用程序

最新推荐文章于 2024-09-18 11:19:13 发布

可米

最新推荐文章于 2024-09-18 11:19:13 发布

阅读量797

点赞数

文章标签： phonegap android javascript eclipse jquery html

1. 什么是PhoneGap
PhoneGap是一个自由开放源码的开发工具和框架，允许利用HTML + JavaScript + CSS的强大功能在多个手机平台上开发程序,开发出来的程序经过在各自的平台上编译形成独立的安装程序。使程序看起来和native的程序一样。

2. PhoneGap的优势和劣势
优势：l 跨平台：一次开发，多个平台共用。现主要包括了android，iOS，AppleiOS, Google Android, Palm,Symbian, BlackBerry 等。WP7等平台也在逐步兼容中。l 降低开发门槛。对于很多WEB开发人员来说，熟悉Objective-C语言和Java语言都是比较痛苦的事情。有了PhoneGap就不用担心这些了。用熟悉的Web前端技术就可以开发出很专业的手机应用程序。l 提供强大的硬件访问控制。比起传统的Web程序，PhoneGap提供了一些列的JS 的类，可以直接访问硬件。比如加速，相机，指南针，GPS，文件访问等，可以让你用JS方便地调用系统的硬件。以弥补传统Web程序的一块错误。l 方便的安装和使用。PhoneGap的架构很复杂，但对于大多数开发者来说，只用很简单的配置就可以搭好环境。只用专注写好自己的Web页面，拷贝进去就可以了。劣势：l 运行速度慢：程序的载入和UI界面的反应都比原生的程序慢，因为它实际上还是在展示Web页面，所以载入、页面刷新等肯定是需要一定时间的。l 不适合部分程序。如果你的程序需要3D功能，或者对界面刷新有较高的要求，这样的程序现在来说还只是用原生的语言会比较好。

3. PHONEGAP开发需要的基本知识
l HTML：做为最基本的Web开发，HTML知识必不可少。现在很多移动终端已经支持HTML5了，所以最好学会HTML5相关的知识；l CSS：定义的页面的样式等等，不用CSS，你的页面会很难控制定位和样式等等。建议能掌握CSS3的相关知识，能写出更好的界面；l JavaScript：后台的交互都由JavaScript实现，读写数据库，载入Google Map等等；l PhoneGap的类库：都是JavaScript的库，使用很简单，有详细文档，可以参考官网：http://docs.phonegap.com/l 基本的平台知识：比如要做iPhone的程序，就要知道XCode怎么安装，怎么编译，怎么获取授权证书，真机调试等等，要做android程序就要会搭建Ecllipse开发环境等等。会简单使用这些平台后，就可以安装PhoneGap的平台了，可以参考：http://www.phonegap.com/start

4. jQuery Mobile：PHONEGAP的得力助手
开发PhoneGap的程序，jQuery Mobile不是必备，但是有了jQuery Mobile，可以使你的程序美观很多。jQuery Mobile其实是一堆的样式集和JAVA事件。比如写一个按钮，iOS和android的是不同的，用HTML做出来的往往很丑。一般的处理方式是重新定义按钮的样式，使它变得更像手机平台上的按钮。jQuery Mobile为你提供了这一套框架，你可以通过很简单的属性设置就可以做出跟手机平台下车差不多的按钮，相当方便。详情可以参考：http://jquerymobile.com/

5.PhoneGap移动开发框架初探

在本文中，将以一个简单的能在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,下载之后，解压缩后，会发现如下图所示的若干个文件夹

　这里，由于我们是构建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,androidsdk,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方式，在命令行下，按如下格式执行该命令：

rubybin/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工作空间内。

　　下面是一个例子：

rubybin/droidgap “d:/androidsdk” HelloWorldGap com.phonegap www

“d:/HelloWorldGap”

　　运行上述命令后，会发现在D盘会生成一个HelloWolrdGap的工程目录，phonegap已经为我们生成了项目的框架了。

　　将工程导入到ECLIPSE中

　　如果安装了Android foreclipse的插件ADT后，我们可以将PhoneGap生成的工程导入到Eclipse中去。首先我们打开Eclipse,新建一个Android Project，如下图

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

可以看到其中assets下的www目录存放了工程中需要用到的HTML、Javascript和CSS文件。此外，还要确认工程的lib目录下面，存在phonegap.jar文件。

　　接下来我们试着运行下这个工程，会在模拟器中看到如下效果：

　运行的结果是显示了PhoneGap中默认显示的index.html页面，其中演示了其中的一些功能，大家可以尝试去试验一下。

　　编写HelloWorld程序

接下来，我们来在此基础上编写HelloWorld程序。我们切换到index.html中去，在代码模式下，删除原来phonegap生成的代码，写入如下代码：

<!DOCTYPEHTML>

<html>

<head>

<title>PhoneGap AndroidApp</title>

<scripttype="text/javascript" charset="utf-8"src="phonegap.js"></script>

<scripttype="text/javascript" charset="utf-8">

var showMessageBox =function() {

navigator.notification.alert("Hello World of PhoneGap");

}

function init(){

document.addEventListener("deviceready", showMessageBox,true);

}

</script>

</head>

<bodyοnlοad="init();" >

</body>

</html>

可以看到，这其实是普通的HTML和Javascript代码。首先在onload触发的方法init中，通过Javascript的回调方法中调用了phonegap封装好的事件

deviceready，这个事件含义是当设备在将其应用程序加载完毕后触发的。在引入phonegap提供的API时，必须通过的方式引入进行调用。在这里的回调函数showMessageBox中，就调用了phonegap封装好的方法navigator.notification.alert，这个方法实际上是

　　显示了一个带文本的提示框，运行结果如下图：

改进HelloWorld程序

　　接下来我们改进下这个程序，实现的功能是我们可以在文本框里输入名字，然后点确定按钮后，弹出提示窗口显示Hello+你输入的名字。修改程序代码如下：

<!DOCTYPE HTML>

<html>

<head>

<title>PhoneGap</title>

<scripttype="text/javascript" charset="utf-8" src="phonegap.js"></script>

<scripttype="text/javascript" charset="utf-8">

var displayHello = function(){

var name = document.getElementById("firstname").value;

navigator.notification.alert("name" + name);

}

</script>

</head>

</div>

<a href="#" class="btn"οnclick="displayHello();">Say Hello</a>

</div>

</body>

</html>

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