IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

初识PhoneGap

阿里巴巴(中国站)用户体验设计部博客 2012-04-12 13:34:32 累计浏览 2,929 次
本机暂存

    一、PhoneGap是什么?

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

    PhoneGap由Nitobi 公司创建,并于2011.10被Adobe收购,并捐赠给Apache基金组织,PhoneGap是唯一的一个支持7个平台的开源移动框架。框架提供了丰富接口用于访问移动设备本地API,能够让你用javascript轻松调用。当前最新版本:1.5。原图已失效

    目前开发移动程序框架选择很多,如PhoneGap、Titanium、MonoTouch、Native App,兼容性越强的技术,成本越低,性能越差;兼容性越差的技术,成本越高,性能越好。PhoneGap是目前最被看好的:

  •  兼容性:完全做到了Written Once,Run Everywhere!
  • 标准化:PhoneGap采用W3C标准,Web App直接运行!
  • 采用普通web开发技术:JavaScript+HTM5+CSS3。
  •     存在不足:

  • 性能,正常操作速度流畅,频繁操作响应会变慢。
  • 稳定性及资源占用方面,手动频繁操作会引起,响应速度变慢,webkit的WebView不能很好释放内存,导致内存占用上升,甚至会引起应用的crash。
  •     二、PhoneGap如何工作?

        PhoneGap架构拥有强大的跨平台访问设备能力,但是其工作原理并不神秘,iPhone和Android平台共同点是都有内置的WebView组件,其具备两个特性:

  • WebView组件实质是移动设备的内置浏览器
  •     WebView这个内置浏览器特性是Web能被打包成本地客户端的基础,可方便的用HTML5、CSS3页面布局,这是移动Web技术的优势相对于原生开发。

  • WebView提供Web和设备本地API双向通信的能力
  •     PhoneGap针对不同平台的WebView做了扩展和封装,使WebView这个组件变成可访问设备本地API的强大浏览器,所以开发人员在PhoneGap框架下可通过JavaScript访问设备本地API。

        原图已失效

    PhoneGap与设备本地API通信图

        一个成熟的PhoneGap技术客户端运行状况:应用运行在WebView组件上 -> 通过PhoneGap在各平台的扩展 -> 最终访问设备本地资源。

        原图已失效

    PhoneGap架构图

        三、API指南

    Accelerometer点击进入设备的运动传感器。 Events通过JavaScript截获本地事件。
    Camera使用设备的摄像头采集照片。 File通过JavaScript截获本地文件系统。
    Capture使用设备的媒体采集应用程序采集媒体文件。 Geolocation使得你的应用程序可以访问地理位置信息。
    Compass获取设备指向的方向。 Media录制和播放音频文件。
    Connection快速检查WiFi或蜂窝网络的信息。 Notification设备的视觉、声音和触觉提醒。
    Contacts和设备联系人数据库相关操作。 Storage截获设备的本地存储选项。
    Device收集设备的具体信息。

        四、参考资料

        1、Javascript移动开发框架

  • jQuery Mobile:http://jquerymobile.com/
  • jQTouch:http://jqtouch.com
  • Sencha Touch: http://mobile.51cto.com/Sencha-278623.htm
  •     PhoneGap + 合适的javascript开发框架,轻松开发出原生风格的移动应用。选择哪种js框架,你可以通过:《三大移动Web开发框比较分析》一文,选择适合的框架。

        2、PhoneGap社区

  • PhoneGap官网:http://phonegap.com/
  • PhoneGap中国社区: http://www.phonegap.cn
  • PhoneGap中国: http://www.phonegapcn.com/
  • 51CTO专题(跨平台移动web中间件PhoneGap开发入门) :http://mobile.51cto.com/hot-273792.htm
  • 同分类推荐文章

    1. 「置顶」我做了什么 (2026-05-05 12:13:28)
    2. 万字长文推演:手机不再从 App 开始,Agent OS 如何接管任务入口 (2026-04-28 14:57:22)
    3. Android Perfetto 系列 10 - Binder 调度与锁竞争 (2025-11-16 15:33:30)

    查看更多 移动开发 文章 →

    建议继续学习

    1. JQuery实现Excel表格呈现 (累计阅读 48,349)
    2. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
    3. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,404)
    4. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,933)
    5. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,848)
    6. 天朝第二代身份证号码的验证机制 (累计阅读 14,762)
    7. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
    8. 分享一个JQUERY颜色选择插件 (累计阅读 14,223)
    9. 什么是全栈工程师? (累计阅读 14,038)
    10. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)