最近研究Mobile Web技术、发现了一个好东西-PhoneGap！
发现用PhoneGap+jQuery Mobile是一个很完美的组合！
本实例通俗易懂、适合广大开发人群：高富帅、白富美、矮穷戳；不论老幼妇孺、年过花甲、还是牙牙学语！由于此实例太过惊世骇俗、望练成之后、找个地方埋了！否则天下大乱、望施主谨记！善哉、善哉！--叨、校长
第一式：人剑合一（Android平台+PhoneGap+jQuery Mobile整合）
下载PhoneGap开发包：官方下载：http://phonegap.com/download/
解压PhoneGap压缩包；以备不时之需！
由于本实例是基于Android平台的，所以关于android开发环境的搭建这里不再说明！百度一下、你就知道！
新建一个Android项目：
项目结构如图所示：
说明：
jquerymobile目录是jQuery Mobile开发包！
新建好项目之后、修改一些地方、进行整合！
1、修改MainActivity.java类：
public class MainActivity extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
2、修改清单文件：
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.cordvoaand"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="7"
android:targetSdkVersion="7" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.example.cordvoaand.MainActivity"
android:label="@string/app_name"
android:configChanges="orientation|keyboardHidden" > <!-- 新增的一个activity属性 -->
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<!-- 增加Cordova屏幕支持 -->
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true" />
<!-- 增加Cordova插件的支持 -->
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
</manifest>
3、打开index.html文件、写一个简单的jQuery Mobile页面
<!DOCTYPE HTML> <html> <head> <title>Cordova</title> <script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="jquerymobile/jquery.mobile-1.1.1.css" /> <script src="jquerymobile/jquery-1.8.2.js"></script> <script src="jquerymobile/jquery.mobile-1.1.1.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>PhoneGap+jQuery Mobile+Rest访问远程数据</h1> </div> <!-- /header --> <div data-role="content"> <ul id='jokelist' data-role="listview" data-inset="true" data-filter="true"> </ul> </div> <!-- /content --> </div> <!-- /page --> </body> </html>
这样就整合成功了！
如果不明白的地方！请查看详细教程！
www.uikid.com UI小子提供帮助！
第二式：剑斗九天（访问Rest接口）
关于后台Rest接口的编写这里不再阐述、
修改index.html：
<!DOCTYPE HTML>
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="jquerymobile/jquery.mobile-1.1.1.css" />
<script src="jquerymobile/jquery-1.8.2.js"></script>
<script src="jquerymobile/jquery.mobile-1.1.1.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>PhoneGap+jQuery Mobile+Rest访问远程数据</h1>
</div>
<!-- /header -->
<div data-role="content">
<ul id='jokelist' data-role="listview" data-inset="true" data-filter="true">
</ul>
</div>
<!-- /content -->
</div>
<!-- /page -->
<script type="text/javascript">
function test(){
$.ajax({
//远程Rest接口
url:"http://192.168.1.101:8080/RestTest/rest/test/getDataGrid2",
//返回的数据类型
dataType:"json",
contentType:"application/json;charset=UTF-8;",
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "application/json");
},
success:function(response){
var data=response.content;
var count=data.length;
for(var i=0;i<count;i++){
$("#jokelist").append("<li><a href='list.jsp?uuid="+data[i].uuid+"'>"+data[i].title+"</li>")
}
},
error:function(jqXHR, textStatus, errorThrown){
alert("服务器异常!系统退出！");
}
})
}
test();
</script>
</body>
</html>
第三式：打完收工（运行项目，Run as Android Application...）
效果图：
谢谢学习！施主、拯救世界的任务就交给你了！这样吧、收你10元钱、工本费呀！
相关推荐
PhoneGap+jQueryMobile开发Android应用实例，搭建开发环境
用PhoneGap+jQueryMobile开发Android应用实例，很好的android开发学习教材。
总的来说，"PhoneGap+jQuery Mobile汇率计算器"实例展示了如何将Web技术应用于移动开发，利用PhoneGap实现跨平台能力，利用jQuery Mobile提升用户体验。通过学习和实践这个实例，开发者不仅可以掌握这两种技术的基本...
在这个“phonegap+jqueryMobile例子”中，我们将深入探讨这两个工具如何协同工作，以及如何利用它们创建Android应用程序。 PhoneGap是一个开源框架，它允许开发者使用HTML、CSS和JavaScript来构建原生的移动应用。...
【标题】：“Android + PhoneGap + jQuery Mobile” 这个项目标题揭示了一个使用三种技术栈构建的移动应用程序：Android、PhoneGap和jQuery Mobile。Android是Google主导的开源操作系统，主要用于智能手机和平板...
PhoneGap和jQuery Mobile是两种非常重要的移动应用开发技术，它们结合使用可以构建跨平台的混合应用程序。PhoneGap是由Adobe开发的一个开源框架，它允许开发者使用HTML、CSS和JavaScript来创建原生的移动应用，而...
jQuery Mobile则是一个轻量级的UI框架，专门用于优化手机和平板电脑上的触摸交互体验。 HTML5的关键知识点包括： 1. **语义化标签**：HTML5引入了许多新的语义元素，如、、、和等，这些标签有助于提高页面结构的...
总结起来，通过PhoneGap、jQuery和HTML5的组合，我们可以构建一个跨平台的远程登录应用，利用AJAX实现与服务器的数据交换。这不仅降低了开发成本，还实现了与原生应用类似的用户体验。然而，为了保证应用的安全性和...
PhoneGap+jQuery示例项目是一个将这两者结合的实践应用，旨在帮助开发者了解如何使用PhoneGap框架和jQuery库创建跨平台的移动应用程序。PhoneGap是一个开放源代码的开发框架，它允许开发人员使用HTML、CSS和...
总结起来，PhoneGap+jQuery+HTML5的组合使得开发者能够轻松地创建跨平台的移动应用，并通过`Camera` API方便地访问设备的相机和相册。结合jQuery库，可以实现更丰富的用户交互，提高应用的可用性和用户体验。而...
### jQuery Mobile和PhoneGap集成开发 #### jQuery Mobile介绍 jQuery Mobile是一个针对移动设备优化的HTML5框架，用于构建响应式网站和应用程序。它是jQuery库的一个扩展，利用了jQuery的核心特性，并针对触控屏...
在这个"phonegap+jqueryMobilejs源码项目"中，我们可以期待看到以下关键知识点： 1. **PhoneGap环境搭建**：首先，我们需要安装PhoneGap的开发环境，包括Node.js、Apache Cordova和对应的平台SDK（如Android SDK或...
整合PhoneGap和jQuery Mobile可以更快地开发出跨平台的移动应用，因为可以利用PhoneGap的跨平台部署能力，以及jQuery Mobile的响应式设计和界面元素。 5. 示例参考 文档中提到了几个快速整合PhoneGap和jQuery ...
标题提到的"PhoneGap+javascript+html5 扫描二维码"是指利用PhoneGap框架，结合JavaScript和HTML5的特性来实现二维码扫描功能。在移动应用中，二维码扫描是非常实用的功能，可以用于快速数据交换、链接跳转、会员...
【预算管理器（Budget Manager）】是一款基于PhoneGap和jQuery Mobile技术构建的轻量级应用程序，主要用于个人或家庭的月度预算控制。PhoneGap是一种开放源代码框架，它允许开发者使用HTML、CSS和JavaScript来创建跨...
在"phoneGap jqueryMobile demo"这个项目中，SmartHome可能是示例应用的名字，可能包含了一系列使用PhoneGap和jQuery Mobile创建的文件，用于展示如何将两者结合使用来开发一个智能家居控制应用。开发者可能使用HTML...
HTML5、PhoneGap和jQuery Mobile是移动应用开发中的三大核心技术，它们共同构建了跨平台的移动应用程序。HTML5是下一代超文本标记语言，提供了许多增强的网页交互功能；PhoneGap是一个开源框架，允许开发者使用Web...
PhoneGap和JQuery Mobile是移动应用开发中的两个关键框架，它们结合使用可以帮助开发者构建跨平台的原生感观的移动应用程序。PhoneGap是Adobe提供的一个开源框架，它允许使用HTML、CSS和JavaScript来构建移动应用，...