分享

初探Android程序框架PhoneGap - 耗子的博客 - ITeye技术网站

 software1 2011-05-16

初探Android程序框架PhoneGap

文章分类:移动开发

phonegap是由温哥华的一家小公司研发的多平台的移动开发框架,支持流行的大多数移动设备(iPhone,Android ,BlackBerry,Symbian,Palm,Window Phone).目前phonegap获得Apple,IBM,NOKIA,palm等众多公司的支持.

phonegap的优点:
1.兼容性,完全做到了written once,run everywhere.
2.标准化.phonegap使用W3C标准,可用html5+css3+JqueryMobile快速开发各平台的app
3.开发成本低
4.完全自由免费.phonegap采用MIT,BSD许可证.

 

phonegap的缺点:

1.性能有待加强,运行速度慢,UI反应延时

2.没有中文文档,例子较少

 

-------------------------------------------非华丽的分割线-------------------------------------------------------------

HelloWorld是IT界永恒不变的话题.不知从何时起,每一门语音,每一项新技术的第一个demo都是HelloWorld.

下面笔者将采用phonegap+jquerymobile开发一个phonegap的Helloworld.

 

第一步:下载phonegap,jquerymobile,jquery1.5.1解压待用.(文章末尾附有官网链接)

 

第二步:新建一个android项目HelloWorld,在assets目录下新建文件夹www,这个文件夹将用来放置html,JS,CSS等文件.在根目录下新建libs文件夹,用来放置phonegap的开发包.

 

第四步: 将刚刚解压出来的phonegap/android下的phonegap.0.9.5.js;jquerymobile目录下的images,jquery.mobile-1.0a4.1.min.css,jquery.mobile-1.0a4.1.min.js;Jquery目录下的jqueryjquery-1.5.1.min.js复制到www文件夹.

 

第五步:复制phonegap/android下的phonegap.0.9.5.jar到libs文件夹,并在项目的属性中将其加入到项目

 

第六步:修改默认的Activity文件main.java

 

Java代码 复制代码 收藏代码
  1. public class main extends DroidGap {   
  2.     /** Called when the activity is first created. */  
  3.     @Override  
  4.     public void onCreate(Bundle savedInstanceState) {   
  5.         super.onCreate(savedInstanceState);   
  6.         super.loadUrl("file:///android_asset/www/index.html");   
  7.     }   
  8. }  
 

 第七步:在www文件夹中新建index.html文件.

输入内容

 

Html代码 复制代码 收藏代码
  1. <link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" type="text/css"  
  2.             charset="utf-8">  
  3.         <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>  
  4.         <script type="text/javascript" charset="utf-8" src="jquery.js"></script>           
  5.         <script type="text/javascript" charset="utf-8" src="jquery.mobile-1.0a4.1.min.js"></script>  
  6.         <script type="text/javascript" charset="utf-8">  
  7.             $(document).ready(function(){   
  8.                 //为按钮ClickMe添加点击事件   
  9.                 $('#ClickMe').tap(function(){alert('HelloWorld!');});   
  10.             });    
  11.         </script>  

  在<body></body>中添加

 

 

Html代码 复制代码 收藏代码
  1. <div data-theme="b" data-role="page" id="main">  
  2.             <div data-role="header" >  
  3.                 <h1>  
  4.                     HelloWorld   
  5.                 </h1>  
  6.             </div>  
  7.             <!-- /header -->  
  8.   
  9.             <div data-role="content" >  
  10.                 <p>  
  11.                     这是我第一个PhoneGap+JqueryMobile结合的android程序   
  12.                 </p>  
  13.                 <p>                      
  14.                     <a href="#" id="ClickMe" data-role="button" data-inline="true" 点我</a>  
  15.                 </p>  
  16.             </div>  
  17.             <!-- /content -->  
  18.   
  19.             <div data-role="footer" >  
  20.                 <h4>  
  21.                     这个是页脚   
  22.                 </h4>  
  23.             </div>  
  24.             <!-- /header -->  
  25.         </div>  

 

第七步:Run As Android Application

运行效果图如下

 



 

OK,至此我们第一个phonegap+jquerymobile的android程序已经完成.在模拟器中运行性能很差,真机运行的延时是可以接受的.

 

详细代码请参考附件,文章提到的jar,JS,CSS等文件可从附件中复制或到对应官网下载最新版本

 

很少写东西,如有错漏请看官指正.

 

PS:

PhoneGap http://www./

jquerymobile  http:///

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多