`

使用jqueryMobile + phoneGap 开发移动端应用

 
阅读更多

http://blog.csdn.net/avenleft/article/details/7383307
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
代码如下：

Html代码 复制代码 收藏代码
  1. <!Doctype html> 
  2. <html> 
  3.     <head> 
  4.         <title>Phone Gap Introduce</title> 
  5.         <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/> 
  6.         <linkrel="stylesheet"type="text/css"href="../JS/jquery.mobile-1.0rc1.min.css"/> 
  7.         <scripttype="text/javascript"src="../JS/jquery_1_6_4.js"></script> 
  8.         <scripttype="text/javascript"src="../JS/phonegap-1.2.0.js"></script> 
  9.         <scripttype="text/javascript"src="../JS/jquery.mobile-1.0rc1.js"></script> 
  10.         <scripttype="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.         <divid="PageOne"data-role="page"> 
  60.             <divdata-role="header"data-backbtn="false"> 
  61.                 <h1>Phone Gap One</h1> 
  62.             </div> 
  63.             <divdata-role="content"> 
  64.                 <div> 
  65.                     <ahref="#"id="alert"data-role="button"data-theme="b">Alert</a> 
  66.                 </div> 
  67.                 <div> 
  68.                     <ahref="#"id="confirm"data-role="button"data-theme="b">Confirm</a> 
  69.                 </div> 
  70.                 <div> 
  71.                     <ahref="#"id="changePage"data-role="button"data-theme="b">Change Page</a> 
  72.                 </div> 
  73.             </div> 
  74.             <divdata-role="footer"> 
  75.                 <divdata-role="navbar"> 
  76.                     <ul> 
  77.                         <li><ahref="#PageOne">Page One</a></li> 
  78.                         <li><ahref="#PageTwo">Page Two</a></li> 
  79.                     </ul> 
  80.                 </div> 
  81.             </div> 
  82.         </div> 
  83.         <divid="PageTwo"data-role="page"> 
  84.             <divdata-role="header"data-backbtn="true"> 
  85.                 <h1>Phone Gap Two</h1> 
  86.                 <adata-role="button"data-rel="back">Previous</a> 
  87.             </div> 
  88.             <divdata-role="content"> 
  89.                 <div> 
  90.                     <ahref="#"id="alert"data-role="button"data-theme="b">Alert</a> 
  91.                 </div> 
  92.                 <div> 
  93.                     <ahref="#"id="confirm"data-role="button"data-theme="b">Confirm</a> 
  94.                 </div> 
  95.                 <div> 
  96.                     <ahref="file:///android_asset/www/Pages/pageThree.html"data-role="button"data-theme="b">Page Three</a> 
  97.                 </div> 
  98.             </div> 
  99.             <divdata-role="footer"> 
  100.                 <divdata-role="navbar"> 
  101.                     <ul> 
  102.                         <li><ahref="#PageOne">Page One</a></li> 
  103.                         <li><ahref="#PageTwo">Page Two</a></li> 
  104.                     </ul> 
  105.                 </div> 
  106.             </div> 
  107.         </div> 
  108.     </body> 
  109. </html> 
[html] view plaincopyprint?
  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>  
<!Doctype html>
<html>
	<head>
		<title>Phone Gap Introduce</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<link rel="stylesheet" type="text/css" href="../JS/jquery.mobile-1.0rc1.min.css"/>
		<script type="text/javascript" src="../JS/jquery_1_6_4.js"></script>
		<script type="text/javascript" src="../JS/phonegap-1.2.0.js"></script>
		<script type="text/javascript" src="../JS/jquery.mobile-1.0rc1.js"></script>
		<script type="text/javascript">
			$('#PageOne').live('pageinit', function(event){

				var showTip = function(){
					navigator.notification.alert("this is a message from page one!", null, "Message", "Close");
					$(this).die("click");
				};
				
				var confirm = function(){
					navigator.notification.confirm(
					        'You are the winner!',  // message
					        null,              		// callback to invoke with index of button pressed
					        'Game Over',            // title
					        'Restart,Exit'          // buttonLabels
					    );
					$(this).die("click");
				};
				
				var redirectPage = function(){
					$.mobile.changePage("#PageTwo");
					$(this).die("click");
				};
				
				$(event.target).find('#alert').bind('click', showTip);
				$(event.target).find('#confirm').bind('click', confirm);
				$(event.target).find('#changePage').bind('click', redirectPage);
			});
			
			$('#PageTwo').live('pageshow', function(event){
				var showTip = function(){
					navigator.notification.alert("this is a message from page two!", null, "Message", "Close");
					$(this).die("click");
				};
				
				var confirm = function(){
					navigator.notification.confirm(
					        'You are the losser!',  // message
					        null,              		// callback to invoke with index of button pressed
					        'Game Over',            // title
					        'Restart,Exit'          // buttonLabels
					    );
					$(this).die("click");
				};
				$(event.target).find('#alert').bind('click', showTip);
				$(event.target).find('#confirm').bind('click', confirm);
			});
		</script>
	</head>
	<body>
		<div id="PageOne" data-role="page">
			<div data-role="header" data-backbtn="false">
				<h1>Phone Gap One</h1>
			</div>
			<div data-role="content">
				<div>
					<a href="#" id="alert" data-role="button" data-theme="b">Alert</a>
				</div>
				<div>
					<a href="#" id="confirm" data-role="button" data-theme="b">Confirm</a>
				</div>
				<div>
					<a href="#" id="changePage" data-role="button" data-theme="b">Change Page</a>
				</div>
			</div>
			<div data-role="footer">
				<div data-role="navbar">
					<ul>
						<li><a href="#PageOne">Page One</a></li>
						<li><a href="#PageTwo">Page Two</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div id="PageTwo" data-role="page">
			<div data-role="header" data-backbtn="true">
				<h1>Phone Gap Two</h1>
				<a data-role="button" data-rel="back">Previous</a>
			</div>
			<div data-role="content">
				<div>
					<a href="#" id="alert" data-role="button" data-theme="b">Alert</a>
				</div>
				<div>
					<a href="#" id="confirm" data-role="button" data-theme="b">Confirm</a>
				</div>
				<div>
					<a href="file:///android_asset/www/Pages/pageThree.html" data-role="button" data-theme="b">Page Three</a>
				</div>
			</div>
			<div data-role="footer">
				<div data-role="navbar">
					<ul>
						<li><a href="#PageOne">Page One</a></li>
						<li><a href="#PageTwo">Page Two</a></li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</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.         <adata-role="button"data-rel="back">Previous</a> 
  5.     </div> 
  6.     <div data-role="content"> 
  7.         <div> 
  8.             <ahref="#"id="alert"data-role="button"data-theme="b">Alert</a> 
  9.         </div> 
  10.         <div> 
  11.             <ahref="#"id="confirm"data-role="button"data-theme="b">Confirm</a> 
  12.         </div> 
  13.     </div> 
  14.     <div data-role="footer"> 
  15.         <divdata-role="navbar"> 
  16.             <ul> 
  17.                 <li><ahref="#PageOne">Page One</a></li> 
  18.                 <li><ahref="#PageTwo">Page Two</a></li> 
  19.             </ul> 
  20.         </div> 
  21.     </div> 
  22. </div> 
[html] view plaincopyprint?
  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>  
<div id="PageThree" data-role="page">
	<div data-role="header" data-backbtn="true">
		<h1>Phone Gap Three</h1>
		<a data-role="button" data-rel="back">Previous</a>
	</div>
	<div data-role="content">
		<div>
			<a href="#" id="alert" data-role="button" data-theme="b">Alert</a>
		</div>
		<div>
			<a href="#" id="confirm" data-role="button" data-theme="b">Confirm</a>
		</div>
	</div>
	<div data-role="footer">
		<div data-role="navbar">
			<ul>
				<li><a href="#PageOne">Page One</a></li>
				<li><a href="#PageTwo">Page Two</a></li>
			</ul>
		</div>
	</div>
</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许可！（百度一下就可以轻松解决）

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

 

http://blog.csdn.net/avenleft/article/details/7383008

 

推荐一个 PhoneGap Eclipse Android 插件，这个插件有几个可以值得推荐的地方：

1、支持直接构建 PhoneGap 项目，不用来回去复制 jar、xml 和 js 了。

2、提供了一个非常棒的示例应用。

3、已经提供支持集成 jQuery Mobile 和 Sencha Touch 。

4、更新也很快，目前的最新版本，已集成的是 Cordova 1.5和 jQuery Mobile 1.01 .

5、提供比较详细的文档和一个视频教程。文档见：

 

http://wiki.phonegap.com/w/page/34483744/PhoneGap%20Eclipse%20PlugIn%20for%20Android

 

6、最新的 update site 是：http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2.8/download/

 

http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download/

分享到：
| PhoneGap插件开发实例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    android+phonegap+jquery mobile

    【描述】：“该源码是使用PhoneGap加jQuery Mobile开发基于HTML5 CSS3的应用的项目例子。可以很好地学习jQuery Mobile。” 这段描述表明这个项目提供了一个实际的示例，用于教授如何结合PhoneGap和jQuery Mobile...

    jquery mobile, phoegap

    jQuery Mobile 和 PhoneGap 正是解决这一问题的两个强大工具，它们各自在前端框架和移动端应用开发领域发挥着重要作用。 **jQuery Mobile** 是一个基于 jQuery 的轻量级、响应式的移动框架，专为触摸屏设备设计。它...

    关于HTML5移动开发调研报告

    HTML5移动开发是近年来...这些技术共同构成了HTML5在移动端应用开发的基础，使得开发者能够构建功能强大、用户体验优秀的跨平台应用。随着技术的不断发展，我们可以期待更多高效、便捷的开发工具和解决方案的出现。

    张西涛 -HTML5移动应用多端开发架构实践

    使用HTML5、JavaScript、CSS等Web开发技术，可以同时开发多个平台的移动端应用，这大大减少了人员成本和代码量。跨平台开发的效率高，开发周期短，且利于快速抢占市场。此外，组件化和代码复用也提高了开发效率，...

    jqmDemo:尝试使用 phonegap 构建 jqm 演示

    "jqmDemo:尝试使用 phonegap 构建 jqm 演示" 这个标题表明这是一个关于使用PhoneGap技术构建基于jQuery Mobile（jqm）的移动端应用的示例项目。PhoneGap是一款开源框架，允许开发者使用HTML、CSS和JavaScript来开发...

    html5开发工程师岗位说明书模板.doc

    3. **框架应用**：熟悉并能灵活运用JQuery、Sencha Touch、JqueryMobile、PhoneGap等前端框架，能快速实现复杂的交互效果。 4. **Web标准理解**：深入理解Web标准，关注用户体验、可访问性，具备实际项目经验。 5....

    HTML5移动开发指南

    书中提到了jQuery Mobile和Sencha Touch这两套流行的JavaScript移动开发框架。jQuery Mobile强调轻量级和响应式设计，适用于各种屏幕尺寸；Sencha Touch则提供丰富的界面组件和较好的性能，适用于构建较为复杂的移动...

    HTML5移动Web开发指南

    第三部分将介绍当前流行的两套JavaScript移动开发框架：jQuery Mobile和Sencha Touch。这两套框架都提供了丰富的用户界面组件和对移动设备优化的交互效果。此外，还会涉及PhoneGap（也称为Apache Cordova），它是一...

    WEB_HTML5在LBS社区中的应用

    - **HTML5 WebApp**（如使用JQTouch框架）：适用于移动端Web应用开发。 - **Titanium、MoSync**：使用这些框架可以快速构建跨平台的原生应用。 3. **设备支持**： - **设备兼容性**：考虑到不同设备和操作系统的...

    中文版DreamweaverCC教学大纲.docx

    8. **制作移动端网页**：引入jQuery Mobile和PhoneGap Build，让学生掌握移动应用的打包和开发。 9. **综合案例**：通过实际项目，如制作“御茶”官方网站，将所学知识综合运用到实践中。 课程的教学方法强调理论...

    试论Web系统前端开发技术.pdf

    随着移动互联网的发展，移动终端前端框架如Bootstrap、jQuery mobile和WebAPP，以及混合应用开发框架如PhoneGap，也是前端开发者必须掌握的技术。 总体来说，Web系统前端开发技术是一个多层面、多层次的体系，包括...

    Drupal手机移动建站架构

    DrupalGap是一个将Drupal、PhoneGap和jQuery Mobile结合在一起的项目，实现了在移动设备上的原生应用体验。Mobile App Generator (MAG)是一个快速搭建移动应用的工具，***则是一个第三方平台，帮助开发者将现有网站...

    移动的

    标题中的“移动的”可能指的是在移动设备上开发或运行的应用程序或技术，这通常涉及到移动端的JavaScript开发。JavaScript是一种广泛使用的编程语言，尤其在Web开发中，它为创建交互式网页和应用程序提供了强大支持...

    AgoraMobile_sharedWeb:联通公司

    标题"AgoraMobile_sharedWeb:联通公司"指出这是一个与联通公司相关的项目，它使用了Agora Mobile平台，并且是基于PhoneGap框架构建的。PhoneGap是一个开源开发平台，允许开发者使用HTML、CSS和JavaScript来构建原生...

Magicbox
Global site tag (gtag.js) - Google Analytics