`
cyber4cn
  • 浏览: 39406 次
社区版块
存档分类
最新评论

转载:PhoneGap新手必读

阅读更多

 

多PhoneGap新手总是需要一些基础问题的解答,Adobe技术布道师Andrew Trice常在其博文中回答诸如” PhoneGap是什么?”、“phonegap应用开发出来是什么样的形态?”、“如何开发phonegap?”等问题。近日他将这些问题回答整理成文以帮助开发者理解和使用PhoneGap。

1. PhoneGap是什么?

PhoneGap是一个基于HTML和JavaScript的应用开发平台,使用它可以构建本地应用。你可以把PhoneGap看作一个正方形的web view container,它使用JavaScript编程接口实现用户在不同操作系统下的访问。你可以利用传统的web开发技术(如HTML、CSS、JavaScript )开发用户接口,利用PhoneGap容器把它们部署到不同的应用环境和设备上。
PhoneGap可以被用来开发跨平台的应用,这些平台包括Apple iOS、 Google Android,、Windows Phone、BlackBerry、 HP WebOS,、Symbian 和 Bada。你可以通过链接
http://phonegap.com/about/features获取更多关于PhoneGap支持的平台及其特色功能的信息。

PhoneGap是一个开源的框架,用户可以去http://incubator.apache.org/projects/callback.html获取更多信息。

2.开发出的PhoneGap应用是什么样的形态?

由于UI绘制引擎就是移动设备的内置web浏览器,所以PhoneGap应用的形态可能多种多样。你可以使用标准的HTML&CSS使它看起来就像一个简单的网页,也可以使用UI框架使它像jQuery UI, Kendo UI, Sencha, Twitter Bootstrap或Skeleton(或者其它任意基于HTML/CSS/JS的用户框架接口)。另外你也可以采用CSS模式/主题使它看起来就像一个本地应用,如模仿iOS 和 Android的iUI,模仿BlackBerry的bbUI。
PhoneGap应用可以是基于HTML的静态UIs,也可以是利用JavaScript开发具有动态效果和交互体验动态UIs。这取决于特定的应用、用户体验设计、受众目标以及指示PhoneGap应用如何出现的应用实例。
使用PhoneGap应用,你可以通过缩小放大操作放大或者缩小查看的内容,或者利用利用viewport metadata tag锁定浏览内容的大小。你可以利用常规浏览器的操作方式滚动浏览网页也可以像iScroll一样采用基于接触的滑动方式浏览网页。
基于HTML, CSS & JavaScript你有许多方式可以创建用户接口,所以并没有一个典型的外观。如果你没有使用任何的CSS模式,那么用户接口各元素默认和使用的操作系统或者浏览器保持一致,包括按钮、链接、色彩以及亮度。这时PhoneGap应用和操作系统默认的浏览器一样运行。

3. 如何利用PhoneGap开发应用?
利用PhoneGap开发应用非常简单,90%的PhoneGap应用只需要一个文本编辑器即可。PhoneGap也能很容易的与特定的设备整合形成开发环境。具体可以参考以各应用平台上的开发指导链接:
• http://bbs.phonegapcn.com/topic-start.html

在开发PhoneGap应用应用时 ,一定要谨记你是在web浏览器实例中运行代码。你是利用HTML和JavaScript开发应用而不是本地代码,因此不需要其它任何东西。实际上我的大部分开发都是利用HTML编辑器和Chrome浏览器实现的。当我需要在设备上做测试的时候再切换到特定的设备环境。

4. 如何调试PhoneGap应用?

调试PhoneGap应用是PhoneGap开发过程中最棘手部分。只在物理设备上测试,并不能测试出所有的JavaScript异常。下面是一些具体的调式策略:
尽可能利用桌面浏览器调试
由于PhoneGap应用是利用HTML, CSS, and JavaScript进行开发的,你可以利用HTML编辑器开发大部分应用然后利用桌面web浏览器调试。最新版本的web浏览器(包括Chrome、IE、Firefox、 Opera 和Safari)都提供了丰富的调试功能。利用web浏览器开发工具,你可以检查HTML DOM元素,检查CSS的模式、设置JavaScript断点、检查内存和JavaScript变量。通过下面链接可以获得更多更多关于桌面浏览器开发工具的信息:
•    Chrome Developer Tools:http://code.google.com/chrome/devtools/docs/overview.html
•    Firefox via FireBug: http://getfirebug.com/
•    Safari Developer Tools: https://developer.apple.com/tech ... eveloper-tools.html
•    IE Developer Tools: http://msdn.microsoft.com/en-us/ie/aa740478
•    Opera Developer Tools: http://dev.opera.com/articles/view/opera-developer-tools/
你一旦利用桌面工具开发了应用的主要功能,便可以切换到特定的设备环境增加特定的设备功能并与PhoneGap APIs整合。
利用真实设备进行测试是必不可少的。利用真实设备测试可能获得不同于桌面浏览器和模拟器的性能,也可以发现不同的bug和问题包括API的不同和UX脚本的不同。
用debug.phonegap.com调试
利用debug.phonegap.com可以进行远程的基于设备的调试。利用Weinre调试工具你可以远程检查DOM、测试资源下载、检测网络使用、检测时间线以及控制台输出。如果你已经使用了上述列出的开发工具,就会发现它们看起来很相似。只是你不能在移动设备上设置断点,但是肯定比什么都没有强。
利用iOS5进行远程web调试
利用iOS5模拟器实现远程调试只需要开通远程调试功能即可。然后利用iOS5桌面模拟器发布应用。一旦应用运行它就会打开一个本地Safari实例http://localhost:9999/。这将启动远程调试工具,完成断点设置和脚本测试。
通过连接http://hiediutley.com/2011/11/22 ... fari-web-inspector/你可以获取更多信息。
其他调试信息
通过下面链接你可以阅读更多关于PhoneGap应用应用的调试信息:
•    http://phonegap.com/2011/05/18/debugging-phonegap-javascript/
•    http://wiki.phonegap.com/w/page/ ... g%20PhoneGap%20Apps

5. 如何部署PhoneGap应用?

部署PhoneGap应用和创建移动设备web是一样的,唯一不同的就是PhoneGap应用程在本地初始化HTML设置而不是远程服务器。PhoneGap应用加载初始化的HTML,它可以用来申请服务器或者本地上的资源。由于PhoneGap是基于浏览器的,可以像浏览器一样运行。你可以同时下载各种网页但是一旦你下载或者关闭一个网页很可能丢失通过JavaScript脚本存储在内存中的数据。PhoneGap也支持单页浏览模式,建议用户使用单页浏览模式。
单页浏览模式部署
单页浏览架构就是指只有一个HTML页基于数据和用户输入进行动态更新,你可以把它看做是客户/服务器模式,由一个客户应用和一个服务器组成。客户应用可以请求数据或者进行更新而不用重新加载web页。
通过使用单页浏览模式你可以维护内存中的数据。通过如下链接可以了解更多关于单页模式的知识http://en.wikipedia.org/wiki/Single-page_application
可以利用任意常见的JS架构如Angular, Ember, Backbone, Mustache部署PhoneGap 应用。

6.如何使PhoneGap应用在移动设备和应用环境中运行?

对每一个给定的平台而言,PhoneGap应用采用和本地应用相同的规则部署,你必须遵守每一个应用平台的部署规则。你可以利用每个平台的构建过程为这个平台编译可执行文件也可以利用build.phonegap.com进行编译。build.phonegap.com是可以为每个平台编译使用时具体平台的应用的服务。构建过程的输出是适用于一个特定平台的二进制文件:适用于iOS的IPA,适用于Android的APK。通过下面链接你可以获得更多信息:
•    iOS App Store: https://developer.apple.com/programs/ios/distribute.html
•    Google Android Market: https://market.android.com/publish
•    Amazon App Store: https://developer.amazon.com/welcome.html
•    BlackBerry App World: https://bdsc.webapps.blackberry.com/devzone/appworld
•    Barnes & Nobe Nook Store: https://nookdeveloper.barnesandnoble.com
•    Windows Phone Marketplace:http://msdn.microsoft.com/en-us/library/ff941089(v=vs.92).aspx

7. PhoneGap和AIR的区别是什么?

PhoneGap和AIR最根本的不同就是你利用Flash平台(如Flex, Flash, ActionScript, MXML)开发AIR应用而基于HTML, CSS, & JavaScript开发PhoneGap应用。AIR应用利用AIR开发环境运行,这样应用只需要一个代码基便可以在所有它支持的平台上运行,PhoneGap可以在每一个它支持的平台上的浏览器上运行。由于这个原因,不同的平台可能有不同的代码基,在开发PhoneGap应用时需要考虑这一点。
可以在iOS、Android、BlackBerry Playbook和desktop (mac and windows)包括上Windows Metro开发AIR应用。通过下面链接可以了解更多关于AIR支持的平台的信息。
http://www.adobe.com/products/air/tech-specs.html
ActionScript动作脚本语言支持传统的继承编程模式。可以使用Flex框架构建AIR应用,这使得开发者可以快速的构建企业类应用。AIR应用中的组件是具有行为、属性和图形上下文的逻辑客体。
基于JavaScript的应用支持原型继承编程,有许多开源框架和工具可以被使用。HTML/JS通过HTML DOM元素实现可视化。虽然利用JavaScript模板可以创建HTML接口,但是实际上你只是创建了具有属性和模式的DOM元素。
虽然两者构建应用的语法不通但是基本的交互式设计和交互式开发的概念却是一直的。两个开发平台各有优缺点。
接下来做什么?
你可以去链接http://phonegap.com/ 下载PhoneGap并开发,当然你也可以去链接 http://phonegap.com/apps查看其他人开发的应用。

中文原文:http://bbs.phonegapcn.com/thread-971-1-1.html
英文原文:http://www.tricedesigns.com/2012/02/14/what-is-phonegap-other-common-questions/

分享到:
评论

相关推荐

    使用指南:PhoneGap的CordovaWebView组件在Android原生项目中使用.

    使用指南:PhoneGap的CordovaWebView组件在Android原生项目中使用. 1.下载phonegap2.0, 1.1 从解压文件中“phonegap-phonegap-2dbbdab\lib\android”中可以看到以下文件: cordova-2.0.0.jar、cordova-2.0.0.js和...

    CMDN CLUB#16期:PhoneGap的架构与开发

    深入PhoneGap跨平台开发框架的内部,探索PhoneGap框架的架构、实现、细节。

    phonegap:phonegap项目

    以上是对"phonegap:phonegap项目"的详细解析,涵盖了PhoneGap框架、JavaScript编程、跨平台开发以及相关工具和流程的关键知识点。通过学习和实践这些内容,开发者可以构建出能在多种移动设备上运行的应用程序。

    phonegap入门经典源码

    PhoneGap入门经典源码是针对初学者的一份宝贵资源,旨在深入浅出地介绍PhoneGap这一跨平台移动应用开发框架的基础知识。PhoneGap允许开发者使用HTML、CSS和JavaScript来构建原生的移动应用,覆盖iOS、Android、...

    phoneGap1.0

    这个资源可能对那些寻求早期版本PhoneGap开发经验的人特别有价值,因为官方网站上可能不再提供这些旧版本的下载。 PhoneGap的核心概念是“Write Once, Run Everywhere”(一次编写,到处运行),它通过一个中间层将...

    buildapps:phonegap构建应用程序

    这个“buildapps: PhoneGap构建应用程序”主题主要关注如何利用PhoneGap技术将Web应用转化为可在不同移动平台上运行的本地应用。PhoneGap的核心理念是通过Web技术打破平台间的壁垒,提供跨平台的开发能力。 ...

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

    1. 安装 PhoneGap:下载并安装 PhoneGap 的开发环境。 2. 创建项目:使用 PhoneGap 创建一个新的项目。 3. 编写代码:使用 HTML、CSS 和 JS 语言编写应用程序的代码。 4. 配置项目:配置项目的文件和设置。 5. 运行...

    PHONEGAP入门经典源码

    PhoneGap的出现使得Web开发者无需学习Objective-C、Java等平台特定的编程语言,就能将他们的Web技能应用于移动应用开发,极大地拓宽了开发者的视野。 **PhoneGap的核心概念** 1. **跨平台开发**:PhoneGap基于...

    Phonegap 2.9.1

    这个版本是PhoneGap历史上的一个重要里程碑,它支持多种移动操作系统,特别是针对Android平台的开发。PhoneGap的核心理念是通过提供一个中间层,将Web技术与移动设备的硬件功能相结合,从而简化跨平台应用开发。 在...

    最强手机编程外观类库(包含HTML5&javascript;):PhoneGap 电子书

    PhoneGap类库使用入门英文电子书 PhoneGap is a growing and leading open-source mobile web apps development framework that lets developers build JavaScript and ...

    phonegap 桌面版6.3.0

    PhoneGap的核心理念是通过WebView技术将Web应用程序与原生设备的功能相结合,使开发者无需掌握多种原生编程语言即可实现多平台的移动应用开发。 PhoneGap的主要特点包括: 1. **跨平台开发**:PhoneGap支持Android...

    Phonegap_API_中文版

    本资源"Phonegap_API_中文版"是一份详细的PhoneGap开发指南,主要针对中文用户,旨在帮助开发者更好地理解和利用PhoneGap的各项API功能。CHM文件是一种常见的Windows帮助文档格式,其中包含了丰富的信息和教程,方便...

    深入浅出 phonegap 代码

    本资料包“深入浅出 PhoneGap 代码”显然旨在帮助开发者更全面地理解PhoneGap的工作原理和实际应用。 PhoneGap 的核心组件包括: 1. **Cordova**: PhoneGap 基于 Apache Cordova,这是一个开源的移动设备API库,它...

    hello-phonegap:phonegap教程

    PhoneGap教程:构建跨平台移动应用 PhoneGap是一款开源框架,它允许开发者使用HTML、CSS3和JavaScript来创建原生的移动应用程序。由于其基于Web技术,PhoneGap为开发者提供了便利,无需学习Objective-C或Java等平台...

    phonegap-978-1-7852-8531-8:PhoneGap 举例

    这个压缩包文件 "phonegap-978-1-7852-8531-8:PhoneGap 举例" 可能包含了一系列关于使用 PhoneGap 开发移动应用的实例和教程。 PhoneGap 的核心理念是通过包装 web 应用为原生应用,使其能在 iOS、Android、Windows...

    Phonegap-app-test:phonegap 游戏演示

    这个“Phonegap-app-test”项目显然是一个用 PhoneGap 开发的游戏示例,旨在展示如何利用 PhoneGap 的功能在不同平台上运行游戏。 在 Java 标签的背景下,PhoneGap 使用 Java 的子集,即 JavaScript,来编写应用...

    PhoneGap开发者指南源码

    这个"PhoneGap开发者指南源码"显然是一份详细的教学资源,旨在帮助开发者理解和掌握如何利用PhoneGap进行跨平台应用开发。下面我们将深入探讨PhoneGap的核心概念、工作原理以及如何利用它来创建移动应用。 **...

    PhoneGap-2.9.0

    PhoneGap的核心理念是利用Web技术开发原生应用,通过一个中间层将Web应用与各个操作系统的API连接起来,从而实现对设备硬件功能的访问,如摄像头、GPS、联系人列表等。这一版本发布于2013年,是PhoneGap发展历史上的...

    PhoneGap:PhoneGap 项目

    这个“PhoneGap 项目”可能是一个包含 PhoneGap 示例代码、教程或者是一个实际应用的开发源码库。由于标签是“Java”,这可能意味着在 PhoneGap 的基础上,项目可能也涉及到与 Java 后端服务的集成。 PhoneGap 的...

    FindTube:PhoneGap 应用程序

    Find The Tube 是与 PhoneGap 一起开发的概念验证应用程序,以地理定位方式显示伦敦地铁实时信息。 这是一个开源应用程序,请随时查看代码和/或为我们的项目做出贡献。要求PhoneGap(需要 Ant)安装安装以下插件: ...

Global site tag (gtag.js) - Google Analytics