今天纪录的是学习用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
下面是项目截图:
对照上面的项目截图。如果还没有jquery-mobile,没关系。
注意
然后。
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. 添加另外一个activity如下。:
<activity android:name="com.phonegap.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden">
<intent-filter> </intent-filter>
</activity>
4.然后在/assets/www/目录下创建一个index.html文档内容如下:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
加入jquery-moblie支持。
很简单了。把jquery-moblie和jquery下载下来就可以了。
修改index.html如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>html app</title>
<script type="text/javascript" charset="utf-8"
src="js/phonegap-1.2.0.js"></script>
<!--<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
-->
<link rel="stylesheet"
href="css/jquery.mobile-1.0.min.css" />
<script type="text/javascript"
src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript"
src="js/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
</div><!-- /page -->
</body>
</html>
好了运行一下:
嗯,成功了,学习正式开始吧!
分享到:
相关推荐
用PhoneGap+jQueryMobile开发Android应用实例,很好的android开发学习教材。
PhoneGap+jQueryMobile开发Android应用实例,搭建开发环境
该源码是使用phonegap加jquery mobile开发基于html5 css3的应用的项目例子。可以很好的来学校jquery mobile。
使用jQuery Mobile + PhoneGap 开发Android应用程序
没分下载东西了,只好卖我的经典代码了,以下是我通过html5做的多个跨平台应用的demo框架:使用 phonegap 开发android应用框架结构 前台页面用jquery mobile开发,后台用axis2开发实现webservice,前后台用js发送...
phonegap jquerymobile 简单示例
jquery mobile 开发依赖包,快速构建跨平台的应用
使用PhoneGap轻松部署jQuery Mobile应用程序等。通过本书的学习,读者将会获悉jQuery Mobile的核心特性,以及如何创建可主题化的设计,还会掌握jQuery Mobile的API,以及如何使用PhoneGap来扩展jQuery Mobile。 ...
压缩文件包含PhoneGap wp7, JQuery Mobile 中文手册,PhoneGap1.3 它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外...
Android+Jquerymobile+PhoneGap的项目实例,包括 用这些 js UI实现的 滑屏、触摸、禁横屏、滚动特效。绝对经典,技术绝对齐全, 绝对适合你学习。想学手机软件开发的人,必须选择我的资源, 与我一起进步!!!
使用phonegap轻松部署jquery mobile应用程序等。通过本书的学习,读者将会获悉jquery mobile的核心特性,以及如何创建可主题化的设计,还会掌握jquery mobile的api,以及如何使用phonegap来扩展jquery mobile。 ...
使用PhoneGap轻松部署jQuery Mobile应用程序等。通过本书的学习,读者将会获悉jQuery Mobile的核心特性,以及如何创建可主题化的设计,还会掌握jQuery Mobile的API,以及如何使用PhoneGap来扩展jQuery Mobile。 ...
使用phonegap轻松部署jquerymobile应用程序等。通过本书的学习,读者将会获悉jquerymobile的核心特性,以及如何创建可主题化的设计,还会掌握jquerymobile的api,以及如何使用phonegap来扩展jquery mobile。 ...
用PhoneGap+jQueryMobile开发Android应用实例
NULL 博文链接:https://royal2xiaose.iteye.com/blog/1568052
jQuery Mobile 1.0.1版本修复,性能调整和小的改进. 经历了近一年时间开发的jQuery Mobile正式版1.0终于发布了。jQuery Mobile建立在jQuery Core和jQuery Ui之上,是适用于移动设备的JS框架。作用在于能为智能机,...
第10章 使用phonegap轻松部署jquery mobile应用程序 10.1 什么是phonegap 10.2 将jquery mobile作为一个ios app来运行 10.3 将jquery mobile作为一个android app来运行 10.4 open app market 10.5 ...
Android PhoneGap实例 Jquery Mobile开发实例希望对大家有帮助!