今天纪录的是学习用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. 解决Ubuntu的错误提示

    如果你是一个Ubuntu用户,也许偶尔甚至经常,遇到这样一个错误提示“System Program problem detected”. Ubuntu有一个内建的实用程序叫做Apport, 当一个程序 ...

  2. hihocoder 1177 : 顺子

    #1177 : 顺子 时间限制:6000ms 单点时限:1000ms 内存限制:256MB 描述 你在赌场里玩梭哈,已经被发了4张牌,现在你想要知道发下一张牌后你得到顺子的概率是多少? 假定赌场使用的 ...

  3. git------删除Repository

    需求:删除仓库 Lucky-Repository,实现步骤如下截图所示 如上完成删除操作

  4. CSS Modules入门及React中实践（内附webpack4配置）

    本篇文章以整理为主,自己进行了部分修改,如有侵权,请告知 CSS Modules介绍 CSS Modules是什么东西呢?首先,让我们从官方文档入手:GitHub – css-modules/css- ...

  5. taskeng.exe禁用

    打开控制面板. 打开管理工具. 打开任务计划程序. 双击左边的的任务计划程序库,看到MySQL,然后双击MysQL,接着看到Installer,再双击Installer,这时候想禁止可以直接禁止 右击 ...

  6. 【ASP.NET MVC】 路由机制：命名路由

    首先看一下命名路由和没有命名的差别: 命名路由: routes.MapRoute( name: "Test", // Route name url: "code/p/{a ...

  7. 论文笔记-RCNN

    CAFFE玩了也有段时间了,现在开始准备研究一下物体检测,现在知道的有RCNN.spp-net.Fast-RCNN和Faster-RCNN,作为菜鸟我还是从头学习,决定先看RCNN,因为有项目要做还要 ...

  8. NOI2015 D1T2 软件包管理器

    题目传送门; 这个貌似是我这个蒟蒻做的第一道NOI系列的题了吧...这题的算法是树链剖分,其实基本上就是很常见的树剖+线段树,题目既然是要求每次安装或卸载改变的软件包的数目,那么就在每次操作前记录下线 ...

  9. 洛谷——P3908 异或之和

    P3908 异或之和 题目描述 求1 \bigoplus 2 \bigoplus\cdots\bigoplus N1⨁2⨁⋯⨁N 的值. A \bigoplus BA⨁B 即AA , BB 按位异或. ...

  10. FZOJ 2245 动态树（离散+离线+ 树状数组）

    Problem 2245 动态树 Accept: 17    Submit: 82Time Limit: 3000 mSec    Memory Limit : 65536 KB  Problem D ...