[转载]PhoneGap+JqueryMob+html5开发跨平台移动app-Android实例教程-eoe 移动开发者论坛 - Powered by Discuz!

[转载]PhoneGap+JqueryMob+html5开发跨平台移动app-Android实例教程-eoe 移动开发者论坛 – Powered by Discuz!.

PhoneGap+JQueryMob+html5开发跨平台移动app
一、PhoneGap简介
PhoneGap 是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用 iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系 人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展很多功能。
PhoneGap 在2011年7月29日发布1.0版本,在2011年10月4日被Adobe公司收购,截止2013年11月29日最新版本为2.9.1。
官方网址为:http://phonegap.com/(官方提供中文的Api)
二、JQuery for mobile简介
JQueryMobile 是一个极好的框架,用于编写移动Web 应用程序。jQuery Mobile 构建于流行的jQuery 和用户界面 (UI) 之上,是一个有效的统一框架,可为您编写移动Web 应用程序。有了 jQuery Mobile,就可以确保外观、感觉和行为在不同移动平台上的一致性。jQueryMobile 基本特性包括:
1、一般简单性和灵活性
该框架易于使用。您可以:
o   主要使用标记驱开发动页面,无需或仅需很少JavaScript
o   使用高级 JavaScript和事件。
o   使用一个 HTML 文件和多个嵌入页面。
o   将应用程序分解成多个页面。
2、逐步强化和全面兼容
尽管 jQuery Mobile 利用最新的HTML5、CSS3 和 JavaScript,但并非所有移动设备都提供这样的支持。jQueryMobile 的理念是同时支持高端和低端设备,比如那些不支持JavaScript 的设备,尽量提供最好的体验。
3、支持触摸屏输入和其他输入方法。
jQuery Mobile 为不同输入方法和事件提供支持:触摸屏、鼠标和基于光标焦点的用户输入。
4、可访问性
jQuery Mobile 在设计时考虑了访问能力,它支持Accessible Rich Internet Applications (WAI-ARIA),以帮助使用辅助技术的残障人士访问Web 页面。
5、轻量级和模块化
该框架属于轻量级,拥有一个大小(版本 1.0.1 进行了缩小和压缩)为24KB 的 JavaScript 库,7KB的 CSS 以及一些图标。
6、主题
该框架还提供一个主题系统,允许您定义自己的应用程序样式。有了这个新的ThemeRoller 应用程序,您就可以轻松地创建您自己的主题。
jQueryMobile 框架包括构建完整移动 Web 应用程序和网站所需的所有UI 组件。页面、对话框、工具栏、不同类型的列表视图,各种表单元素和按钮等。jQueryMobile 构建于 jQuery 内核之上,因此您可以访问关键设备,包括HTML 和 XML 文档对象模型 (DOM) 的遍历操作;事件处理;使用Ajax 服务器通信;以及 Web 页面的动画和图像效果。
有了jQuery Mobile,您就可以轻而易举地编写基础 Web 应用程序。由于jQuery Mobile 是一个非常全面的基础架构,提供了一些高级事件和API,所以您还可以编写高级移动 Web 应用程序和网站
官方网址为:http://jquerymobile.com/(官网有各种效果的列子和代码api)
三、开发环境搭建示例(Android
1、环境说明

 

        本文介绍的开发工具是Eclipse,但也有做前端得使用Dreamweaver5.5
+PhoneGap开发的,但公司装不上PhoneGap没法尝试这样的开发,就先用Eclipse将就一下吧。
2、添加PhoneGap开发包及js

 

     在Eclipse中创建新的Android项目:TestJqueryForMobile,在assets目录下面创建文件夹www,再在www文 件夹下面创建css和js文件夹,将在PhoneGap官网下载的包解压找到cordova.js文件复制到刚才创建的js文件夹中,将 DroidGap-2.9.1.jar文件添加到libs中并buildpath。
3、添加Jqueryfor mobile js库和css

 

    解压在Jquery for mobile官网下载的包,将css下面的文件和文件夹复制到刚才创建的assets/www/css/目录下,将js下面的文件和文件夹复制到刚才创建 的assets/www/js/目录下。到现在我们在Eclipse上开发跨平台应用的环境就已经搭建好了。如下图:
file:///C:\DOCUME~1\yyl\LOCALS~1\Temp\msohtmlclip1\01\clip_image002.jpg

4、
编写一个页面

 

   下面我们通过用Html编写一个Jquery提供的界面风格的程序界面,并通过PhoneGap调用系统本地api拍照,取照片。
        先在assets/www/目录下面创建一个html文件:index.html,并用jquery绘制界面,在项目的 MainActivity.java中继承DroidGap.java(来自于DroidGap-2.9.1.jar)并在onCreate方法中载入 assets/www/index.html文件。
MainActivity.java中的代码段:
    @Override
    public void onCreate(BundlesavedInstanceState)
    {
        super.onCreate(savedInstanceState);
        super.loadUrl(“file:///android_asset/www/index.html”);
    }
Index.html中的代码段:
    <scriptsrc=”js/jquery.js”></script>
//载入jquery的js库
    <scriptsrc=”js/cordova.js”></script>
//载入PhoneGap的js库
    <scriptsrc=”js/jquery.mobile-1.3.2.min.js”></script>
//载入jquery for mobilejs

 

5、效果:

 

file:///C:\DOCUME~1\yyl\LOCALS~1\Temp\msohtmlclip1\01\clip_image004.jpgfile:///C:\DOCUME~1\yyl\LOCALS~1\Temp\msohtmlclip1\01\clip_image006.jpgfile:///C:\DOCUME~1\yyl\LOCALS~1\Temp\msohtmlclip1\01\clip_image008.jpgfile:///C:\DOCUME~1\yyl\LOCALS~1\Temp\msohtmlclip1\01\clip_image010.jpg
     

四、
优劣势分析
优点:

 

1、 上手迅速并支持快速迭代。
2、支持跨平台和跨设备开发。
3、解决系统碎片化,主要针对Android。
缺点:

 

1、比原生程序运行慢。
2、有限的能力。
总结
    总的说来,使用JQueryMobile和HTML5作为手机应用开发平台是可行的。然而,这并不适用于(至少到目前为止)所有类型的应用程序。对于简单的内容显示和数据输入类型的 应用程序(相对的是需要丰富多媒体/游戏程序),它是对原生程序一个有力的增强。
在接下来的1-2年中,随着硬件变得越来越快,手机设备越来越多样化,相信HTML5(JQuery Mobile,PhoneGap, 等等)在手机应用开发中会成为更加重要的技术。
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏