经过了一段时间的学习，初步了解了该如何使用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许可！（百度一下就可以轻松解决）

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

使用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. php生成缩略图

    <?php /** * 生成缩略图函数(支持图片格式:gif.jpeg.png和bmp) * @author ruxing.li * @param string $src 源图片路径 * @pa ...

  2. Android 常用系统控件

    1. 日期选择器 DatePickerDialog 2. 时间选择器 TimePickerDialog 3. 单选按钮 RadioButton 4. 多选按钮 CheckBox 5. 下拉列表 Spi ...

  3. Typefaces and Personalities (字体与性格)

    Boring afternoon, searching something fun. See this article What Your Favorite Font Says About You , ...

  4. 测试gcc的优化选项

    一.测试准备及原理 测试代码: static void wait(volatile unsigned long dly) { ; dly--); } int main(void) { unsigned ...

  5. bzoj2395: [Balkan 2011]Timeismoney

    Description      有n个城市(编号从0..n-1),m条公路(双向的),从中选择n-1条边,使得任意的两个城市能够连通,一条边需要的c的费用和t的时间,定义一个方案的权值v=n-1条边 ...

  6. Hibernate 配置详解(5)

    9) hibernate.batch_fetch_style: 该配置是hibernate4.2.0新添加的,使用这个设置可以配置hibernate在做batch-fetch的时候,生成SQL的策略. ...

  7. bzoj3709

    首先明显会想到贪心对于那些怪物回血比耗血多的,我们显然应该先打耗血少的那些回血比耗血多的怎么办呢?由于不管怎么打(假设体力负数了还能打),最终体力是一定,我们从最终体力倒推,相当于先吃药掉血,打怪物回 ...

  8. COJ 2105 submatrix

    submatrix 难度级别: A: 编程语言:不限:运行时间限制:2000ms: 运行空间限制:131072KB: 代码长度限制:102400B 试题描述   小A有一个N×M的矩阵,矩阵中1~N* ...

  9. 【最小生成树】Codeforces 707B Bakery

    题目链接: http://codeforces.com/problemset/problem/707/B 题目大意: 给你N个点M条无向边,其中有K个面粉站,现在一个人要在不是面粉站的点上开店,问到面 ...

  10. DateDiff 函数，用生日获得年龄

    一:截图 二:代码 using System; using System.Collections.Generic; using System.ComponentModel; using System. ...