PhoneGap介绍-白红宇

PhoneGap介绍

阅读量：5965 次

发布时间：2019-06-19

本文共 3877 字，大约阅读时间需要 12 分钟。

PhoneGap是一个基于HTML和JavaScript的平台，使用它可以构建本地应用。你可以把PhoneGap看作一个正方形的web view container，它使用JavaScript编程接口实现用户在不同操作系统下的访问。你可以利用传统的web开发技术(如HTML、CSS、JavaScript)开发用户接口，利用PhoneGap容器把它们部署到不同的应用环境和设备上。

PhoneGap可以被用来开发跨平台的应用，这些平台包括Apple 、Google,、、BlackBerry、HP webOS,、Symbian和bada。你可以通过链接

PhoneGap是一个开源的开发框架，用来构建跨平台的使用HTML，CSS和JavaScript的移动应用程序

一、PhoneGap能做什么?

1、基于Web技术开发移动设备客户端应用

用您熟悉的JavaScript、HTML技术，或者结合移动Web UI框架jQuery Mobile、Sencha Touch 开发跨平台移动客户端。

2、用PhoneGap访问设备本地API

提供跨平台设备访问能力，以下列出访问设备部分功能，本系列专题在以后文章中详解使用方法。

ACCELEROMETER(重力感应)

CAMERA(摄像机)

COMPASS(指南针)

CONTACTS(通讯录)

FILE(文件)

GEOLOCATION(地理定位)

MEDIA(媒体)

NETWORK(网络)

NOTIFICATION (通知)

STORAGE(Sqlite数据库存储)

3、发布您的程序到不同移动平台

Phongap Build 提供在线打包Web应用到各移动平台客户端的能力，下一篇文章实例介绍将本社区开源项目Sencha Touch 2 DEMO打包成Android平台APK文件的方法。下图是PhoneGap Build在线打包完成，并且提供下载的界面：

二、PhoneGap如何工作?

PhoneGap架构拥有强大的跨平台访问设备能力，但是其工作原理并不神秘，下面以iPhone和Android平台为例进行分析。

iPhone和Android平台共同点是都有内置的WebView组件，其具备两个特性：

1、WebView组件实质是移动设备的内置浏览器

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

2、WebView提供Web和设备本地API双向通信的能力

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

明白以上两个特性，参照下面PhoneGap与设备本地API通信图，一个成熟的PhoneGap技术客户端运行状况如下：

应用运行在WebView组件上 —》通过PhoneGap在各平台的扩展 —》最终访问设备本地资源

三、如何调试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

Firefox via FireBug

Safari Developer Tools

IE Developer Tools

Opera Developer Tools

你一旦利用桌面工具开发了应用的主要功能，便可以切换到特定的设备环境增加特定的设备功能并与PhoneGap APIs整合。

利用真实设备进行测试是必不可少的。利用真实设备测试可能获得不同于桌面浏览器和模拟器的性能，也可以发现不同的bug和问题包括API的不同和UX脚本的不同。

用debug.phonegap.com调试

利用debug.phonegap.com可以进行远程的基于设备的调试。利用Weinre调试工具你可以远程检查DOM、测试资源下载、检测网络使用、检测时间线以及控制台输出。如果你已经使用了上述列出的开发工具，就会发现它们看起来很相似。只是你不能在移动设备上设置断点，但是肯定比什么都没有强。

利用ios5进行远程web调试

利用iOS5模拟器实现远程调试只需要开通远程调试功能即可。然后利用iOS5桌面模拟器发布应用。一旦应用运行它就会打开一个本地Safari实例。这将启动远程调试工具，完成断点设置和脚本测试。

通过连接你可以获取更多信息。

其他调试信息

通过下面链接你可以阅读更多关于PhoneGap应用应用的调试信息：

http://phonegap.com/2011/05/18/debugging-phonegap-script/

http://wiki.phonegap.com/w/page/16494768/Debugging%20PhoneGap%20Apps

四、如何部署PhoneGap应用？

部署PhoneGap应用和创建移动设备web是一样的，唯一不同的就是PhoneGap应用程在本地初始化HTML设置而不是远程服务器。PhoneGap应用加载初始化的HTML，它可以用来申请服务器或者本地上的资源。由于PhoneGap是基于浏览器的，可以像浏览器一样运行。你可以同时下载各种网页但是一旦你下载或者关闭一个网页很可能丢失通过JavaScript脚本存储在内存中的数据。PhoneGap也支持单页浏览模式，建议用户使用单页浏览模式。

单页浏览模式部署

单页浏览架构就是指只有一个HTML页基于数据和用户输入进行动态更新，你可以把它看做是客户/服务器模式，由一个客户应用和一个服务器组成。客户应用可以请求数据或者进行更新而不用重新加载web页。

通过使用单页浏览模式你可以维护内存中的数据。通过如下链接可以了解更多关于单页模式的知识。

可以利用任意常见的JS架构如Angular,Ember,Backbone,Mustache部署PhoneGap应用。

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

对每一个给定的平台而言，PhoneGap应用采用和本地应用相同的规则部署，你必须遵守每一个应用平台的部署规则。你可以利用每个平台的构建过程为这个平台编译可执行文件也可以利用build.phonegap.com进行编译。build.phonegap.com是可以为每个平台编译使用时具体平台的应用的服务。构建过程的输出是适用于一个特定平台的二进制文件：适用于iOS的IPA，适用于Android的APK。通过下面链接你可以获得更多信息：

iOS App Store

Google Android Market

Amazon App Store

BlackBerry App World

Barnes & Nobe Nook Store

Windows Phone Marketplace

七、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支持的平台的信息。