今天纪录的是学习用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. 一个gulp用于开发与生产的示例

    gulp是一款流行的前端构建工具,可以帮我们完成许多工作:监听文件修改.刷新浏览器.编译Less/Scss.压缩代码.添加md5.合并文件等.gulp的配置和使用特别简单,学习gulp过程中顺便写了一 ...

  2. 3：django models Making queries 高级进阶--聚合运算

    在前一遍文章django models Making queries里面我们提到了django常用的一些检索数据库的内容, 下面我们来看一下更为高级的检索聚合运算 这是我们要用到的模型 class A ...

  3. liunx命令大全

    Linux常用命令大全   Linux常用命令大全(非常全!!!) 最近都在和Linux打交道,感觉还不错.我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制,当然,这也是很多人 ...

  4. js解析与序列化json数据(一)json.stringify()的基本用法

    对象有两个方法:stringify()和parse().在最简单的情况下,这两个方法分别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript 早期的JS ...

  5. SEO优化：WordPress发布文章主动推送到百度，加快收录保护原创

    工作实在太忙,也没时间打理网站.最近公司额外交待了一些网站 SEO 方面的优化任务让我关注(这就是啥都要会.啥都要做的苦逼运维的真实写照了...). 于是抽空看了下百度站长平台,至少看到了2个新消息: ...

  6. kubernetes如何要使用用户名和密码登陆harbor以拉取docker镜像，应该如何操作？

    还好,网上有相应的CASE处理. http://www.jianshu.com/p/ffbfb44dc496 =========================== 先生成名为为regsecret的S ...

  7. WebDriver自动化测试工具(2)---基本操作

    一.设置打开的浏览器大小/位置 driver.Manage().Window.Maximize(); //最大化 driver.Manage().Window.Position = , ); //设置 ...

  8. poj1743 后缀数组， poj挂了 存个代码

    #include<bits/stdc++.h> #define LL long long #define fi first #define se second #define mk mak ...

  9. ARK登录信息

    101,389B,382:仙境353:中心岛380:畸变404:孤岛371:焦土487:灭绝 eaglexmw:389b[65493013] : 初级畸变,高级飞升,TEK全解(有380权限),黑鬼, ...

  10. python正则的中文处理(转)

    匹配中文时,正则表达式规则和目标字串的编码格式必须相同 print sys.getdefaultencoding() text =u"#who#helloworld#a中文x#" ...