开发基于jquerymobile+phonegap+android的应用程序（1） [转]

 

　　先插入一条广告，博主新开了一家淘宝店，经营自己纯手工做的发饰，新店开业，只为信誉！需要的亲们可以光顾一下！谢谢大家的支持！
店名：
　　小鱼尼莫手工饰品店
经营:
　　发饰、头花、发夹、耳环等（手工制作）
网店：
　　http://shop117066935.taobao.com/

 

 

 

马上开始正题...

 

 

转自：http://www.cnblogs.com/xiaozhanga4/archive/2012/02/18/2357322.html

在接触jquerymobile+phonegap+android之后，就想开发一款基于这三个技术框架的手机应用。

第一步：设计应用原型

http://www.cnblogs.com/xiaozhanga4/archive/2012/02/18/2357328.html

第二步：程序架构

jquermobile

非常简单，只需在网页导入几个文件即可（我是使用CDN方式导入，你也可以到官网下载到本地项目里）

这是我的jquerymobile的基本框架模板

http://www.cnblogs.com/xiaozhanga4/archive/2012/02/18/2357463.html

android

这个就有点麻烦了

1、下载eclipse基本版本Eclipse Classic 其他版本其实也可以的，不过还是按照标准来吧

http://www.eclipse.org/downloads/

2、下载android sdk （开发环境）

http://developer.android.com/sdk/index.html

3、下载android adt （android虚拟机）

http://developer.android.com/sdk/eclipse-adt.html#installing

4、下载phonegap

Download 

下完后在eclipse配置phonegap，这个又比较麻烦，刚开始，熟练了就没事了，参考我以下的文章

 http://www.cnblogs.com/xiaozhanga4/archive/2012/02/18/2357520.html

官方网站教程

http://phonegap.com/start#android

第三步：开始编码

配置完环境后，作为前端开发人员不需要再对java代码进行编码了，所以我们直接打开index.html文件

我们从头开始编码，先把框架用代码实现，具体的美化以后再说吧

在页面的顶部是header，我暂时只加入一个应用程序的名称

<div data-role="header">
<h1>Geolocation应用</h1>
</div><!-- /header -->

 页面的底部是footer，我也是简单地写了个页脚

<div data-role="footer">
<h4>@校长阿四</h4>
</div><!-- /footer -->

关键和难点在于中间页面content显示方面，关于这方面你必须精通jquerymobile，关于jquerymobile其是很简单，关键是要熟练，这里提供中英文的文档供查询

http://www.jqmapi.com/index.html 中文

http://jquerymobile.com/test/ 英文

店名：
　　小鱼尼莫手工饰品店
经营:
　　发饰、头花、发夹、耳环等（手工制作）
网店：
　　http://shop117066935.taobao.com/