今天纪录的是学习用phonegap和jquery-moblie来写android的过程。环境搭建。
我的习惯是直接上官网看文档，看get-started guide之类的文档。然后在看参考手册。然后就按自己的
学习习惯入门了。
首先是：phonegap。介绍的话baidu知道。网站：phonegap.com。
               http://phonegap.com/start
然后跟着教程走就可以了。
对于不太喜欢看英文的同学。
值得注意的是：1.下面假设已经下载了phonegap并解压了。打开了Android目录。
（目录既文件夹）
                 2. 注意phonegap.js其实是phonegap-version.js。version用具体的版本号代替。我这里是1.2.0
                 3. phonegap.jar其实是phonegap-version.jar，而且要记得把这个jar包添加到eclipse的build-path中去喔。
                 4. 特别注意：loadUrl("file:///")中是3条杠，而不是两条。（我对于file协议为什么要设计成这样，有疑问！）
我简单的翻译一下：
写道
In the root directory of the project, create two new directories:

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

Copy phonegap.js from your PhoneGap download earlier to /assets/www
2.将phonegap.js从刚才下载下来的phonegap文档中拷贝到/assets/www目录下。
Copy phonegap.jar from your PhoneGap download earlier to /libs
3.将phonegap.jar从刚才下载下来的phonegap文档中拷贝到/libs目录下。
Copy xml folder from your PhoneGap download earlier to /res
4.将xml文件夹从刚才下载下来的phonegap文档中拷贝到/res目录下。
Make a few adjustments too the project's main Java file found in the src folder in Eclipse: (view image below)
在src源代码文件中的main java源代码文件中做做一些修改。
Change the class's extend from Activity to DroidGap
将类由继承Activity改成继承DroidGap。
Replace the setContentView() line with super.loadUrl("file:///android_asset/www/index.html");
将setContentView()一行用super.loadUrl("file:///android_asset/www/index.html");替换
Add import com.phonegap.*;
添加: import com.phonegap.*;
Remove import android.app.Activity;
删除import android.app.Activity

下面是项目截图：

2.png (96.76 KB, 下载次数: 29)

下载附件  保存到相册

2011-12-22 18:41 上传

对照上面的项目截图。如果还没有jquery-mobile，没关系。
注意
然后。
1.在AndroidManifest.xml中添加如下xml代码：
Xml代码

  1. <supports-screens
  2. android:largeScreens="true"
  3. android:normalScreens="true"
  4. android:smallScreens="true"
  5. android:resizeable="true"
  6. android:anyDensity="true"
  7. />
  8. <uses-permission android:name="android.permission.CAMERA" />
  9. <uses-permission android:name="android.permission.VIBRATE" />
  10. <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  11. <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  12. <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
  13. <uses-permission android:name="android.permission.READ_PHONE_STATE" />
  14. <uses-permission android:name="android.permission.INTERNET" />
  15. <uses-permission android:name="android.permission.RECEIVE_SMS" />
  16. <uses-permission android:name="android.permission.RECORD_AUDIO" />
  17. <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
  18. <uses-permission android:name="android.permission.READ_CONTACTS" />
  19. <uses-permission android:name="android.permission.WRITE_CONTACTS" />
  20. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  21. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  22. <uses-permission android:name="android.permission.GET_ACCOUNTS" />

复制代码

2.将如下 [size=1em]android:configChanges="orientation|keyboardHidden"添加到默认的activity标签中。
3. 添加另外一个activity如下。：
Xml代码

  1. <activity android:name="com.phonegap.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden">
  2. <intent-filter> </intent-filter>
  3. </activity>

复制代码

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

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>PhoneGap</title>
  5. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
  6. </head>
  7. <body>
  8. <h1>Hello World</h1>
  9. </body>
  10. </html>

复制代码

加入jquery-moblie支持。
很简单了。把jquery-moblie和jquery下载下来就可以了。

修改index.html如下：
Html代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>html app</title>
  7. <script type="text/javascript" charset="utf-8"
  8.         src="js/phonegap-1.2.0.js"></script>
  9. <!--<link rel="stylesheet"
  10.         href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  11. <script type="text/javascript"
  12.         src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  13. <script type="text/javascript"
  14.         src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
  15. -->
  16. <link rel="stylesheet"
  17.         href="css/jquery.mobile-1.0.min.css" />
  18. <script type="text/javascript"
  19.         src="js/jquery-1.6.4.min.js"></script>
  20. <script type="text/javascript"
  21.         src="js/jquery.mobile-1.0.min.js"></script>
  22. </head>
  23. <body>
  24. <div data-role="page">
  25.         <div data-role="header">
  26.                 <h1>My Title</h1>
  27.         </div><!-- /header -->
  28.         <div data-role="content">       
  29.                 <p>Hello world</p>               
  30.         </div><!-- /content -->
  31.         <ul data-role="listview" data-inset="true" data-filter="true">
  32.         <li><a href="#">Acura</a></li>
  33.         <li><a href="#">Audi</a></li>
  34.         <li><a href="#">BMW</a></li>
  35.         <li><a href="#">Cadillac</a></li>
  36.         <li><a href="#">Ferrari</a></li>
  37. </ul>
  38. </div><!-- /page -->
  39. </body>
  40. </html>

复制代码

好了运行一下：

1.png (29.73 KB, 下载次数: 21)

下载附件  保存到相册

2011-12-22 18:41 上传

嗯，成功了，学习正式开始吧！

用phonegap和jquery-mobile写android应用的更多相关文章

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

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

  2. Jquery Mobile设计Android通讯录第二章

    本文是jQuery Mobile设计Android通讯录系统教程的第二篇,在上一篇教程中(http://publish.itpub.net/a2011/0517/1191/000001191561.s ...

  3. PhoneGap与Jquery Mobile结合开发android应用配置

    由于工作需要,用到phonegap与jquery moblie搭配,开发android应用程序. 这些技术自己之前也都没接触过,可以说是压根没听说过,真是感慨,在开发领域,技术日新月异,知识真是永远学 ...

  4. 使用Jquery Mobile设计Android通讯录

    本系列教程将指导大家一步步使用Jquery Mobile设计一个Android的通讯录应用.其中在应用的界面部分,将使用jQuery Mobile框架,并且会指导大家如何使Android中提供的web ...

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

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

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

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

  7. phongap+ jquery + asp.net +android，我把我遇到的问题和处理方法的连接总结一下

    这些都是最基本的问题,在实际的运用中都会用到 第1章.搭建Android的开发环境-跟我学编程 Win7旗舰版中的IIS配置asp.net的运行环境 - 追夢 - 博客园 vs2012下asp.net ...

  8. 分享15款为jQuery Mobile定制的插件

    jQuery Mobile 1.0 已经发布了, 做为jQuery的移动设备类库, 并且依靠着jQuery这个及其受欢迎的类库,必将带给大家不一样的使用体验,基于jQuery Mobile的插件开发必 ...

  9. 为什么需要jQuery Mobile

        1.没有所谓的移动互联网,只有一个互联网     2.设计移动网站不需要什么特别处理     3.一个站点应当在所有设备(台式机.手机.电视)上都能运转     jQuery Mobile诞生 ...

随机推荐

  1. eetcode 之String to Integer (atoi)（28）

    字符串转为数字,细节题.要考虑空格.正负号,当转化的数字超过最大或最小是怎么办. int atoi(char *str) { int len = strlen(str); ; ; ; while (s ...

  2. 简单理解Hash算法的作用

    什么是Hash Hash算法,简称散列算法,也成哈希算法(英译),是将一个大文件映射成一个小串字符.与指纹一样,就是以较短的信息来保证文件的唯一性的标志,这种标志与文件的每一个字节都相关,而且难以找到 ...

  3. JSON优缺点

    总结: 1.占带宽小(格式是压缩的) 2. js通过eval()进行Json读取(便于客户端读取) 3. JSON支持多种语言(c.c++.PHP等),便于服务端解析 JSON (JavaScript ...

  4. Qt笔记——QSqlLite

    静态数据库,简单方便 在.pro文件里添加 +sql #ifndef WIDGET_H #define WIDGET_H #include <QWidget> namespace Ui { ...

  5. 解决错误：此用户名包含无效字符，请输入有效的用户名。wordpress不能注册中文用户名的问题

    wordpress在默认情况下不支持中文用户名,就是在后台添加用户的时候,如果用户名包含中文,则显示”错误:此用户名包含无效字符,请输入有效的用户名.”如何解决这个问题呢? 不用插件的话就需要修改一个 ...

  6. loadrunner中文件的操作

    loadrunner中文件的操作 我们可以使用fopen().fscanf().fprintf().fclose()函数进行文件操作,但是因为LoadRunner不支持FILE数据类型,所以我们需要做 ...

  7. 计划任务at cron

    计划任务作用:做一些周期性的任务,主要用于定时备份数据,同步时间,定时删除日志 所有计划任务执行的输出都会以邮件的方式发送给指定用户,除非重定向 (1)at:一次性调度执行 1)安装 yum inst ...

  8. centos6.9 部署wordpress

    用centos6.9搭建wordpressLinux.Nginx.Mariadb(Mysql).PHP 1 yum install nginx mariadb php php-fpm php-mysq ...

  9. Java之IO流的关闭

    1.在finally中关闭流: OutputStream out = null; try { out = new FileOutputStream(""); // ...操作流代码 ...

  10. Linux操作命令（六）

    本次实验将介绍 Linux 命令中 wc 和 grep 命令的用法. wc grep 1.wc wc命令是一个统计的工具,主要用来显示文件所包含的行.字和字节数. wc命令是word count的缩写 ...