经过了一段时间的学习，初步了解了该如何使用jQuery Mobile和 Phone Gap来开发一个Android应用程序，也想把这些东西介绍给大家。 
1、 软件准备 
要进行android app的开发，当然需要准备Java, eclipse和安装Android SDK，这个部分网络上面很多方法，搜索“安装Android SDK”即可找到很多答案，所以就不再这里浪费口水。

2、 知识准备 
（1）了解jQuery Mobile这个js框架，知道怎么组织一个简单的页面。 
官方网站：http://jquerymobile.com/（记得下载一个js库文件） 
（2）了解Phone Gap，怎么利用Phone Gap在后面的内容也有介绍。 
官方网站：http://phonegap.com/（同样记得下载相关文件） 
（3）能够使用jQuery进行开发。

3、 组织工程目录 
（1）打开Eclipse，建立一个android应用工程，见下图

（2）解压phonegap的压缩包，可以看到它针对不懂的应用类型进行了不同的分类，有android、IOS、Windows Phone等移动终端系统，打开其中的android文件夹。 
（3）在刚才新建的工程的根目录下新建一个名为libs的文件夹，找到（1）中android文件夹中的jar包粘贴到刚才的libs文件夹下。 
（4）将（1）中android文件夹下的xml文件夹整个粘贴到工程更目录下的res文件夹下。 
（5）在工程的assets文件夹下新建文件夹www，这个文件夹其实可以看作是phonegap的工程目录，用来放js或者html文件。 
（6）在文件夹www下面新建一个js文件夹，用来放置js和css文件；新建文件夹pages用来放置html文件。（新建html和引入js库可以参照图操作） 
工程目录如下图：

4　Conding 
（１）首先打开src下的Java类，修改继承类为DroidGap（如果找不到这个类，估计是忘记将PhoneGap的jar包加入工程的Libraries），并且修改代码，如下图

（2）打开index.html文件，进行编辑，记得开头要用html5的doctype声明。我在里面加入两个简单的jQuery Mobile的页面，并且调用了简单的Phone Gap的API： 
http://docs.phonegap.com/en/1.3.0/phonegap_notification_notification.md.html#notification.vibrate 
代码如下：

  1. <!Doctype html>
  2. <html>
  3. <head>
  4. <title>Phone Gap Introduce</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <link rel="stylesheet" type="text/css" href="../JS/jquery.mobile-1.0rc1.min.css"/>
  7. <script type="text/javascript" src="../JS/jquery_1_6_4.js"></script>
  8. <script type="text/javascript" src="../JS/phonegap-1.2.0.js"></script>
  9. <script type="text/javascript" src="../JS/jquery.mobile-1.0rc1.js"></script>
  10. <script type="text/javascript">
  11. $('#PageOne').live('pageinit', function(event){
  12. var showTip = function(){
  13. navigator.notification.alert("this is a message from page one!", null, "Message", "Close");
  14. $(this).die("click");
  15. };
  16. var confirm = function(){
  17. navigator.notification.confirm(
  18. 'You are the winner!',  // message
  19. null,                   // callback to invoke with index of button pressed
  20. 'Game Over',            // title
  21. 'Restart,Exit'          // buttonLabels
  22. );
  23. $(this).die("click");
  24. };
  25. var redirectPage = function(){
  26. $.mobile.changePage("#PageTwo");
  27. $(this).die("click");
  28. };
  29. $(event.target).find('#alert').bind('click', showTip);
  30. $(event.target).find('#confirm').bind('click', confirm);
  31. $(event.target).find('#changePage').bind('click', redirectPage);
  32. });
  33. $('#PageTwo').live('pageshow', function(event){
  34. var showTip = function(){
  35. navigator.notification.alert("this is a message from page two!", null, "Message", "Close");
  36. $(this).die("click");
  37. };
  38. var confirm = function(){
  39. navigator.notification.confirm(
  40. 'You are the losser!',  // message
  41. null,                   // callback to invoke with index of button pressed
  42. 'Game Over',            // title
  43. 'Restart,Exit'          // buttonLabels
  44. );
  45. $(this).die("click");
  46. };
  47. $(event.target).find('#alert').bind('click', showTip);
  48. $(event.target).find('#confirm').bind('click', confirm);
  49. });
  50. </script>
  51. </head>
  52. <body>
  53. <div id="PageOne" data-role="page">
  54. <div data-role="header" data-backbtn="false">
  55. <h1>Phone Gap One</h1>
  56. </div>
  57. <div data-role="content">
  58. <div>
  59. <a href="#" id="alert" data-role="button" data-theme="b">Alert</a>
  60. </div>
  61. <div>
  62. <a href="#" id="confirm" data-role="button" data-theme="b">Confirm</a>
  63. </div>
  64. <div>
  65. <a href="#" id="changePage" data-role="button" data-theme="b">Change Page</a>
  66. </div>
  67. </div>
  68. <div data-role="footer">
  69. <div data-role="navbar">
  70. <ul>
  71. <li><a href="#PageOne">Page One</a></li>
  72. <li><a href="#PageTwo">Page Two</a></li>
  73. </ul>
  74. </div>
  75. </div>
  76. </div>
  77. <div id="PageTwo" data-role="page">
  78. <div data-role="header" data-backbtn="true">
  79. <h1>Phone Gap Two</h1>
  80. <a data-role="button" data-rel="back">Previous</a>
  81. </div>
  82. <div data-role="content">
  83. <div>
  84. <a href="#" id="alert" data-role="button" data-theme="b">Alert</a>
  85. </div>
  86. <div>
  87. <a href="#" id="confirm" data-role="button" data-theme="b">Confirm</a>
  88. </div>
  89. <div>
  90. <a href="file:///android_asset/www/Pages/pageThree.html" data-role="button" data-theme="b">Page Three</a>
  91. </div>
  92. </div>
  93. <div data-role="footer">
  94. <div data-role="navbar">
  95. <ul>
  96. <li><a href="#PageOne">Page One</a></li>
  97. <li><a href="#PageTwo">Page Two</a></li>
  98. </ul>
  99. </div>
  100. </div>
  101. </div>
  102. </body>
  103. </html>

要特别注意的是引入js库的顺序，参照下图：

 
即：自己的包和phonegap的js包要放在中间，不然会出一些错误，我开发的时候是遇见过这种状况的，而且jQuery Mobile的官方也是这么要求的。

再打开pageThree.html，加入如下代码：

  1. <div id="PageThree" data-role="page">
  2. <div data-role="header" data-backbtn="true">
  3. <h1>Phone Gap Three</h1>
  4. <a data-role="button" data-rel="back">Previous</a>
  5. </div>
  6. <div data-role="content">
  7. <div>
  8. <a href="#" id="alert" data-role="button" data-theme="b">Alert</a>
  9. </div>
  10. <div>
  11. <a href="#" id="confirm" data-role="button" data-theme="b">Confirm</a>
  12. </div>
  13. </div>
  14. <div data-role="footer">
  15. <div data-role="navbar">
  16. <ul>
  17. <li><a href="#PageOne">Page One</a></li>
  18. <li><a href="#PageTwo">Page Two</a></li>
  19. </ul>
  20. </div>
  21. </div>
  22. </div>

选择工程，右键run as > android application，你应该能够看到下图：

到这里工程的开发已经完了，希望有兴趣的可以具体操作一遍，然后可以修修改改其中的一些东西，这样才能体会到这个开发过程是怎么一回事，光看和复制粘贴是很容易忘记怎么去开发的。

在我进行了一段时间的开发之后，我认为phonegap的好处在于： 
（1）一个应用能够很容易就移植到其他的平台，不需要同样的逻辑写多种语言版本； 
（2）容易上手，学习了html5和js既可以进行开发； 
（3）如果学会了如何开发phonegap插件，那么android能够做的事情，phonegap都能够帮你完成，其他平台开发也如此。（如何开发插件已经不是这篇blog的内容了） 
同时我感觉phonegap让我最不爽的一点就是调试太麻烦了，要在模拟器上才能看到效果到底对不对。

同时附上开发简易顺序： 
（1）把phonegap的jar包和xml文件放到工程下的正确目录； 
（2）修改src下的android默认类，参照4 （1）； 
（3）在aseets下面建立工程的根目录www，并在其中放入js、html、image、css等普通的web文件； 
（4）只需要在index页面加入js包和css文件，其他页面只需要组织成一个简单的jQuery Mobile页面。 
（5）调用一些特殊的api时，需要注意申请android许可！（百度一下就可以轻松解决）

最后一个压缩包是工程压缩包。

  • Introduce.7z (595.5 KB)
  • 描述: 工程压缩包
  • 下载次数: 1205

使用jQuery Mobile和Phone Gap开发Android应用程序的更多相关文章

  1. 使用jQuery Mobile和Phone Gap开发Android应用程序（转）

    经过了一段时间的学习,初步了解了该如何使用jQuery Mobile和 Phone Gap来开发一个Android应用程序,也想把这些东西介绍给大家. 1. 软件准备 要进行android app的开 ...

  2. 使用jQuery Mobile + PhoneGap 开发Android应用程序(转)

    使用jQuery Mobile + PhoneGap 开发Android应用程序(转) 一.简介 jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅给 ...

  3. Unity开发Android应用程序：调用安卓应用程序功能

    开发环境: Eclipse3.4 + adt12 + jdk6 + AndroidSDK2.2 Unity3.4 + windows7 测试设备: HTC Desire HD 本文要涉及到的几个重点问 ...

  4. 用 Eclipse 开发 Android 应用程序

    转自:http://www.apkbus.com/android-13828-1-1.html 开始之前 本教程介绍如何在 Eclipse 环境中进行 Android 应用程序开发,包括两个示例应用程 ...

  5. C#使用Xamarin开发Android应用程序 -- 系列文章

    Xamarin开发Android应用程序 利用Xamaria构建Android应用-公交发车信息屏 Xamarin版的C# SVG路径解析器 C#使用Xamarin开发可移植移动应用(1.入门与Xam ...

  6. Android+Jquery Mobile学习系列(1)-开发环境

    开发环境是老生常谈的问题了,网上有很多关于Android环境安装的文章,我这里也就简单说明一下,不做过多分析. 想了解详细的安装说明,可以参见[百度经验] Java环境安装直接跳过,说一下Androi ...

  7. 在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境

    移动设备应用开发有多难,只要学会HTML5+Javascript就可以.用Dreamweaver5.5+PhoneGap+Jquery Mobile搭建移动开发环境,轻轻松松开发你自己的应用.让你用普 ...

  8. 史上最简单的个人移动APP开发入门--jQuery Mobile版跨平台APP开发

    书是人类进步的阶梯. ——高尔基 习大大要求新新人类要有中国梦,鼓励大学生们一毕业就创业.那最好的创业途径是什么呢?就是APP.<构建跨平台APP-jQuery Mobile移动应用实战> ...

  9. jQuery Mobile中文手册：开发入门

    jQuery Mobile 以“Write Less, Do More”作为目标,为所有的主流移动操作系统平台提供了高度统一的 UI 框架:jQuery 的移动框架可以让你为所有流行的移动平台设计一个 ...

随机推荐

  1. SDE+ORACLE优化配置

    原文 SDE+ORACLE优化配置 SDE的性能取决于: 首先操作系统的性能:其次是Oracle的性能,再次是SDE的性能. 第一:操作系统,无非是内存.CPU.带宽等. 可以有待提高的地方:第一.硬 ...

  2. spring初探1

    spring初探1 关于新建对象,对象依赖的三种方式比较 场景 某个交易的业务组建拆分,为原先的功能模块新写了一个业务组件 使用new. 修改上层代码的对象生成部分( 如果不是面向接口编程,简直就是灾 ...

  3. 传统企业，"哀兵必胜"的想法要不得

    [文/ 任英杰]同事在内网上发了一篇文章『哀兵必胜』,思量数日,作文应对.文中表达的积极精神让人敬佩,但背后似乎隐含着一股莫名的“情绪”.对行业大格局的基本看法会影响公司转型的成败,觉得还是有必要讨论 ...

  4. 机器学习&数据挖掘笔记（常见面试之机器学习算法思想简单梳理）

    机器学习&数据挖掘笔记_16(常见面试之机器学习算法思想简单梳理) 作者:tornadomeet 出处:http://www.cnblogs.com/tornadomeet 前言: 找工作时( ...

  5. 内存溢出（heap corruption detected:）

    今天又遇到了上次出现的bug,然后百度了一下,想起来这是内存溢出的毛病,故记录下来! 出现的问题就是这样: heap corruption detected: after normal block(# ...

  6. Android学习笔记-Dialog详解

    1.对话框的使用 1.1AlertDialog的显示 简单对话框以及监听的设置:重点掌握三个按钮(也就是三上单词): PositiveButton(确认按钮);NeutralButton(忽略按钮) ...

  7. SSO单点登录在web上的关键点 cookie跨域

    概述 其实WEB单点登录的原理挺简单的,抛开那些复杂的概念,简单来讲讲如何实现一个最基本的单点登录 首先需要有两个程序 例如:http://www.site-a.com 我们简称A http://ww ...

  8. linux命令 screen的简单使用

    在远程命令行下某些长时间的操作,一旦网络出现故障,后果可能会很严重,在这种情况下可以使用screen命令来解决.screen可以创建一个session,在不小心断开以后还可以继续恢复session保存 ...

  9. 修改docker的默认存储位置

    service docker stop mv /var/lib/docker /mnt/docker ln -s /mnt/docker /var/lib/docker ls /var/lib/doc ...

  10. 如何开启php报错

    今天碰到一个很二的问题,安装了php网站之后,发现nginx一直无法解析到index.php文件,显示为空白,从后台的日志来看是500错误,但是同目录下的phpinfo.php却可以正常解析.想来应该 ...