`
xinlanzero
  • 浏览: 251769 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Phonegap:快速开发跨平台HTML5应用的胶水层

阅读更多

在开发移动应用的过程当中,如果你的应用只定位在一种平台上,这可不是一个好主意,但是为许多不同的平台Building应用又是一件非常麻烦和非常不爽的事情,因为你会发现每一种手机平台都有自己的SDK,它们需要使用不同语言来进行开发,你可能不得不需要5、6个代码仓库来管理不同设备上的代码,而且需要不同设备的开发人员来开发维护这些仓库,你还不得不装上各个设备的sdk,设置好路径和各种配置信息,来编译不同设备上的应用包。
那么移动网站模式是不是一个可以接受的替代方案呢?幸运的是移动应用和移动网站并不是对立的两端,通过Phonegap我们可以采用html5的网站形式来开发移动应用。也许开源Phonegap 会成为 WebApp 上设备端开发的事实上标准,ShowMuch本期就为你推荐移动开发利器:PhoneGap。
我们先来看看PhoneGap的特性:

  • 支持6种移动设备平台:iOS, Android, BlackBerry, WebOS, Symbian WRT, Windows Mobile(内部测试),以及桌面环境(内部测试)
  • HTML5 + CSS3 + JavaScript  利用标准的Web技术开发应用
  • Phonegap Build: write once, compile on cloud, run anywhere. 提供在线Builder平台:只写一次,云端编译,运行在任何地方
  • 目前已经有上千基于Phonegap的应用在AppStore上
  • Phonegap 目前标注的版本依然是0.9.x,phonegap的功能特性并不稳定,会有不少bug,要小心。

开始玩

首先自然是需要下载 phonegap: http://www.phonegap.com/

然后你还需要相应设备的SDK

针对iPhone:

  1. Apple Developer Portal 下载安装 XCode.
  2. 解开下载好的phonegap压缩包,进入iphone目录安装好phonegap
  3. 打开XCode,在文件菜单选择 New Project…. 菜单
  4. 点开“User Templates”栏,选择Phonegap,然后选中右边的“PhoneGap-based Application”,点击“Choose…”按钮,命名你的项目,选择项目文件的位置.

针对Android:

  1. 下载安装 JDK 1.5
  2. 下载安装 Android SDK
  3. 下载安装 Apache ANT
  4. 下载安装 Ruby (命令行方式开发需要)
  5. 解压已经下载好的 PhoneGap, 进入android 目录,my god,最新的0.9.4ZIP包中没有命令行创建项目的方式,好吧,你需要从最新的仓库中把代码取出来: git clone https://github.com/phonegap/phonegap-android.git
  6. 命令行方式(Droidgap)脚本的开发者没有修改路径以配合新的0.9.4版本,这是这次在发布中被拿掉的原因吧。需要自己改改,蛮简单的,就不多说。
  7. 将 android下的bin目录 加入你的搜索 path:
    UNIX/LINUX的机子: export PATH=$PATH:~/phonegap-android/bin
    在windows下将phonegap-android/bin 路径加到Path中就不用多说了。
  8. ok,在命令行下输入 “droidgap gen demo”,即可创建phonegap支撑的html5应用项目。
  9. cd demo;ant debug install 即可安装到设备或模拟器
  10. adb logcat 在控制台查看设备的输出日志

使用PhoneGap来创建移动App应用:

打开项目的www目录(android是在项目的assets/www目录下),编辑index.html,在body中键入<h1>hello world</h1>(你也可以加上js和css文件在这个目录下面),保存,然后你就可以首先部署到模拟器上看看。

也许你会说,哈,这不就是网页嘛!是的,这就是网页,不过通过phonegap,这样的网页应用就有能力访问设备的所有功能:文件系统,GPS,相机,重力加速度计,电话簿等,当然不同的设备支持的功能会有所不同(目前phonegap还不能支持完所有的功能,具体看各个设备支持的特性列表)。另外要想呈现和移动应用一样的外观,你还需要选择一种HTML5 Mobile UI Framework库,这样的Framework库已经很多了: Sencha Touch, JQTouch, JMobile, XUI, The-M-Project,Dojo Mobile, dhtmlxTouch, wink, jo, webapp.net…

Phonegap Build

除了在本地编译应用之外,您还可以使用Phonegap提供的云端Build工具进行应用编译。那就是:Phonegat Build,通过它,您只需要将用HTML5写好的应用上传到Phonegap的云端服务器,它即可以帮你编译不同平台平的应用。

Part of the phonegap build status screen for an app, showing downloads and errors

Phonegap Build 当前Phonegap Build依然处于beta状态,你需要申请,等到通过方可使用。另外推荐一个Chrome的插件,Ripple Emulator 可以在Chrome浏览器上测试你的应用,支持phonegap。

(文章作者:李雪愚,盛大创新院高级架构师,雪愚对于使用Phonegap有着丰富的经验,曾用Phonegap开发基于Android和iOS的应用。编辑BY:Handaoliang)

分享到:
评论

相关推荐

    html5+phonegap跨平台移动应用开发

    html5+phonegap跨平台移动应用开发

    在Android平台下搭建PhoneGap开发环境--用HTML5开发游戏[参考].pdf

    PhoneGap是一个基于HTML5标准的跨平台开源手机Web应用开发框架,它允许用户通过Web技术访问移动设备的本地应用、API接口及应用程序框架等。PhoneGap现在更名为Cordova,它提供了丰富的API接口供开发者使用,使开发者...

    客户端软件GUI开发技术漫谈:原生与跨平台解决方案分析.docx

    #### 跨平台软件应用开发技术 **Electron** - **简介**:Electron是一个由GitHub开发的框架,允许开发者使用HTML、CSS和JavaScript来构建跨平台的桌面应用程序。 - **特点**:易于上手,可以复用大量前端技术栈中的...

    基于PhoneGap跨平台移动开发框架的研究与应用

    快速发展的移动互联网技术使得移动终端成为实现对...针对这种情况,提出采用HTML5及PhoneGap等技术,解决移动网站、App、微信端的研发差异性。最后,搭建完整地系统技术架构,并以网站购物为例验证跨平台移动建站的可行性。

    PhoneGap 构建跨平台移动应用

    PhoneGap是一种开源框架,它允许开发人员利用HTML5、CSS3和JavaScript来构建原生的移动应用程序,同时实现跨平台兼容性。这个技术的核心理念是将Web开发的技术与移动设备的原生功能相结合,使开发者可以使用熟悉的...

    构建跨平台appHtml5+phonegap开发

    本教程将深入探讨如何利用HTML5技术和PhoneGap框架来构建这样的跨平台应用。 HTML5是现代网页开发的基础,它引入了许多新的功能和API,使得开发者能够创建更具交互性和动态性的网页。这些特性包括离线存储(Web ...

    跨平台的PhoneGap应用

    PhoneGap是一款基于HTML5标准的跨平台开源手机应用开发框架。它允许开发者利用Web技术(如HTML、CSS和JavaScript)来访问移动设备的本地API和应用程序接口。PhoneGap通过将移动设备提供的API进行抽象和简化,提供了...

    入门必看:用PhoneGap开发手机应用程序(android,iPhone等)

    PhoneGap 是一款开源的开发工具,它允许开发者利用 HTML、JavaScript 和 CSS 这些Web前端技术来构建跨平台的移动应用程序。PhoneGap 开发的主要优势在于它的跨平台性,覆盖了包括 Android、iOS、BlackBerry 在内的多...

    关于html5开发框架PhoneGap的移动开发调研

    PhoneGap是一个基于HTML5、CSS3和JavaScript的开源框架,专为构建跨平台移动应用程序而设计。它允许开发者使用熟悉的Web技术创建应用,同时能够访问智能手机的各种核心功能,如地理位置、相机、联系人、文件系统、...

    基于phoneGap的跨平台应用的源码

    这个“基于PhoneGap的跨平台应用的源码”提供了在寒假期间创建的一个项目实例,它展示了如何利用PhoneGap的特性来开发一款能够运行在不同操作系统上的应用。 PhoneGap的核心是它能够将Web技术转化为可在移动设备上...

    跨平台开发技术-PhoneGap从入门到精通3

    跨平台开发技术-PhoneGap从入门到精通(PhoneGap、罗盘、运动传感器、地理位置

    iOS 使用PhoneGap 开发HTML5 的APP

    总之,PhoneGap为iOS应用开发提供了一条便捷的道路,让开发者可以用熟悉的Web技术构建跨平台的应用。尽管它简化了开发流程,但理解原生iOS开发的基本概念仍然是很有帮助的,因为这将有助于解决PhoneGap无法覆盖的...

    构建跨平台APP HTML 5+PhoneGap移动应用实战

    构建跨平台APP HTML 5+PhoneGap移动应用实战

    phonegap开发示例服务器端开发

    PhoneGap 是一种基于 HTML5、CSS3 和 JavaScript 的开源框架,允许开发者构建跨平台的移动应用程序。通过PhoneGap,开发者可以编写一次代码,然后在多个操作系统上发布,如 iOS、Android、BlackBerry、webOS、Bada、...

    PhoneGap 手机应用开发平台 v1.5.1

    PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,...

    PhoneGap移动应用开发框架预研

    PhoneGap是一种开源的移动应用开发框架,它允许开发者使用HTML5、CSS3和JavaScript来构建原生的移动应用程序,这些应用程序可以跨多个操作系统运行,包括iOS、Android、Windows Phone等。PhoneGap的主要目标是打破...

    跨平台phonegap项目

    PhoneGap是一款跨平台的移动应用开发框架,它允许开发者使用HTML、CSS和JavaScript来构建原生的移动应用程序。PhoneGap的核心是基于Apache Cordova,它提供了与设备硬件功能交互的API,如摄像头、地理位置、 ...

Global site tag (gtag.js) - Google Analytics