跨平台开发：初探PhoneGap移动开发框架_程序开发

跨平台开发：初探PhoneGap移动开发框架

创始人

2024-07-15 17:01:11

0次

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

51CTO移动开发推荐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中,如：

c:\ruby\bin;c:\jdk15\bin;d:\ant\bin;d:\androidsdk\tools

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

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

#p#

通过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，如下图

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

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

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

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

#p#

编写HelloWorld程序

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

>    
    
        
              
    PhoneGap Android App<!--</span-->title>    </li><li>             <script type="text/javascript" charset="utf-8" src="phonegap.js"><!--</span-->script>            </li><li class="alt">           <script type="text/javascript" charset="utf-8">    </li><li>                      var showMessageBox = function() {     </li><li class="alt">              navigator.notification.alert("Hello World of PhoneGap");     </li><li>                      }     </li><li class="alt">                        function init(){     </li><li>            document.addEventListener("deviceready", showMessageBox, true);                    </li><li class="alt">                      }     </li><li>  <!--</span-->script>    </li><li class="alt">  <!--</span-->head>    </li><li><body onload="init();"  >    </li><li class="alt">  <!--</span-->body>    </li><li><!--</span-->html>    </li><li class="alt"> </li></ol></pre>
<p>可以看到，这其实是普通的HTML和Javascript代码。首先在onload触发的方法init中，通过Javascript的回调方法中调用了phonegap封装好的事件</p>
<p>deviceready，这个事件含义是当设备在将其应用程序加载完毕后触发的。在引入phonegap提供的API时，必须通过 的方式引入进行调用。在这里的回调函数showMessageBox中，就调用了phonegap封装好的方法 navigator.notification.alert，这个方法实际上是</p>
<p>显示了一个带文本的提示框，运行结果如下图：</p>
<p style="text-align: center"><img alt="" src="https://files.pic99.top/shayuweb/202407/a7b910efe770.jpg" /></p>
<p style="text-align: left">#p#</p>
<p><strong>改进HelloWorld程序</strong></p>
<p>接下来我们改进下这个程序，实现的功能是我们可以在文本框里输入名字，然后点确定按钮后，弹出提示窗口显示Hello+你输入的名字。修改程序代码如下：</p>
<pre><ol class="dp-xml"><li class="alt">>    </li><li>    </li><li class="alt"><html>    </li><li>    </li><li class="alt">  <head>    </li><li>    </li><li class="alt">    <meta name="viewport" content="width=320; user-scalable=no" />    </li><li>    </li><li class="alt">    <meta http-equiv="Content-type" content="text/html; charset=utf-8">    </li><li>    </li><li class="alt">    <title>PhoneGap<!--</span-->title>    </li><li>    </li><li class="alt">              <script type="text/javascript" charset="utf-8" src="phonegap.js"><!--</span-->script>            </li><li>    </li><li class="alt">              <script type="text/javascript" charset="utf-8">    </li><li>    </li><li class="alt">              var displayHello = function() {     </li><li>    </li><li class="alt">                        var name =      document.getElementById("firstname").value;     </li><li>    </li><li class="alt">                        navigator.notification.alert("name" + name);     </li><li>    </li><li class="alt">            }     </li><li>    </li><li class="alt">   <!--</span-->script>    </li><li>    </li><li class="alt">  <!--</span-->head>    </li><li>    </li><li class="alt">  <body onload="init();" id="bdy" >    </li><li>    </li><li class="alt">            <div id="txt">    </li><li>    </li><li class="alt">            <input   type="text" name="firstname" id="firstname" />    </li><li>    </li><li class="alt">            <!--</span-->div>    </li><li>    </li><li class="alt">            <div id ="btn">    </li><li>    </li><li class="alt">    <a href="#" class="btn" onclick="displayHello();">Say Hello<!--</span-->a>    </li><li>    </li><li class="alt">            <!--</span-->div>    </li><li>    </li><li class="alt">        <!--</span-->div>    </li><li>    </li><li class="alt">  <!--</span-->body>    </li><li>    </li><li class="alt"><!--</span-->html>   </li><li>   </li></ol></pre>
<p>如果你懂得HTML和Javascript的话，上面的程序实在容易理解。其中我们添加了一个名为firstname的文本框，并且在按钮的onclick事件中调用的displayHello()方法中通过document.getElementById的Javascript方法获得了用户输入的名字，然后同样用navigator.notification.alert的方法输出结果，输入的界面和输出的结果如下图所示：</p>
<p style="text-align: center"><img alt="" src="https://files.pic99.top/shayuweb/202407/c87cbc29ee5d5f.jpg" /></p>
<p style="text-align: center"><img alt="" src="https://files.pic99.top/shayuweb/202407/fb2f6473727827e.jpg" /></p>
<p><strong>总结</strong></p>
<p>通过PhoneGap这套开源框架对开发移动设备SDK的封装，我们今后在开发移动应用时，只需要调用PhoneGap封装好的API，结合已有的Java、HTML、CSS和Javascript技术，就可以很方便地进行开发了，更多的资料请查看PhoneGap的帮助文档。</p>
<p>了解Android开发更多内容请看</p>
<p align="center">[[16032]]</p>
<p>【编辑推荐】</p>
<ol>
    <li>Adobe AIR登陆Android 跨平台应用运行成现实</li>
    <li>有效控制Android应用程序的耗电量</li>
    <li>Android数据库事务浅析</li>
    <li>nbandroid：NetBeans的Android插件</li>
</ol>
                 <!--end::Text-->
            </div>
            <!--end::Description-->
            <div class="mt-5">
                <!--关键词搜索-->
                            </div>
            <div class="mt-5">
                <p class="fc-show-prev-next">
                    <strong>上一篇：</strong><a href="/chengxu/66197.html">IE7.JS解决IE兼容性问题方法揭秘</a><br>
                </p>
                <p class="fc-show-prev-next">
                    <strong>下一篇：</strong><a href="/chengxu/66199.html">MySQL数组函数--mysql_fetch_array()</a>                </p>
            </div>
            <!--begin::Block-->
            <div class="d-flex flex-stack mb-2 mt-10">
                <!--begin::Title-->
                <h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3>
                <!--end::Title-->
            </div>
            <div class="separator separator-dashed mb-9"></div>
            <!--end::Block-->
            <div class="row g-10">
                
            </div>


        </div>
        <!--end::Table widget 14-->
    </div>
    <!--end::Col-->

    <!--begin::Col-->
    <div class="col-xl-4 mt-0">
        <!--begin::Chart Widget 35-->
        <div class="card card-flush h-md-100">
            <!--begin::Header-->
            <div class="card-header pt-5 ">
                <!--begin::Title-->
                <h3 class="card-title align-items-start flex-column">
                    <!--begin::Statistics-->
                    <div class="d-flex align-items-center mb-2">
                        <!--begin::Currency-->
                        <span class="fs-5 fw-bold text-gray-800 ">热门资讯</span>
                        <!--end::Currency-->
                    </div>
                    <!--end::Statistics-->
                </h3>
                <!--end::Title-->
            </div>
            <!--end::Header-->
            <!--begin::Body-->
            <div class="card-body pt-3">

                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/chengxu/241137.html" class="text-dark fw-bold text-hover-primary fs-6">如何允许远程连接到MySQL数...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">[[277004]]【51CTO.com快译】默认情况下，MySQL服务器仅侦听来自localhos...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/chengxu/61017.html" class="text-dark fw-bold text-hover-primary fs-6">如何利用交换机和端口设置来管理...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">在网络管理中，总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/chengxu/119031.html" class="text-dark fw-bold text-hover-primary fs-6">施耐德电气数据中心整体解决方案...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">近日，全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”，作为该活动的...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('https://files.pic99.top/shayuweb/202407/da6c51fc268b.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/chengxu/82595.html" class="text-dark fw-bold text-hover-primary fs-6">Windows恶意软件20年“...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">在Windows的早期年代，病毒游走于系统之间，偶尔删除文件（但被删除的文件几乎都是可恢复的），并弹...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('https://files.pic99.top/shayuweb/202409/eb2e03366045d9f.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/chengxu/139440.html" class="text-dark fw-bold text-hover-primary fs-6">20个非常棒的扁平设计免费资源</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/chengxu/27164.html" class="text-dark fw-bold text-hover-primary fs-6">2009 IBM动态架构新动力...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/chengxu/225.html" class="text-dark fw-bold text-hover-primary fs-6">通过 XML 进行内容发布</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/chengxu/130901.html" class="text-dark fw-bold text-hover-primary fs-6">德国电信门户网站可实时显示全球...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">德国电信周三推出一个门户网站，直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('https://files.pic99.top/shayuweb/202403/3888b00968de30e.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/chengxu/884.html" class="text-dark fw-bold text-hover-primary fs-6">着眼MAC地址，解救无法享受D...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">在安装了DHCP服务器的局域网环境中，每一台工作站在上网之前，都要先从DHCP服务器那里享受到地址动...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('https://files.pic99.top/shayuweb/202503/5fe82cca6c5ff78.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/chengxu/246646.html" class="text-dark fw-bold text-hover-primary fs-6">为啥国人偏爱 Mybatis，...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">关于 SQL 和 ORM  的争论，永远都不会终止，我也一直在思考这个问题。昨天又跟群里的小伙伴进行...</span>
                    </div>
                    <!--end::Title-->
                </div>
                
            </div>
            <!--end::Body-->
        </div>
        <!--end::Chart Widget 35-->
    </div>
    <!--end::Col-->
</div>



</div>
<!--end::Content container-->
</div>
<!--end::Content-->
</div>
<!--end::Content wrapper-->
<!--begin::Footer-->
<div id="kt_app_footer" class="app-footer">
    <!--begin::Footer container-->
    <div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3">
        <!--begin::Copyright-->
        <div class="text-dark order-2 order-md-1">
            <span class="text-muted fw-semibold me-1">2025 ©</span>
            <a href="/" target="_blank" class="text-gray-800 text-hover-primary">鲨鱼网</a>
            <a href="https://beian.miit.gov.cn/" target="_blank" class="text-gray-800 text-hover-primary"></a>
            <a href="http://spbjmm.com.shayuweb.com">上品网</a><a href="http://www.zzszq.net/">深知网</a><a href="http://www.taiyangwa.net/">太阳生活网</a><a href="http://baike.taiyangwa.net/">太阳百科网</a><a href="http://ypkjmy.com.shayuweb.com/">一品科技</a><a href="http://www.yuansudz.com/news/">元素网</a><a href="http://www.xn--i6qw12a.com/">帛典网</a><a href="http://xldmm.com.shayuweb.com/">星链岛</a>        </div>
        <!--end::Copyright-->
        <!--begin::Menu-->
        <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1">
                        <li class="menu-item">
                <a href="/news/" target="_blank" class="menu-link px-2">科技资讯</a>
            </li>
                        <li class="menu-item">
                <a href="/chengxu/" target="_blank" class="menu-link px-2">程序开发</a>
            </li>
                        <li class="menu-item">
                <a href="/sitemap.xml" target="_blank" class="menu-link px-2">sitemap</a>
            </li>
        </ul>
        <!--end::Menu-->
    </div>
    <!--end::Footer container-->
</div>
<!--end::Footer-->
</div>
<!--end:::Main-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Page-->
</div>
<!--end::App-->
<div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">
    <!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg-->
    <span class="svg-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect>
            <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path>
        </svg>
    </span>
    <!--end::Svg Icon-->
</div>
<!--begin::Javascript-->
<script>var hostUrl = "/static/default/pc/";</script>
<!--begin::Global Javascript Bundle(mandatory for all pages)-->
<script src="/static/default/pc/plugins/global/plugins.bundle.js"></script>
<script src="/static/default/pc/js/scripts.bundle.js"></script>
<!--end::Global Javascript Bundle-->

<!--end::Javascript-->
</body>
<!--end::Body-->
</html>