浅谈Android程序框架PhoneGap

移动开发
Android程序框架PhoneGap是本文要介绍的内容,主要是来了解PhoneGap框架的相关内容,具体内容来看本文详解。

Android程序框架PhoneGap是本文要介绍的内容,主要是来了解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目录下的

  1. 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. }    
  9. public class main extends DroidGap {  
  10.     /** Called when the activity is first created. */  
  11.     @Override  
  12.     public void onCreate(Bundle savedInstanceState) {  
  13.         super.onCreate(savedInstanceState);  
  14.         super.loadUrl("file:///android_asset/www/index.html");  
  15.     }  
  16. }   

第七步:在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>    
  12. <link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" type="text/css" 
  13. charset="utf-8"> 
  14. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  15. <script type="text/javascript" charset="utf-8" src="jquery.js"></script> 
  16. <script type="text/javascript" charset="utf-8" src="jquery.mobile-1.0a4.1.min.js"></script> 
  17. <script type="text/javascript" charset="utf-8"> 
  18. $(document).ready(function(){  
  19. //为按钮ClickMe添加点击事件  
  20. $('#ClickMe').tap(function(){alert('HelloWorld!');});  
  21. });   
  22. </script> 在<body></body>中添加  
  23. Html代码    
  24. <div data-theme="b" data-role="page" id="main">    
  25.             <div data-role="header" >    
  26.                 <h1>    
  27.                     HelloWorld     
  28.                 </h1>    
  29.             </div>    
  30.             <!-- /header -->    
  31.             <div data-role="content" >    
  32.                 <p>    
  33.                     这是我***个PhoneGap+JqueryMobile结合的android程序     
  34.                 </p>    
  35.                 <p>                        
  36.                     <a href="#" id="ClickMe" data-role="button" data-inline="true" 点我</a>    
  37.                 </p>    
  38.             </div>    
  39.             <!-- /content -->    
  40.             <div data-role="footer" >    
  41.                 <h4>    
  42.                     这个是页脚     
  43.                 </h4>    
  44.             </div>    
  45.             <!-- /header -->    
  46.         </div>    
  47. <div data-theme="b" data-role="page" id="main"> 
  48. <div data-role="header" > 
  49. <h1> 
  50. HelloWorld  
  51. </h1> 
  52. </div> 
  53. <!-- /header --> 
  54. <div data-role="content" > 
  55. <p> 

这是我***个PhoneGap+JqueryMobile结合的android程序

  1. </p> 
  2. <p> 
  3. <a href="#" id="ClickMe" data-role="button" data-inline="true" 点我</a> 
  4. </p> 
  5. </div> 
  6. <!-- /content --> 
  7. <div data-role="footer" > 
  8. <h4> 

这个是页脚

  1. </h4> 
  2. </div> 
  3. <!-- /header --> 
  4. </div>  

第七步:Run As Android Application

运行效果图如下

浅谈Android程序框架PhoneGap 

浅谈Android程序框架PhoneGap

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

小结:浅谈Android程序框架PhoneGap的内容介绍完了,希望通过本文的学习能对你有所帮助!

责任编辑:zhaolei 来源: 互联网
相关推荐

2011-09-02 13:30:43

Android SDKPhoneGap

2011-07-19 13:26:50

iPhone PhoneGap 框架

2011-09-02 13:51:00

PhoneGap框架HTML5

2011-09-05 10:27:02

Sencha Touc手机应用Android

2014-07-21 17:48:09

PhoneGapCordovaHtml5

2011-09-05 14:42:01

PhoneGap框架

2012-03-07 15:07:54

PhoneGapAndroid源码示例

2010-10-09 15:01:27

PhoneGapiPhoneAndroid

2011-12-23 10:02:37

PhoneGapAndroid插件

2011-09-14 09:20:03

PhonegapAndroid平台

2011-12-21 21:34:50

PhoneGapiOSAndroid

2012-10-09 11:02:55

IBMdw

2011-09-01 10:01:35

PhoneGap应用程序GoodDay

2011-12-30 15:11:36

Adobe视频PhoneGap

2011-08-31 15:15:20

PhoneGap

2011-07-08 17:57:37

iPhone CoreData 数据库

2011-07-01 15:28:26

PhoneGap代码示例

2011-10-11 10:06:12

PhoneGap插件

2010-02-05 18:04:36

Android程序框架

2011-09-05 15:09:06

Android平台Phonegap
点赞
收藏

51CTO技术栈公众号