最近研究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元钱、工本费呀！
相关推荐
MyEclipse 2015正式版1.0的最重要的几点更新：更好的支持JavaScript和AngularJS等技术模块，全新的REST浏览器以及REST模块的极速访问，PhoneGap移动开发工具。 MyEclipse 2015正式版1.0更新总览： Custom ...
9. **版本控制**：文件名为“jquerymobile-cordova-tutorial-meeting-rooms-3-master”暗示了项目使用了Git作为版本控制系统。Git可以帮助开发者追踪代码变更，协同开发，并管理不同版本的代码。 10. **部署与发布*...
PhoneGap 客户端带有 OAuth2 的 Django REST 服务器带有 OAuth2 的 Java REST 客户端带有 OAuth2（和 Bootstrap UI）的 JavaScript AngularJS REST 客户端带有 OAuth2（和 jQueryMobile UI）的 JavaScript jQuery ...
开发者可以考虑使用REST（Representational State Transfer）设计原则，利用JavaScript来加载和管理状态，从而实现前后端分离，提高应用性能和可维护性。 另外，我们在开发HTML5移动应用时还需要考虑与Native应用的...
同时，MyEclipse 2015支持移动开发，支持Android和iOS开发，并且包含了jQuery Mobile模板和移动Web模拟器等工具，方便开发者测试和模拟移动应用。 MyEclipse 2015还提供了PhoneGap API支持和PhoneGap Build ...
jQuery/Extjs/Dojo/Mootools/Yui Backbone Angular 移动端 h5/localstorage/websocket/canvas phonegap/cordova 是否具备编写原生插件能力 优化：fastclick，zepto，iscroll等 框架：sencha、jqmobile、ionic...
在萌芽阶段，中间件框架如PhoneGap，框架如jQuery Mobile、Sencha Touch、Titanium开始出现。成熟阶段中，AngularJS、MVVM框架和Ionic框架的出现标志着HTML5 Hybrid App开发的最佳实践。到了创新阶段，React.js和...