最近研究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类:

Java代码

public class MainActivity extends DroidGap {

    @Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
2、修改清单文件:

Java代码

<?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页面

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 -->
</body>
</html>

这样就整合成功了!

第二式:剑斗九天(访问Rest接口)
关于后台Rest接口的编写这里不再阐述、
修改index.html:

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...)
效果图:
 

PhoneGap+jQuery Mobile+Rest 访问远程数据的更多相关文章

  1. phoneGap+jquery mobile项目经验

        最近一个月,一直在用phoneGap+jquery mobile来开发一项目. 下面谈谈自己在开发过程中遇到的一些问题以及解决方法. 开始选择框架时,曾试过采用其他框架做UI,例如chocol ...

  2. 在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境

    移动设备应用开发有多难,只要学会HTML5+Javascript就可以.用Dreamweaver5.5+PhoneGap+Jquery Mobile搭建移动开发环境,轻轻松松开发你自己的应用.让你用普 ...

  3. 转载:用Dreamweave cs 5.5+PhoneGap+Jquery Mobile搭建移动开发

    转载地址:http://blog.csdn.net/haha_mingg/article/details/7900221 移动设备应用开发有多难,只要学会HTML5+Javascript就可以.用Dr ...

  4. PhoneGap&jQuery Mobile应用开发环境配置(For Android)

    关于移动应用为什么用PhoneGap和jQuery Mobile本文不再赘述,有兴趣的童鞋可以自行问“度娘”,有很多这方面的文章.本文主要介绍PhoneGap&jQuery Mobile移动应 ...

  5. PhoneGap+JQuery Mobile移动应用开发学习笔记

    最近一直在学习使用PhoneGap+JQuery Mobile的开发框架开发Android应用,抛开这个框架的运行效率不说,暂且将使用中遇到的问题进行一下整理. 1.JS文件引用顺序 也许在进行web ...

  6. jquery mobile动态加载数据后无法渲染

    引自:http://blog.sina.com.cn/s/blog_025270e901016lst.html jquery mobile在动态添加html之后无法渲染控件,无法转换控件的办法! jq ...

  7. 使用 jQuery.TypeAhead 让文本框自动完成 (二)(访问远程数据)

    项目地址:https://github.com/twitter/typeahead.js 直接贴代码了: @section headSection { <script type="te ...

  8. Jquery Mobile实例--利用优酷JSON接口读取视频数据

    本文将介绍,如何利用JqueryMobile调用优酷API JSON接口显示视频数据. (1)注册用户接口. 首页,到 http://open.youku.com 注册一个账户,并通过验证.然后找到A ...

  9. jquery mobile 和phonegap开发总结之三跨域加载页面

    跨域加载 一要进行一定的配置见下面 $( document ).bind( "mobileinit", function() { // Make your jQuery Mobil ...

随机推荐

  1. EhCache 分布式缓存/缓存集群

    开发环境: System:Windows JavaEE Server:tomcat5.0.2.8.tomcat6 JavaSDK: jdk6+ IDE:eclipse.MyEclipse 6.6 开发 ...

  2. selenium python (七)层级定位(二次定位)

    #!/usr/bin/python# -*- coding: utf-8 -*-__author__ = 'zuoanvip' #在实际测试过程中,一个页面可能有多个属性基本相同的元素,如果要定位到其 ...

  3. [转]Linux文件和目录操作命令

    转自:http://www.linuxdiyf.com/bbs/thread-416176-1-1.html 一.文件操作命令1.1 查看文件 Linux下查看文件的命令有很多,下面列出的几个是几乎所 ...

  4. Substrings 子字符串-----搜索

    Description You are given a number of case-sensitive strings of alphabetic characters, find the larg ...

  5. 配置Texmaker中文支持

    在Ubuntu 12.04 LTS下安装Texmaker后,如需要支持中文环境,需要安装CJK包. 终端(Ctrl+Alt+T(Terminal))下输入命令切换到超级管理员: sudo -i 安装包 ...

  6. log4net--帮助程序员将日志信息输出到各种目标(控制台、文件、数据库等)的工具

    1. log4net库是Apache log4j框架在Microsoft .NET平台的实现,是一个帮助程序员将日志信息输出到各种目标(控制台.文件.数据库等)的工具. 2. Log4net的结构如下 ...

  7. 15+ 易响应的CSS框架快速开启你的敏捷网站项目

    由 于移动互联用户的快速增加,现在数量已经超出10亿,几乎可以肯定的是你的网站每天都会有移动用户访问.如果你组织计划创建一个对移动用户友好的浏览体 验,有多个方面需要考虑.响应快速的网站设计似乎现在很 ...

  8. HBase应用场景

    适用场景 列族结构经常调整 高并发写入 结构化数据及半结构化数据 Key-Value存储 有序存储 固定集合(多版本) 定时删除记录(TTL)   不适用场景 事务 join,union,groupb ...

  9. 《Java数据结构与算法》笔记-CH4-4循环队列

    /** * 循环队列 */ class Queue { private int maxSize; private long[] queue; private int front; private in ...

  10. 基于Linux2.6内核的加密容器法保护文件方法

            本文出自 "李晨光原创技术博客" 博客,谢绝转载!