Scripts 学盟

标题: 初探Android程序框架PhoneGap [打印本页]
作者: 那个谁    时间: 2011-8-26 14:26:36     标题: 初探Android程序框架PhoneGap

在此我表示无知！原来可以用JS

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. 1.public class main extends DroidGap {   
  2. 2.    /** Called when the activity is first created. */  
  3. 3.    @Override  
  4. 4.    public void onCreate(Bundle savedInstanceState) {   
  5. 5.        super.onCreate(savedInstanceState);   
  6. 6.        super.loadUrl("file:///android_asset/www/index.html");   
  7. 7.    }   
  8. 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. 1.<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" type="text/css"  
  2. 2.            charset="utf-8">  
  3. 3.        <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>  
  4. 4.        <script type="text/javascript" charset="utf-8" src="jquery.js"></script>           
  5. 5.        <script type="text/javascript" charset="utf-8" src="jquery.mobile-1.0a4.1.min.js"></script>  
  6. 6.        <script type="text/javascript" charset="utf-8">  
  7. 7.            $(document).ready(function(){   
  8. 8.                //为按钮ClickMe添加点击事件   
  9. 9.                $('#ClickMe').tap(function(){alert('HelloWorld!');});   
  10. 10.            });   
  11. 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>中添加



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

  34.                         <div data-role="content" >
  35.                                 <p>
  36.                                         这是我第一个PhoneGap+JqueryMobile结合的android程序
  37.                                 </p>
  38.                                 <p>                                       
  39.                                         <a href="#" id="ClickMe" data-role="button" data-inline="true" 点我</a>
  40.                                 </p>
  41.                         </div>
  42.                         <!-- /content -->

  44.                         <div data-role="footer" >
  45.                                 <h4>
  46.                                         这个是页脚
  47.                                 </h4>
  48.                         </div>
  49.                         <!-- /header -->
  50.                 </div>
复制代码
第七步:Run As Android Application

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



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



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


[attach]源码[/attach]
PS：

PhoneGap http://www.phonegap.com/

jquerymobile  http://jquerymobile.com/


附件: HelloWorld.zip (2011-8-26 14:26:05, 577.34 KB) / 下载次数 0
http://www.iscripts.org/forum.php?mod=attachment&aid=OTUxfDBlNGUzMDc4fDE3MzQ1NzI4MTZ8MHww
作者: momo    时间: 2011-8-26 15:25:44





欢迎光临 Scripts 学盟 (http://www.iscripts.org/) Powered by Discuz! X2