`
gteam.yu
  • 浏览: 27702 次
  • 性别: Icon_minigender_1
  • 来自: 成都
最近访客 更多访客>>
社区版块
存档分类
最新评论

Phone Gap开发一:整合jQuery Mobile开发Android App

阅读更多
经过了一段时间的学习,初步了解了该如何使用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
代码如下:
<!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,加入如下代码:
<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许可!(百度一下就可以轻松解决)

最后一个压缩包是工程压缩包。
  • 大小: 12.5 KB
  • 大小: 13.6 KB
  • 大小: 36.1 KB
  • 大小: 43.4 KB
  • 大小: 25.1 KB
  • Introduce.7z (595.5 KB)
  • 描述: 工程压缩包
  • 下载次数: 1378
分享到:
评论
1 楼 woaimoliha4 2012-01-06  
好东西,不错

相关推荐

    Phone Gap开发二:开发一个Phone Gap插件

    在本节中,我们将深入探讨如何在Phone Gap中开发一个自定义的插件,这对于扩展Phone Gap的功能和与设备的底层硬件进行交互至关重要。 首先,理解Phone Gap插件的基本结构是必要的。一个Phone Gap插件通常由两部分...

    Jquery mobile 中文开发文档

    - **跨平台兼容性(Cross-Platform Compatibility)**:jQuery Mobile 支持多种移动设备和浏览器,包括 iOS、Android、Windows Phone 等。 - **测试工具(Testing Tools)**:利用模拟器、设备实验室和自动化测试...

    jquery mobile demo

    这个框架基于 jQuery JavaScript 库,旨在简化跨平台开发,支持多种智能手机和平板设备,如 iOS、Android 和 Windows Phone。"jquery mobile demo" 是一个使用该框架构建的示例项目,它包含了一套基本的组件和页面...

    jQuery Mobile 所需要的部署文件

    它是HTML5开发的一个重要工具,支持多种移动平台,如iOS、Android、Windows Phone等。其核心理念是使用数据属性(data-attributes)来增强HTML标记,通过简单的标记结构就能实现复杂的UI设计。 在压缩包中,"hello...

    基于Jquery Mobile的IOS主题

    jQuery Mobile是jQuery库的一个扩展,专门针对移动设备进行了优化,支持多平台,包括iOS、Android、Windows Phone等。它提供了一套丰富的组件、交互效果和布局工具,帮助开发者快速构建用户界面。 **iOS主题** ...

    Android Phone Gap入门程序(Phone Gap HelloWorld)

    总之,"Android Phone Gap入门程序(Phone Gap HelloWorld)"是一个很好的起点,它让开发者快速入门PhoneGap,了解如何将Web技术应用于Android应用开发。通过这个项目,你可以逐步熟悉PhoneGap的开发流程,为创建更...

    HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站_陈婉凌.pdf

    jQuery Mobile的设计目标是跨平台兼容,能在iOS、Android、Windows Phone等多款主流移动操作系统上无缝运行。通过使用jQuery Mobile,开发者可以快速构建具有触摸友好的交互和流畅动画的移动应用和网站。 在本书中...

    jQuery Mobile快速入门完整版.pdf + 所有源码

    作为jQuery Mobile的入门级读物,《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的...具有一定开发经验的Android开发人员和iPhone/iPad开发人员在学完本书后,也可以通过一次编码,构建出可跨平台运行的app。

    构建跨平台APP jQuery Mobile移动应用实战代码

    在提供的“jQueryMobile2源代码”中,你可以找到示例项目的结构和实现,这对于深入理解 jQuery Mobile 的工作原理和实践技巧非常有帮助。通过研究这些代码,你将能更好地掌握如何利用这个框架构建功能丰富的跨平台...

    jQuery Mobile Up and Running

    1. **单一代码库**:jQuery Mobile支持多种设备和浏览器,允许开发者用一套代码同时构建iOS、Android、Windows Phone等不同平台的应用。 2. **页面和导航系统**:通过数据属性和事件处理页面链接和导航,使得页面间...

    jQuery Mobile 1.1.1最新版

    10. **兼容性**:jQuery Mobile 1.1.1 支持多种浏览器,包括iOS的Safari、Android的WebView、Blackberry浏览器、Windows Phone的IE以及桌面端的Chrome、Firefox等,确保了广泛的设备兼容性。 通过下载并解压`jquery...

    phone gap 移动开发框架

    在"Phone Gap 移动开发框架"中,我们关注的关键知识点包括: 1. **跨平台开发**:PhoneGap支持多种操作系统,包括Android、iOS、Bada、Blackberry、Symbian、WebOS和Windows Phone。这意味着开发者只需要编写一次...

    jQuery Mobile音乐播放实例源码

    通过使用jQuery Mobile 可以 "写更少的代码,做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页,且兼容所有移动设备。 lamp 不同设备使用了不同开发语言,jQuery Mobile可以很好的兼容不同的设备或操作...

    W3school,jquery,jquerymobile,css

    【标题】中的"W3school"、"jquery"、"jquerymobile"和"css"都是Web开发中的关键元素,它们代表了不同的技术栈和框架。以下是对这些知识点的详细阐述: **W3School**:这是一个非常知名的在线学习平台,提供丰富的...

    jQuery Mobile First Look

    - **跨平台兼容性**:jQuery Mobile支持各种移动设备,包括iOS、Android、Windows Phone等。 - **响应式布局**:自动适应不同屏幕大小,确保良好的用户体验。 - **组件丰富**:提供了一系列预定义的UI组件,如按钮、...

    jQuery Mobile Professional Guide

    本书详细介绍了如何使用jQuery Mobile这一强大的UI框架,从基础到高级特性,深入讲解了如何构建适用于iOS、Android、Windows Phone等平台的可定制、响应式、具有原生外观的应用程序。 知识点一:为何选择jQuery ...

    HTML5app:基本JQueryMobile的iOS端HTML5网页

    本项目"HTML5app:基本JQueryMobile的iOS端HTML5网页"就是一个很好的实例,它结合了HTML5与JQuery Mobile库,实现了iOS设备上的网页应用。 首先,我们要理解HTML5的优势。HTML5提供了许多新的元素和API,如离线存储...

    jQuery Mobile 开发跨平台移动应用

    总之,jQuery Mobile 作为一个成熟的跨平台移动应用开发框架,为开发者提供了强大的工具和支持,使得开发高质量的移动Web应用变得更加简单高效。随着移动互联网的不断进步和发展,jQuery Mobile 也在持续演进,为...

    4个phonepag jQuery Mobile实例APP

    【jQuery Mobile】是一种轻量级、触控优化的前端框架,专为移动设备设计,它提供了丰富的用户界面组件和交互效果。jQuery Mobile基于jQuery库,简化了在多种移动设备上创建响应式和交互性强的网页应用程序的过程。这...

    jQuery Mobile 快速入门

    此外,jQuery Mobile 还支持多种设备和浏览器,包括 iOS、Android 和 Windows Phone 等主流操作系统。 #### 三、快速入门指南 ##### 3.1 安装与配置 要开始使用 jQuery Mobile,首先需要下载并安装必要的文件。...

Global site tag (gtag.js) - Google Analytics