jqueryMobile+phoneGap

转载 2012年03月22日 15:07:17
经过了一段时间的学习,初步了解了该如何使用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
(1)首先打开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
代码如下:
Html代码 复制代码 收藏代码
  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.  
  13.                 var showTip = function(){ 
  14.                     navigator.notification.alert("this is a message from page one!", null, "Message", "Close"); 
  15.                     $(this).die("click"); 
  16.                 }; 
  17.                  
  18.                 var confirm = function(){ 
  19.                     navigator.notification.confirm( 
  20.                             'You are the winner!',  // message 
  21.                             null,                   // callback to invoke with index of button pressed 
  22.                             'Game Over',            // title 
  23.                             'Restart,Exit'          // buttonLabels 
  24.                         ); 
  25.                     $(this).die("click"); 
  26.                 }; 
  27.                  
  28.                 var redirectPage = function(){ 
  29.                     $.mobile.changePage("#PageTwo"); 
  30.                     $(this).die("click"); 
  31.                 }; 
  32.                  
  33.                 $(event.target).find('#alert').bind('click', showTip); 
  34.                 $(event.target).find('#confirm').bind('click', confirm); 
  35.                 $(event.target).find('#changePage').bind('click', redirectPage); 
  36.             }); 
  37.              
  38.             $('#PageTwo').live('pageshow', function(event){ 
  39.                 var showTip = function(){ 
  40.                     navigator.notification.alert("this is a message from page two!", null, "Message", "Close"); 
  41.                     $(this).die("click"); 
  42.                 }; 
  43.                  
  44.                 var confirm = function(){ 
  45.                     navigator.notification.confirm( 
  46.                             'You are the losser!',  // message 
  47.                             null,                   // callback to invoke with index of button pressed 
  48.                             'Game Over',            // title 
  49.                             'Restart,Exit'          // buttonLabels 
  50.                         ); 
  51.                     $(this).die("click"); 
  52.                 }; 
  53.                 $(event.target).find('#alert').bind('click', showTip); 
  54.                 $(event.target).find('#confirm').bind('click', confirm); 
  55.             }); 
  56.         </script> 
  57.     </head> 
  58.     <body> 
  59.         <div id="PageOne" data-role="page"> 
  60.             <div data-role="header" data-backbtn="false"> 
  61.                 <h1>Phone Gap One</h1> 
  62.             </div> 
  63.             <div data-role="content"> 
  64.                 <div> 
  65.                     <a href="#" id="alert" data-role="button" data-theme="b">Alert</a> 
  66.                 </div> 
  67.                 <div> 
  68.                     <a href="#" id="confirm" data-role="button" data-theme="b">Confirm</a> 
  69.                 </div> 
  70.                 <div> 
  71.                     <a href="#" id="changePage" data-role="button" data-theme="b">Change Page</a> 
  72.                 </div> 
  73.             </div> 
  74.             <div data-role="footer"> 
  75.                 <div data-role="navbar"> 
  76.                     <ul> 
  77.                         <li><a href="#PageOne">Page One</a></li> 
  78.                         <li><a href="#PageTwo">Page Two</a></li> 
  79.                     </ul> 
  80.                 </div> 
  81.             </div> 
  82.         </div> 
  83.         <div id="PageTwo" data-role="page"> 
  84.             <div data-role="header" data-backbtn="true"> 
  85.                 <h1>Phone Gap Two</h1> 
  86.                 <a data-role="button" data-rel="back">Previous</a> 
  87.             </div> 
  88.             <div data-role="content"> 
  89.                 <div> 
  90.                     <a href="#" id="alert" data-role="button" data-theme="b">Alert</a> 
  91.                 </div> 
  92.                 <div> 
  93.                     <a href="#" id="confirm" data-role="button" data-theme="b">Confirm</a> 
  94.                 </div> 
  95.                 <div> 
  96.                     <a href="file:///android_asset/www/Pages/pageThree.html" data-role="button" data-theme="b">Page Three</a> 
  97.                 </div> 
  98.             </div> 
  99.             <div data-role="footer"> 
  100.                 <div data-role="navbar"> 
  101.                     <ul> 
  102.                         <li><a href="#PageOne">Page One</a></li> 
  103.                         <li><a href="#PageTwo">Page Two</a></li> 
  104.                     </ul> 
  105.                 </div> 
  106.             </div> 
  107.         </div> 
  108.     </body> 
  109. </html> 

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


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

再打开pageThree.html,加入如下代码:
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总结

设的时候,用到了Jquery Mobile,前前后后,接触了一个月,大体上知道了它的用法,确实很强大,但是一些设计理念,我开始的时候还是不理解,后来,随着不断解决各种BUG,慢慢地懂了一些。下面是一些...
  • smeyou
  • smeyou
  • 2012年11月19日 16:45
  • 11001

jQuery Mobile入门教程

简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的、可跨设备的Web应用程序。我们将后续的介绍中向大家介绍大量的代码及实例。       jQuery一直以来都是非常流行的富客户端...

jquery mobile实例---实例、登录与注册的实现、简介美观

设计要点: 一.利用页头栏标识用户当前状态,可以在页头放置一个返回按钮 二.利用开关组件控制是否保存用户信息 三.前进的过渡效果采用:向左自然滑动,返回过渡采用:淡入淡出,用户体验更自然 四....

Jquery mobile表单提交

一、页面上左右滑动切换页面动作: $(function() { $("body").bind('swiperight', function() {   $.mobile.changePage...

移动应用实战(移动OA)之二_jQuery Mobile简介

移动应用实战(移动OA)之二_jQuery Mobile简介
  • hanhf
  • hanhf
  • 2016年09月30日 13:57
  • 816

利用JQuery Mobile实现切换效果

效果图: 按左右方向和鼠标滑动键即可切换至第二页 效果图:
  • hi_dzj
  • hi_dzj
  • 2013年07月16日 10:44
  • 6000

jQuery Mobile学习笔记(七)——主题与打包

这一章介绍JQM主题和JQM APP的打包:主题JQM允许开发者通过调整主题和CSS来定制整套用户界面。JQM的每一个样式都能用CSS来覆盖。主题是一组配色方案,包括 文字颜色 背景颜色和渐变 字体 ...

开发web app并且使用phonegap下载及打开附件

在开发web app并且使用phonegap的情况下,附件下载着实是一件令人头疼的事,什么window.open或者window.location.href在webview中都不起作用,网上查了许久,...

phonegap+jqueryMobile例子

  • 2013年06月28日 16:42
  • 1.88MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jqueryMobile+phoneGap
举报原因:
原因补充:

(最多只允许输入30个字)