【叨、校长】PhoneGap+jQuery Mobile+Rest 访问远程数据

最近研究Mobile Web技术、发现了一个好东西-PhoneGap!

发现用PhoneGap+jQuery Mobile是一个很完美的组合!

本实例通俗易懂、适合广大开发人群:高富帅、白富美、矮穷戳;不论老幼妇孺、年过花甲、还是牙牙学语!由于此实例太过惊世骇俗、望练成之后、找个地方埋了!否则天下大乱、望施主谨记!善哉、善哉!--叨、校长

第一式:人剑合一(Android平台+PhoneGap+jQuery Mobile整合)

下载PhoneGap开发包:官方下载:http://phonegap.com/download/

解压PhoneGap压缩包;以备不时之需!

由于本实例是基于Android平台的,所以关于android开发环境的搭建这里不再说明!百度一下、你就知道!

 

新建一个Android项目:

项目结构如图所示:

【叨、校长】PhoneGap+jQuery Mobile+Rest 访问远程数据_第1张图片

说明:

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+jQuery Mobile+Rest 访问远程数据_第2张图片

 

 

你可能感兴趣的:(jquery,android,Web,mobile,PhoneGap)