最近研究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"); }}?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文件、写一个简单的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：
<!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元钱、工本费呀！
?
?