由于工作需要，用到phonegap与jquery moblie搭配，开发android应用程序。

这些技术自己之前也都没接触过，可以说是压根没听说过，真是感慨，在开发领域，技术日新月异，知识真是永远学不完的。就算是做java 开发的，可是细分下来，专业方向还是很多的；自己没有涉及的技术还是太多了，自个需要对单个领域专业点，知识丰富点。做不了全才，那咱做个专才，在如今社 会还是必须的。

好了，咱们言归正传：

PhoneGap是一个开源的开发框架，使用HTML，CSS和JavaScript来构建跨平台的的移动应用程序。它使开发者能够利 用iPhone，Android，Palm，Symbian，Blackberry，Windows Phone和Beda智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等。

Jquery mobile是由（MT）Media Temple联合多家移动设备厂商以及软件企业共同发起的的针对触屏智能手机与平板电脑的website以及在线应用的前端开发框架。Jquery mobile构建于Jquery 以及 Jquery UI类库之上，为前端开发人员提供了一个兼容所有主流移动设备平台的统一UI接口系统。拥有出色的弹性，轻量化以及渐进增强特性与可访问性。

1.首先需要下载PhoneGap，可以去如下网站下载：http://phonegap.com/   在首页的右上角有个下载图标，点击可以下载其压缩版本，现在最新版是PhoneGap1.5.0，下载后的文件名是：phonegap-phonegap-1[1].5.0-0-gde1960d.zip。

2.下载完成后，对其进行解压，里面会有其介绍文档和示例文件（包括android，ios，blackberry等），此处我们只需 要用到android的，在解压的文件中，在lib文件夹下的android文件夹中，我们找到cordova-1.5.0.jar(其实也就是其他网站 中指的phonegap.jar)、cordova-1.5.0.js还有一个xml文件夹

3.新建一个android工程

4.在项目的根目录下新建四个目录。 /libs /assets/www

/assets/css

/assets/js

5.将cordova-1.5.0.js拷贝到/assets/js目录下。 6.将cordova-1.5.0.jar拷贝到/libs目录下。 7.将xml文件夹拷贝到/res目录下。 8.在src源代码文件中的main java源代码文件中做做一些修改。 将类由继承Activity改成继承DroidGap。 将setContentView()一行用super.loadUrl("file:///android_asset/www/index.html");替换 添加: import com.phonegap.*; 删除import android.app.Activity

import org.apache.cordova.DroidGap;

import android.os.Bundle;

public class App extends DroidGap {

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

//        setContentView(R.layout.main);

        super.loadUrl("file:///android_asset/www/index.html");

    }

}

布置好的项目截取如下：

此时你还没有jquery mobile没有关系。我们先把phonegap配置好，接着：

1.在AndroidManifest.xml中添加如下xml代码，具体添加地方，可以参考上面的截图：

<supports-screens

android:largeScreens="true"

android:normalScreens="true"

android:smallScreens="true"

android:resizeable="true"

android:anyDensity="true"

/>

<uses-permission android:name="android.permission.CAMERA" />

<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" />

2.将如下 android:configChanges="orientation|keyboardHidden"添加到默认的activity标签中。

3.然后在/assets/www/目录下创建一个index.html文档内容如下：

<!DOCTYPE HTML>

<html>

<head>

<title>PhoneGap</title>

<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

4.加入jquery mobile支持，去其官网下载：http://jquerymobile.com/blog/2012/01/26/jquery-mobile-1-0-1-released/#download，

现在最新稳定版本是1.0.1，可以下载包含所需文件的zip格式的压缩包，名称： jquery.mobile-1.0.1.zip (JavaScript, CSS, and images) ，另外再下载jquery-1.6.4.min.js

下载下来后，解压。把jquery.mobile-1.0.1.min.css放到assets/css目录下，把jquery.mobile-1.0.1.min.js和jquery-1.6.4.min.js放到assets/js目录下。

5.修改index.html

<!DOCTYPE HTML>

<html>

 <head>

    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1" charset="UTF-8">

    <link rel="stylesheet" href="../css/jquery.mobile-1.0.1.min.css">

    <script src="../js/jquery-1.6.4.min.js"></script>

    <script src="../js/jquery.mobile-1.0.1.min.js"></script>

 </head>

 <body>

    <div data-role="page">

       <div data-role="header">

          <h1>Test</h1>

       </div>

    <div data-role="content" data-theme="a">

     <div data-role="fieldcontain">

       <label for="username">登录名:</label>

       <input type="text" name="username" id="username" value=""  />

       <label for="password">密码:</label>

       <input type="password" name="password" id="password" value=""  />

       </div>

    </div>

    <div data-role="footer">

       <h4>Page Footer</h4>

    </div>

    </div>

    <div data-role="page" id="dialogPopUp">

       <div data-role="header">

          <h1>Dialog Title</h1>

       </div>

       <div data-role="content">

          This is a dialog box

       </div>

    <div data-role="footer">

    <h4>Additional Footer information</h4>

    </div>

    </div>

 </body>

</html>

运行结果如下：

转：http://www.myexception.cn/android/434545.html

PhoneGap与Jquery Mobile结合开发android应用配置的更多相关文章

  1. PhoneGap与Jquery Mobile组合开发android应用的配置

    PhoneGap与Jquery Mobile结合开发android应用的配置 由于工作需要,用到phonegap与jquery moblie搭配,开发android应用程序. 这些技术自己之前也都没接 ...

  2. PhoneGap&jQuery Mobile应用开发环境配置（For Android）

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

  3. (转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明

    (原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile 移动开发中的日期插件Mobiscroll ...

  4. 用C++语言开发Android程序 配置开发环境

    转自:http://www.cnblogs.com/yaotong/p/3622430.html 用C++语言开发Android程序 配置开发环境   如果你是一个C++语言的死忠,你喜欢C++语言到 ...

  5. jQuery Mobile 移动开发中的日期插件Mobiscroll使用说明

    近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好 ...

  6. jQuery Mobile移动开发

    1.在<head>元素中包括JavaScript文件是传统的方法.然而,依据Yahoo!"80%的终于用户响应时间在前端上"的说法,这些事件大部分花在资产的下载上,比如 ...

  7. Eclipse开发Android的配置（包括ADT安装，SDK配置）

      1. 下载Android SDK http://code.google.com/android/download.html下载后直接解压就可以使用了. 为了在DOS控制台中直接使用SDK的工具,可 ...

  8. Android开发--Android Studio配置

    1.常见问题 emulator: You might want to adjust your AVD RAM size and/or HAXM configuration to run in fast ...

  9. 探索开发跨平台移动App，谈Jquery Mobile 和PhoneGap应用

    随着智能手机等设备的大范围普及,各形各色的移动端软件随之既出.各互联网运营商也都在抢占移动软件的占有率.不惜采用财力进行宣传推广.例如,通过手机淘宝客户端购买物品总比pc端要便宜,360手机助手下载对 ...

随机推荐

  1. xml bug之cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration...

    1.今天重装了一下MyEclipse7.5,打开原来的Flex项目,又报了以下两个错误,之前解决过,但不想又出现,于是把它的解决方法贴出来,做个备忘! 错误信息为 错误信息 写道 cvc-comple ...

  2. Oracle创建用户并赋予权限

    1 CREATE USER username IDENTIFIED BY password; --这个是创建用户(这是最简单的创建语句没有指定表空间) 1 GRANT CREATE SESSION T ...

  3. ios开发--一个苹果证书怎么多次使用——导出p12文件

    为什么要导出.p12文件 当我们用大于三个mac设备开发应用时,想要申请新的证书,如果在我们的证书里,包含了3个发布证书,2个开发证书,可以发现再也申请不了开发证书和发布证书了(一般在我们的证书界面中 ...

  4. 利用Hessian如何实现Webservice

    利用Hessian如何实现Webservice [大] [中] [小] 发布人:圣才学习网  发布日期:2012-08-18 14:02  共966人浏览 Hessian是 一个轻量级的remotin ...

  5. 使用 node-odata 轻松创建基于 OData 协议的 RESTful API

    前言 OData, 相信身为.NET程序员应该不为陌生, 对于他的实现, 之前也有童鞋进行过介绍(见:这里1,这里2). 微软的WCF Data Service即采用的该协议来进行通信, ASP.NE ...

  6. Android: 启动init.rc 中service的权限问题【转】

    转自:http://www.linuxidc.com/Linux/2011-04/35014.htm 通过property_set("ctl.start", service_xx) ...

  7. 开发板上修改时间方法date命令【转】

    转自:http://blog.chinaunix.net/uid-25906157-id-3138157.html 之前使用开发板时发现每次开机后,系统的时间都恢复到初始状态1970年. 一. 先说一 ...

  8. ubuntu下启动和关闭tomcat的简单方法

    在ubuntu下面,我们安装tomcat可以有两种方式[1]用aptitude安装aptitude install tomcat6 [2]免安装版从apache tomcat 网站下载apache-t ...

  9. Ubuntu 12.04 LTS(64bit) 环境下JDK、 Eclipse、 ADT、 快捷图标

    一.在FriendlyARM,Tiny4412,,安装包下可补充: (按照手册添加openjdk-6-jdk 后) 安装JDK (Java),选择需要的JDK,或者全部安装. a) OpenJDK-6 ...

  10. Using Git subtrees to split a repository

    https://lostechies.com/johnteague/2014/04/04/using-git-subtrees-to-split-a-repository/ We are in a p ...