跨平台开发：初探PhoneGap移动开发框架-程序员宅基地

技术标签： android web（html5）  跨平台  android  android（综合）  phonegap  移动开发  javascript  eclipse  

随着Google的Android手机和苹果的iPhone手机的逐渐普及，越来越多开发者加入到移动应用开发的大军当中。目前移动终端中的冠亚军Android，应用是基于Java语言基础上进行开发的；而苹果公司的iPhone则是基于C语言开发的。如果开发者编写的应用需要同时在不同的移动设备上运行的话，则必须要掌握多种开发语言，这已经成为开发团队的一大难题，在51CTO专访国内著名移动软件尚邮的首席架构师时也提到过跨平台软件开发的困难。而为了进一步简化移动应用的编程，很多公司推出解决方案，Adobe推出的“AIR for Android”，使Flash为Android开发本地应用成为可能。而Nitobi公司推也出了一套开源的移动应用解决方案PhoneGap。

PhoneGap是一款开源的手机应用开发平台，它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。PhoneGap将移动设备本身提供的复杂的API进行了抽象和简化，提供了一系列丰富的API供开发者调用，只要你会HTML和Javascript或者Java语言，就可以利用PhoneGap提供的API去调用各种功能，PhoneGap就能让你可以制作出在各种手机平台上运行的应用，这对移动应用开发者来说无疑是个福音。 目前，PhoneGap已实现对iPhone/ipad、Android、Symbian,Palm、黑莓各版本绝大部分功能的支持,其中官方文档中对其支持的详细说明如下图所示：

在本文中，将以一个简单的能在Android平台上运行的HelloWorld的示例，讲解如何安装PhoneGap的开发框架并配合Eclipse进行开发的过程。

基于Android SDK安装PhoneGap框架

首先，要明白一点，就是要利用PhoneGap框架开发移动应用时，也是必须在开发环境上安装对应移动设备应用的SDK的。比如你要开发一个运行在Android上的应用，则必须安装 Android的SDK包，开发iPhone应用，就要安装iPhone sdk。本文将介绍如何安装基于Android SDK下安装PhoneGap。

无论是开发基于哪种平台的移动应用，首先要到PhoneGap的官方网站下载

PhoneGap包（下载地址）。目前最新的版本是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

◆JDK 1.5以上

◆Android 的Eclipse开发插件ADT

◆Ruby 1.9.1，建议到官网直接下载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中,如：

 
 
  
    
   
  1. c:/ruby/bin;c:/jdk15/bin;d:/ant/bin;d:/androidsdk/tools  
    2. 
   
  2.  
    3.

其中，下载Ruby 1.9.1的Windows版本后，直接选择安装到指定目录即可。

在完成上面的这些工作后，我们接下来就通过PhoneGap框架的脚手架功能，快速生成一个android的原型程序。

 

通过PhoneGap生成基于Android的原型程序

1 进入PhoneGap-Android目录，并进入MS-DOS方式，在命令行下，按如下格式执行该命令：

 
 
  
    
   
  1. ruby bin/droidgap "[android_sdk_path]" [name] [package_name] "[www]" "[path]"  
    2. 
   
  2.  
    3.

上述参数说明如下：

其中android_sdk_path指定了android sdk的安装位置，比如：

d:/androidsdk,注意这里不要写成“/”,应该是“/”作为分隔符。

Name：要生成的android应用的名字。

Package_name:生成的android应用中源代码中的包名，注意必须至少有一层的包关系，即com.XXXX的形式。

WWW：这里指应用中存放HTML,Javascipt,CSS的位置目录名称。

PATH:这里指通过PhoneGap生成的项目原型工程的目录位置，注意的是，该目录位置不能指定为eclipse的workspace工作空间内。

下面是一个例子：

 
 
  
    
   
  1. ruby bin/droidgap “d:/androidsdk” HelloWorldGap com.phonegap www  
    2. 
   
  2. “d:/HelloWorldGap”  
    3. 
   
  3.  
    4.

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

将工程导入到Eclipse中

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

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

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

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

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

 

编写HelloWorld程序

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

 
 
  
    
   
  1. <!DOCTYPE HTML>    
    2. 
   
  2. <html>    
    3. 
   
  3.     <head>    
    4. 
   
  4.     <meta name="viewport" content="width=320; user-scalable=no" />      <meta http-equiv="Content-type" content="text/html; charset=utf-8">    
    5. 
   
  5.     <title>PhoneGap Android App</title>    
    6. 
   
  6.              <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>            
    7. 
   
  7.            <script type="text/javascript" charset="utf-8">    
    8. 
   
  8.                       var showMessageBox = function() {     
    9. 
   
  9.               navigator.notification.alert("Hello World of PhoneGap");     
    10. 
   
  10.                       }     
    11. 
   
  11.                         function init(){     
    12. 
   
  12.             document.addEventListener("deviceready", showMessageBox, true);                    
    13. 
   
  13.                       }     
    14. 
   
  14.   </script>    
    15. 
   
  15.   </head>    
    16. 
   
  16. <body onload="init();"  >    
    17. 
   
  17.   </body>    
    18. 
   
  18. </html>    
    19. 
   
  19.  
    20.

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

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

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

 

改进HelloWorld程序

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

 
 
  
    
   
  1. <!DOCTYPE HTML>    
    2. 
   
  2.     
    3. 
   
  3. <html>    
    4. 
   
  4.     
    5. 
   
  5.   <head>    
    6. 
   
  6.     
    7. 
   
  7.     <meta name="viewport" content="width=320; user-scalable=no" />    
    8. 
   
  8.     
    9. 
   
  9.     <meta http-equiv="Content-type" content="text/html; charset=utf-8">    
    10. 
   
  10.     
    11. 
   
  11.     <title>PhoneGap</title>    
    12. 
   
  12.     
    13. 
   
  13.               <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>            
    14. 
   
  14.     
    15. 
   
  15.               <script type="text/javascript" charset="utf-8">    
    16. 
   
  16.     
    17. 
   
  17.               var displayHello = function() {     
    18. 
   
  18.     
    19. 
   
  19.                         var name =      document.getElementById("firstname").value;     
    20. 
   
  20.     
    21. 
   
  21.                         navigator.notification.alert("name" + name);     
    22. 
   
  22.     
    23. 
   
  23.             }     
    24. 
   
  24.     
    25. 
   
  25.    </script>    
    26. 
   
  26.     
    27. 
   
  27.   </head>    
    28. 
   
  28.     
    29. 
   
  29.   <body onload="init();" id="bdy" >    
    30. 
   
  30.     
    31. 
   
  31.             <div id="txt">    
    32. 
   
  32.     
    33. 
   
  33.             <input   type="text" name="firstname" id="firstname" />    
    34. 
   
  34.     
    35. 
   
  35.             </div>    
    36. 
   
  36.     
    37. 
   
  37.             <div id ="btn">    
    38. 
   
  38.     
    39. 
   
  39.     <a href="#" class="btn" onclick="displayHello();">Say Hello</a>    
    40. 
   
  40.     
    41. 
   
  41.             </div>    
    42. 
   
  42.     
    43. 
   
  43.         </div>    
    44. 
   
  44.     
    45. 
   
  45.   </body>    
    46. 
   
  46.     
    47. 
   
  47. </html>   
    48. 
   
  48.    
    49.

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

总结

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

了解Android开发更多内容请看

Android开发专题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyz_lmn/article/details/6253650

智能推荐

升级鸿蒙系统无法连接服务器,升级到鸿蒙系统后经常提示当前无网络，请检查后重试的说明...-程序员宅基地

文章浏览阅读2.4w次。问题：自从升级到了鸿蒙系统之后，在看抖音时经常会出现提示“当前无网络，请检查后重试”，WIFI已经确认过了，无任何问题，该如何处理？问题追加：要么出现如下图提示：要么出现如下图提示：网络不一样，但都是提示“当前无网络，请检查后重试”。回答：建议尝试还原下网络，有用户重置还原网络设置改善了好多，另外，请把系统更新至新版。注：有不少用户也有此情况，以下是他们的反馈：1、可能是跟鸿蒙系统本身有关，因为原..._鸿蒙系统状态网络不可用

Qt：Qt框架的初步认识和基本使用

QT框架基本认识

泰克Tektronix THDP0100高压差分探头-程序员宅基地

文章浏览阅读45次。泰克THDP0100高压差分探头Tektronix提供了广泛的高压探测解决方案，使用户能够安全、准确地进行浮动测量。高达6000 V的差速器(DC+PK AC)多2300 V通用(RMS)功率变换器设计与使用。安全高压探头解决方案。

使用uiautomator2自动化测试app(三)------实战篇_uiautomator2创建虚拟机-程序员宅基地

文章浏览阅读1.4k次。这里我主要会介绍怎么自动的化操控模拟器和一些其它的测试.1. 博主使用的是雷电模拟器,其它模拟器不适用此方法雷电模拟器接口:http://www.ldmnq.com/bbs/thread-30-1-1.html这里面是介绍了雷电模拟器调试接口的一些命令,需动手在cmd上先行操作!2. 新建一个.py文件,开始编写脚本这里主要实现了:2.1 创建模拟器2.2 修..._uiautomator2创建虚拟机

microk8s的registry私有镜像库

【代码】microk8s的registry私有镜像库。

开源项目，毕业设计_本科毕业设计拿别人的开源代码修改-程序员宅基地

文章浏览阅读1.5w次，点赞35次，收藏385次。自己在网上找的开源项目，比较好分享给大家热门开源项目（包含小四轴、智能手环、光立方、智能车、防丢器等项目）号外！号外！（搞四轴，有这套就足够了！)科研级别的小四轴STM32F4芯片支持WIFI且android手机控制自适应控制就是牛掰！该飞机面向有科研和强烈学习意向的小伙伴们使用，如果只是想玩的话你肯定不会喜欢这套四轴的，主要设计思想是提供一个高性能的控制和姿态算法验证平台，因此..._本科毕业设计拿别人的开源代码修改

随便推点

PHP中冒号加引号,冒号的五种用法 冒号引号的三种用法-程序员宅基地

文章浏览阅读787次。冒号的五种用法一般情况下用在提示语的后面或前面，表示提示下文或总括上文。有五种情况是一定要用冒号的。书信、发言稿开头的称呼语后面，有引起他人注意的意思；用在某某说之后，表示下面是引用的话。这种用法很常见，就不举例了。用在总括的话后面，表示后面有分项说明或表示冒号前面的话引起后面的话。例如：学生大致可以分为三类：踏实学习的，聪明但不认真的，既不聪明又不认真的。纺线有几种姿势：可以坐着破蒲团纺，可以坐..._正则 引号冒号引号

macbook历代_苹果历代MacBook笔记本简要回顾-程序员宅基地

文章浏览阅读4.3k次。2006年5月份的时候，苹果悄然取消了12英寸的PowerBook和12/14英寸的iBook机型，取而代之的是13.3英寸的MacBook。作为苹果从PowerPC处理器向Intel迁移的最后一步，该机拥有有黑/白两种颜色。随后，该公司又推出了15和17英寸的MacBook Pro机型。最近，苹果公司更是推出了只有一个USB-C接口的12英寸MacBook。不过本文的主要目的，还是带大家回顾一下..._macbook9.1是哪年的

用maven命令将jar包导入本地仓库_mavend导入jar包命令-程序员宅基地

文章浏览阅读2.8k次。1、将jar包放在D盘根目录下D:\ojdbc6.jar2、 _mavend导入jar包命令

常量与十六进制数0x7f或0x3f做&（与）运算含义-程序员宅基地

文章浏览阅读2.5w次，点赞13次，收藏31次。做个复习。十六进制数 [0~10 A~F]0x7f对应的二进制数及十进制数为：0111 1111 = 2^7 = 1280x3f对应的二进制数及十进制数为：0011 1111 = 2^6 = 640x7f与常量做与运算实质是保留常量（转换为二进制形式）的后7位数，既取值区间为[0,128]比如，0x7f &amp; 256 0111 1111 -------- 1..._0x7f

Python爬虫绕过登录的小技巧_python 爬虫 跳过会员限制-程序员宅基地

文章浏览阅读6.3k次，点赞4次，收藏17次。前言很多时候我们做 Python 爬虫时或者自动化测试时需要用到 selenium 库，我们经常会卡在登录的时候，登录验证码是最头疼的事情，特别是如今的文字验证码和图形验证码。文字和图形验证码还加了干扰线，本文就来讲讲怎么绕过登录页面。登录页面的验证，比如以下的图形验证码。还有我们基本都看过的 12306 的图形验证码。绕过登录方法绕过登录基本有两种方..._python 爬虫 跳过会员限制

安装 GMP、NTL、CTMalloc ，编译 OpenFHE_openfhe安装-程序员宅基地

文章浏览阅读565次。首先安装 GMP、NTL、CTMalloc 等等很有用的三方库，然后编译 OpenFHE 工具包。_openfhe安装

推荐文章

热门文章

相关标签