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

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

 

一、简介

jQuery Mobile是jQuery在手机上和平板设备上的版本。jQuery Mobile 不仅给主流移动平台带来jQuery核心库，而且提供了一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。它拥有出色的弹性，轻量化以及渐进增强（Progressive enhancement）特性与可访问性。jQuery Mobile 1.0构建于jQuery核心1.6.4。

PhoneGap是一个用基于HTML5、CSS和JavaScript创建跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone、Android、Palm、Symbian、WP7、Bada和Blackberry智能手机的核心功能——包括地理定位、加速器、联系人、声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能。

二、开发步骤

1、下载jQuery Mobile和PhoneGap包。

2、新建Android工程testjqm。在assets下新建www、js和css文件夹。

3、导入phonegap.jar包，将jquery.mobile-1.0.css拷贝到css文件夹下，将phonegap-1.2.0.js、jquery-1.6.4.min.js和jquery.mobile-1.0.js拷贝到js文件夹下，将PhoneGap下的xml文件夹及内容拷贝到testjqm工程下的res文件夹下，如下图所示：

3、在www文件夹下新建index.html（HTML5）文件，编写要显示的界面内容。页面基本结构分为header、content、footer三部分。

<div data-role="page">
	<div data-role="header" data-theme="a" data-position="fixed"></div>
	<div data-role="content"></div>
	<div data-role="footer" class="nav_bar" data-position="fixed"></div>
</div> 

4、修改StartActivity.java，将extends Activity改为extends DroidGap，去掉setContentView(R.layout.main);添加：

super.loadUrl("file:///android_asset/index/index.html"); 

修改后的结果如下：

public class StartActivity extends DroidGap {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/index/index.html");
    }
}

5、运行模拟器，显示结果如下图：

其中用到的jQuery 组件有：button（按钮）、listview（列表）、navbar（导航）。

三、附录

原文摘自：http://express.ruanko.com/ruanko-express_43/tech-overnight2.html