`
banxi1988
  • 浏览: 151627 次
  • 性别: Icon_minigender_1
  • 来自: 桂林
社区版块
存档分类
最新评论

用phonegap和jquery-mobile写android应用!

 
阅读更多

今天纪录的是学习用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

 

下面是项目截图:

android-phonegap-jquerymobile

 

 

 

 

对照上面的项目截图。如果还没有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>

 

 

   好了运行一下:

 juqery-moble-phonegap

 

嗯,成功了,学习正式开始吧!

0
0
分享到:
评论

相关推荐

    用PhoneGap+jQueryMobile开发Android应用实例

    用PhoneGap+jQueryMobile开发Android应用实例,很好的android开发学习教材。

    PhoneGap+jQueryMobile开发Android应用实例

    PhoneGap+jQueryMobile开发Android应用实例,搭建开发环境

    android+phonegap+jquery mobile

    该源码是使用phonegap加jquery mobile开发基于html5 css3的应用的项目例子。可以很好的来学校jquery mobile。

    使用jQuery Mobile + PhoneGap 开发Android应用程序

    使用jQuery Mobile + PhoneGap 开发Android应用程序

    jquerymobile开发android应用整套框架

    没分下载东西了,只好卖我的经典代码了,以下是我通过html5做的多个跨平台应用的demo框架:使用 phonegap 开发android应用框架结构 前台页面用jquery mobile开发,后台用axis2开发实现webservice,前后台用js发送...

    phoneGap jqueryMobile demo

    phonegap jquerymobile 简单示例

    jquery-mobile-dev

    jquery mobile 开发依赖包,快速构建跨平台的应用

    jQuery Mobile快速入门完整版.pdf + 所有源码

    使用PhoneGap轻松部署jQuery Mobile应用程序等。通过本书的学习,读者将会获悉jQuery Mobile的核心特性,以及如何创建可主题化的设计,还会掌握jQuery Mobile的API,以及如何使用PhoneGap来扩展jQuery Mobile。 ...

    PhoneGap wp7 JQuery Mobile 中文手册

    压缩文件包含PhoneGap wp7, JQuery Mobile 中文手册,PhoneGap1.3 它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外...

    Android JqueryMobile PhoneGap 项目实例

    Android+Jquerymobile+PhoneGap的项目实例,包括 用这些 js UI实现的 滑屏、触摸、禁横屏、滚动特效。绝对经典,技术绝对齐全, 绝对适合你学习。想学手机软件开发的人,必须选择我的资源, 与我一起进步!!!

    jquery mobile快速入门

    使用phonegap轻松部署jquery mobile应用程序等。通过本书的学习,读者将会获悉jquery mobile的核心特性,以及如何创建可主题化的设计,还会掌握jquery mobile的api,以及如何使用phonegap来扩展jquery mobile。 ...

    jQuery Mobile快速入门

    使用PhoneGap轻松部署jQuery Mobile应用程序等。通过本书的学习,读者将会获悉jQuery Mobile的核心特性,以及如何创建可主题化的设计,还会掌握jQuery Mobile的API,以及如何使用PhoneGap来扩展jQuery Mobile。 ...

    jQuery Mobile快速入门 源码 SourceCode

    使用phonegap轻松部署jquerymobile应用程序等。通过本书的学习,读者将会获悉jquerymobile的核心特性,以及如何创建可主题化的设计,还会掌握jquerymobile的api,以及如何使用phonegap来扩展jquery mobile。  ...

    jQueryMobile

    用PhoneGap+jQueryMobile开发Android应用实例

    android PhoneGap JQuery Mobile Demo

    NULL 博文链接:https://royal2xiaose.iteye.com/blog/1568052

    jQuery Mobile 插件 v1.0.1 官方正式版.rar

    jQuery Mobile 1.0.1版本修复,性能调整和小的改进. 经历了近一年时间开发的jQuery Mobile正式版1.0终于发布了。jQuery Mobile建立在jQuery Core和jQuery Ui之上,是适用于移动设备的JS框架。作用在于能为智能机,...

    jQuery Mobile快速入门245页完整版.pdf + 所有源码.7z

    第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实例

    Android PhoneGap实例 Jquery Mobile开发实例希望对大家有帮助!

Global site tag (gtag.js) - Google Analytics