浅谈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目录下的

images,jquery.mobile-1.0a4.1.min.css,jquery.mobile-1.0a4.1.min.js;Jquery 
  • 1.

目录下的jqueryjquery-1.5.1.min.js复制到www文件夹.

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

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

Java代码 

public class main extends DroidGap {     
    /** Called when the activity is first created. */    
    @Override    
    public void onCreate(Bundle savedInstanceState) {     
        super.onCreate(savedInstanceState);     
        super.loadUrl("file:///android_asset/www/index.html");     
    }     
}    
public class main extends DroidGap {  
    /** Called when the activity is first created. */  
    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        super.loadUrl("file:///android_asset/www/index.html");  
    }  
}   
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.

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

输入内容

Html代码 

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

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

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

这个是页脚

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

第七步: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

2011-09-05 14:42:01

PhoneGap框架

2014-07-21 17:48:09

PhoneGapCordovaHtml5

2012-03-07 15:07:54

PhoneGapAndroid源码示例

2010-10-09 15:01:27

PhoneGapiPhoneAndroid

2011-09-01 10:01:35

PhoneGap应用程序GoodDay

2012-10-09 11:02:55

IBMdw

2011-09-14 09:20:03

PhonegapAndroid平台

2011-12-21 21:34:50

PhoneGapiOSAndroid

2011-12-23 10:02:37

PhoneGapAndroid插件

2011-08-31 15:15:20

PhoneGap

2011-12-30 15:11:36

Adobe视频PhoneGap

2011-10-11 10:06:12

PhoneGap插件

2011-07-08 17:57:37

iPhone CoreData 数据库

2011-07-01 15:28:26

PhoneGap代码示例

2012-05-17 08:29:54

PhoneGap误区

2012-03-07 11:17:19

AndroidPhoneGap插件
点赞
收藏

51CTO技术栈公众号