最近研究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. 康乐不风流之爱解题的pde灌水王张祖锦

    康乐不风流之爱解题的pde灌水王张祖锦 师弟: 邓洪存 (现在烟台大学任教) 好吧, 我一直想写写康乐园里与我相熟的这几个人, 不如趁此机会开始. 第一批人物为张祖锦.苏延辉.张会春.黄显涛.刘兴兴. ...

  2. C++模板实例掌握

    前段时间重新学习C++,主要看C++编程思想和C++设计新思维.对模版的使用有了更进一层的了解,特总结如下: 下面列出了模版的常用情况:  << '\n';} //参考:http://ww ...

  3. LoadRunner界面分析（二）

    1.Controller 2.创建运行场景 3.方案设计 4.Resuls settting 5.监视方案

  4. 学习Python必须要知道的常用模块

    在程序设计中,为完成某一功能所需的一段程序或子程序:或指能由编译程序.装配程序等处理的独立程序单位:或指大型软件系统的一部分.本文为你介绍了Python中的两种常用模块. os: 这个模块包含普遍的操 ...

  5. 把一个序列转换成严格递增序列的最小花费 CF E - Sonya and Problem Wihtout a Legend

    //把一个序列转换成严格递增序列的最小花费 CF E - Sonya and Problem Wihtout a Legend //dp[i][j]:把第i个数转成第j小的数,最小花费 //此题与po ...

  6. C使用FILE指针文件操作

    文件的基本概念 所谓“文件”是指一组相关数据的有序集合. 这个数据集有一个名称,叫做文件名.实际上在前面的各章中我们已经多次使用了文件,例如源程序文件.目标文件.可执行文件.库文件 (头文件)等.文件 ...

  7. Mapreduce执行过程分析(基于Hadoop2.4)——(三)

    4.4 Reduce类 4.4.1 Reduce介绍 整完了Map,接下来就是Reduce了.YarnChild.main()—>ReduceTask.run().ReduceTask.run方 ...

  8. Linux入门视频

    为了方便新手学习Linux,本人专门录制了以下Linux初级视频方便学习,本系列多媒体教程已完成的博文: 轻松学习Linux之入门篇 http://chenguang.blog.51cto.com/3 ...

  9. openstack neutron

  10. 主题敏感词PageRank

    [主题敏感词PageRank] PageRank忽略了主题相关性,导致结果的相关性和主题性降低,对于不同的用户,甚至有很大的差别.例如,当搜索“苹果”时,一个数码爱好者可能是想要看 iphone 的信 ...