成都创新互联网站制作重庆分公司

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

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

创新互联公司从2013年成立,是专业互联网技术服务公司,拥有项目网站设计制作、成都网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元塔什库尔干塔吉克做网站,已为上家服务,为塔什库尔干塔吉克各地企业和个人服务,联系电话:18980820575

移动开发推荐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.  

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

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

#p#

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

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

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

上述参数说明如下:

其中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.   “d:/HelloWorldGap”  
  3.  

运行上述命令后,会发现在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生成的代码,写入如下代码:

 
 
 
 
  1. >    
  2.     
  3.         
  4.               
  5.     PhoneGap Android App title>    </li> <li>             <script type="text/javascript" charset="utf-8" src="phonegap.js"> script>            </li> <li>           <script type="text/javascript" charset="utf-8">    </li> <li>                      var showMessageBox = function() {     </li> <li>              navigator.notification.alert("Hello World of PhoneGap");     </li> <li>                      }     </li> <li>                        function init(){     </li> <li>            document.addEventListener("deviceready", showMessageBox, true);                    </li> <li>                      }     </li> <li>   script>    </li> <li>   head>    </li> <li><body onload="init();"  >    </li> <li>   body>    </li> <li> html>    </li> <li> </li> </ol></pre><p>可以看到,这其实是普通的HTML和Javascript代码。首先在onload触发的方法init中,通过Javascript的回调方法中调用了phonegap封装好的事件</p><p>deviceready,这个事件含义是当设备在将其应用程序加载完毕后触发的。在引入phonegap提供的API时,必须通过 的方式引入进行调用。在这里的回调函数showMessageBox中,就调用了phonegap封装好的方法 navigator.notification.alert,这个方法实际上是</p><p>显示了一个带文本的提示框,运行结果如下图:</p><p><p>#p#</p><p><strong>改进HelloWorld程序</strong></p><p>接下来我们改进下这个程序,实现的功能是我们可以在文本框里输入名字,然后点确定按钮后,弹出提示窗口显示Hello+你输入的名字。修改程序代码如下:</p><pre> <ol> <li>>    </li> <li>    </li> <li><html>    </li> <li>    </li> <li>  <head>    </li> <li>    </li> <li>    <meta name="viewport" content="width=320; user-scalable=no" />    </li> <li>    </li> <li>    <meta http-equiv="Content-type" content="text/html; charset=utf-8">    </li> <li>    </li> <li>    <title>PhoneGap title>    </li> <li>    </li> <li>              <script type="text/javascript" charset="utf-8" src="phonegap.js"> script>            </li> <li>    </li> <li>              <script type="text/javascript" charset="utf-8">    </li> <li>    </li> <li>              var displayHello = function() {     </li> <li>    </li> <li>                        var name =      document.getElementById("firstname").value;     </li> <li>    </li> <li>                        navigator.notification.alert("name" + name);     </li> <li>    </li> <li>            }     </li> <li>    </li> <li>    script>    </li> <li>    </li> <li>   head>    </li> <li>    </li> <li>  <body onload="init();" id="bdy" >    </li> <li>    </li> <li>            <div id="txt">    </li> <li>    </li> <li>            <input   type="text" name="firstname" id="firstname" />    </li> <li>    </li> <li>             div>    </li> <li>    </li> <li>            <div id ="btn">    </li> <li>    </li> <li>    <a href="#" class="btn" onclick="displayHello();">Say Hello a>    </li> <li>    </li> <li>             div>    </li> <li>    </li> <li>         div>    </li> <li>    </li> <li>   body>    </li> <li>    </li> <li> html>   </li> <li>   </li> </ol></pre><p>如果你懂得HTML和Javascript的话,上面的程序实在容易理解。其中我们添加了一个名为firstname的文本框,并且在按钮的onclick事件中调用的displayHello()方法中通过document.getElementById的Javascript方法获得了用户输入的名字,然后同样用navigator.notification.alert的方法输出结果,输入的界面和输出的结果如下图所示:</p><p><p><p><strong>总结</strong></p><p>通过PhoneGap这套开源框架对开发移动设备SDK的封装,我们今后在开发移动应用时,只需要调用PhoneGap封装好的API,结合已有的Java、HTML、CSS和Javascript技术,就可以很方便地进行开发了,更多的资料请查看PhoneGap的帮助文档。</p><p>了解Android开发更多内容请看</p><p>[[16032]]</p><p>【编辑推荐】</p><ol><li>Adobe AIR登陆Android 跨平台应用运行成现实</li><li>有效控制Android应用程序的耗电量</li><li>Android数据库事务浅析</li><li>nbandroid:NetBeans的Android插件</li></ol> <br> 新闻名称:跨平台开发:初探PhoneGap移动开发框架 <br> URL分享:<a href="http://www.cxhlcq.cn/article/djijegd.html">http://www.cxhlcq.cn/article/djijegd.html</a> </div> </div> </div> <div class="other container"> <h3>其他资讯</h3> <ul> <li> <a href="/article/dpoohhc.html">手游服务器多少钱?(手游服务器很贵吗)</a> </li><li> <a href="/article/dpoohsi.html">为什么宝应需要SEO,了解宝应SEO的重要性</a> </li><li> <a href="/article/dpodooe.html">P2P连接失败?(如何搭建p2p服务器)</a> </li><li> <a href="/article/dpoohhj.html">word脚本编写教程?(怎么制作脚本)</a> </li><li> <a href="/article/dpodoej.html">怎么测自己的上行带宽?(如何测服务器上传带宽)</a> </li> </ul> </div> <div class="footer"> <div class="foota container"> <div class="foot_nav fl col-lg-8 col-md-8 col-sm-12 col-xs-12"> <ul> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>网站制作</h3> <a href="http://www.cxjianzhan.com/mobile/" target="_blank">手机网站制作</a><a href="http://www.cdxtjz.com/" target="_blank">网站制作</a><a href="http://www.cdxwcx.cn/bj/" target="_blank">网站制作报价</a><a href="http://www.cxhlcq.com/zhizuo/" target="_blank">重庆网站制作</a><a href="https://www.cdxwcx.com/wangzhan/shop.html" target="_blank">成都商城网站制作</a><a href="http://chengdu.cdcxhl.cn/qiye/" target="_blank">企业网站制作</a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>企业服务</h3> <a href="https://www.cdcxhl.com/link/" target="_blank">卖友情链接</a><a href="https://www.cdcxhl.com/shoulu/" target="_blank">网站收录</a><a href="https://www.cdcxhl.com/ruanwen/" target="_blank">软文发布</a><a href="https://www.cdcxhl.com/shoulu/" target="_blank">免费收录网站</a><a href="https://www.cdcxhl.com/service/licence.html" target="_blank">药房许可证</a><a href="https://www.cdcxhl.com/service/dailijizhang.html" target="_blank">代理记账</a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>网站建设</h3> <a href="http://seo.cdkjz.cn/yingxiao/" target="_blank">营销型网站建设</a><a href="http://www.cdweb.net/solve/" target="_blank">网站建设方案</a><a href="https://www.cdxwcx.com/wangzhan/" target="_blank">成都网站建设</a><a href="http://www.cdkjz.cn/fangan/cosmetics/" target="_blank">化妆品企业网站建设方案</a><a href="http://www.cdkjz.cn/fangan/jtss/" target="_blank">上市企业网站建设方案</a><a href="https://www.cdcxhl.com/city/chengdu.html" target="_blank">四川成都网站建设</a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>服务器托管</h3> <a href="http://www.cdfuwuqi.com/jigui/" target="_blank">成都机柜租用</a><a href="https://www.cdcxhl.com/jigui/" target="_blank">服务器托管机柜</a><a href="https://www.cdcxhl.com/idc/guanghua.html" target="_blank">光华服务器托管</a><a href="https://www.cdcxhl.com/idc/gysx.html" target="_blank">贵阳三线机房</a><a href="https://www.cdcxhl.com/idc/yldx.html" target="_blank">义龙电信机房</a><a href="https://www.cdcxhl.com/jigui/" target="_blank">成都机柜租用</a> </li> </ul> </div> <div class="footar fl col-lg-4 col-md-4 col-sm-12 col-xs-12"> <p>全国免费咨询:</p> <b>400-028-6601</b> <p>业务咨询:028-86922220 / 13518219792</p> <p>节假值班:18980820575 / 13518219792</p> <p>联系地址:成都市太升南路288号锦天国际A幢1002号</p> </div> </div> <div class="footb"> <div class="copy container"> <div class="fl">Copyright © 成都创新互联科技有限公司重庆分公司 <a href="https://beian.miit.gov.cn/" target="_blank">渝ICP备2021005571号</a></div> <!--<div class="fr"><a href="https://www.cdxwcx.com/" target="_blank">成都网站建设</a>:<a href="https://www.cdcxhl.com/" target="_blank">创新互联</a></div>--> </div> </div> <div class="link"> <div class="container"> 友情链接:: <a href="https://www.cdcxhl.com/" target="_blank">成都网站建设</a> <a href="https://www.cdcxhl.com/city/chongqing.html" target="_blank">重庆网站建设</a> <a href="">四川网站建设</a> <a href="">重庆建设网站</a> <a href="https://www.cdxwcx.com/jifang/xiyun.html" target="_blank">移动服务器托管</a> <a href="http://www.cdfuwuqi.com/" target="_blank">成都服务器托管</a> <a href="https://www.cdcxhl.cn/" target="_blank">云服务器</a> <a href="http://www.cdhuace.com/" target="_blank">广告设计制作</a> <a href="https://www.cdcxhl.com/sheji/chongqing.html" target="_blank">重庆网页设计</a> <a href="https://www.cdcxhl.com/zuo/chongqing.html" target="_blank">重庆做网站</a> <a href="https://www.cdcxhl.com/zhizuo/chongqing.html" target="_blank">重庆网站制作</a> <a href="">重庆网站建设</a> <a href="">重庆网站公司</a> <a href="">渝中网站制作</a> <a href="">重庆网站设计</a> </div> </div> </div> <div class="foot"> <ul class="public-celan"> <li> <a href="https://p.qiao.baidu.com/cps3/chatIndex?siteToken=6ce441ff9e2d6bedbdfc2a4138de449e&speedLogId=162260383240185e3_1622603832401_02407&eid=6256368&reqParam=%7B%22from%22%3A1%2C%22sessionid%22%3A%22-100%22%2C%22siteId%22%3A%2211284691%22%2C%22tid%22%3A%22-1%22%2C%22userId%22%3A%226256368%22%2C%22ttype%22%3A1%2C%22pageId%22%3A0%7D" target="_blank" class="a1 db tc"> <img src="/Public/Home/img/icon-23.png" alt="" class="db auto"> <span class="span-txt">在线咨询</span> </a> </li> <li> <a href="tel:18980820575" class="a1 db tc"> <img src="/Public/Home/img/icon-24.png" alt="" class="db auto"> <span class="span-txt">电话咨询</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="a1 db tc"> <img src="/Public/Home/img/icon-25.png" alt="" class="db auto"> <span class="span-txt">QQ咨询</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=532337155&Site=&Menu=yes" class="a1 db tc public-yuyue-up"> <img src="/Public/Home/img/icon-26.png" alt="" class="db auto"> <span class="span-txt">预约顾问</span> </a> </li> </ul> </div> <div class="customer"> <dl class="icon1"> <dt> <a href="tencent://message/?uin=1683211881&Site=&Menu=yes"> <i class="iconT"><img src="/Public/Home/img/QQ.png" alt=""></i> <p>在线咨询</p> </a> </dt> </dl> <dl class="icon2"> <dt><i><img src="/Public/Home/img/weixin.png" alt=""></i><p>微信咨询</p></dt> <dd><img src="/Public/Home/img/ewm.png"></dd> </dl> <dl class="icon3"> <dt><i><img src="/Public/Home/img/dianhua.png" alt=""></i><p>电话咨询</p></dt> <dd> <p>028-86922220(工作日)</p> <p>18980820575(7×24)</p> </dd> </dl> <dl class="icon4"> <dt class="sShow"> <a href="tencent://message/?uin=244261566&Site=&Menu=yes"> <i><img src="/Public/Home/img/dengji.png" alt=""></i><p>提交需求</p> </a> </dt> </dl> <dl class="icon5"> <dt class="gotop"> <a href="#top"> <i><img src="/Public/Home/img/top.png" alt=""></i><p>返回顶部</p> </a> </dt> </dl> </div> </body> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>