android 之 PhoneGap+jQuery Mobile+Rest 访问远程数据 -

lixg425

浏览: 495642 次
性别:
来自: 北京

最近访客更多访客>>

javaboy2010

fengzhou0920

leontius

Mr_冰凉

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

android 之 PhoneGap+jQuery Mobile+Rest 访问远程数据

博客分类：

android

android

http://www.apkbus.com/android-116588-1-12.html

最近研究Mobile Web技术、发现了一个好东西-PhoneGap！
发现用PhoneGap+jQuery Mobile是一个很完美的组合！
本实例通俗易懂、适合广大开发人群：高富帅、白富美、矮穷戳；不论老幼妇孺、年过花甲、还是牙牙学语！由于此实例太过惊世骇俗、望练成之后、找个地方埋了！否则天下大乱、望施主谨记！善哉、善哉！--叨、校长
第一式：人剑合一（Android平台+PhoneGap+jQuery Mobile整合）
下载PhoneGap开发包：官方下载：http://phonegap.com/download/
解压PhoneGap压缩包；以备不时之需！
由于本实例是基于Android平台的，所以关于Android开发环境的搭建这里不再说明！百度一下、你就知道！

新建一个Android项目：
项目结构如图所示：

0a160bcd-75ef-3e99-8fc2-b4f4ffe76b5e.jpg (35.58 KB, 下载次数: 113)
下载附件保存到相册
2013-5-15 17:23 上传

说明：
jquerymobile目录是jQuery Mobile开发包！
新建好项目之后、修改一些地方、进行整合！
1、修改MainActivity.java类：
Java代码

[mw_shl_code=java,true]public class MainActivity extends DroidGap {

        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                super.loadUrl("file:///android_asset/www/index.html");
        }
}[/mw_shl_code]

2、修改清单文件：
Java代码

[mw_shl_code=java,true]<?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" > 
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

    
    <supports-screens
                android:largeScreens="true"
                android:normalScreens="true"
                android:smallScreens="true"
                android:resizeable="true"
                android:anyDensity="true" />

    
    <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>[/mw_shl_code]

3、打开index.html文件、写一个简单的jQuery Mobile页面
Html代码

[mw_shl_code=java,true]<!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>
                
                <div data-role="content">
                        <ul id='jokelist' data-role="listview" data-inset="true" data-filter="true">
                        </ul>
                </div>
                

        </div>
        
</body>
</html>[/mw_shl_code]

这样就整合成功了！

第二式：剑斗九天（访问Rest接口）
关于后台Rest接口的编写这里不再阐述、
修改index.html：
Html代码

[mw_shl_code=java,true]<!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>
                
                <div data-role="content">
                        <ul id='jokelist' data-role="listview" data-inset="true" data-filter="true">
                        </ul>
                </div>
                

        </div>
        
        <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.uuid+"'>"+data.title+"</li>")
                                        }
                                },
                                error:function(jqXHR, textStatus, errorThrown){
                                        alert("服务器异常!系统退出！");
                                }
                        })
                }
                test();
        </script>
</body>
</html>[/mw_shl_code]

第三式：打完收工（运行项目，Run as Android Application...）
效果图：
谢谢学习！施主、拯救世界的任务就交给你了！这样吧、收你10元钱、工本费呀！

47419a80-dfc3-3f3f-9bfd-022f3aff5562.jpg (398.13 KB, 下载次数: 9)
下载附件保存到相册
2013-5-15 17:23 上传

CordvoaAnd.zip (2.02 MB, 下载次数: 88)
http://www.apkbus.com/forum.php?mod=attachment&aid=OTQxMTZ8N2ZiZmExMjV8MTM5MjQ4NjcxNHwwfDExNjU4OA%3D%3D

分享到：

Android 之快速开发框架 afinal | android 之使用Dreamweaver 5.5 + JQuery ...

2014-02-16 01:54
浏览 2500
评论(0)
分类:移动开发
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

android 之 PhoneGap+jQuery Mobile+Rest 访问远程数据

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

android 之 PhoneGap+jQuery Mobile+Rest 访问远程数据

评论

发表评论

相关推荐

移动签章资料

Android 之 快速开发框架 afinal

android 之 使用Dreamweaver 5.5 + JQuery + PhoneGap 开发手机应用程序（一）

android 之 QVGA、WVGA、VGA、WQVGA、SQVGA等几种手机分辨率

android 之 新浪微博

Android 之 实现推送方式解决方案

android 之 服务器主动向手机端推送消息-windows下Androidpn环境搭建

android 之 Androidpn 消息推送总结

android 之 专题

android 之 adb shell的使用

Android 之 开发资源完全汇总

android培训

最近访客更多访客>>

Android 之快速开发框架 afinal

android 之使用Dreamweaver 5.5 + JQuery + PhoneGap 开发手机应用程序（一）

android 之新浪微博

Android 之实现推送方式解决方案

android 之服务器主动向手机端推送消息-windows下Androidpn环境搭建

android 之专题

Android 之开发资源完全汇总