关于PhoneGap的7件事

来源：互联网发布：电热毯水暖毯知乎编辑：程序博客网时间：2024/04/30 03:31

PhoneGap的背景知识。

一切源自iPhone。

2008年旧金山的iPhoneDevCamp上，来自Nitobi的工程师Brock Whitten、Rob Ellis和Andre Charland萌发并初步实现了一个想法：构建一个Web技术和Objective-C之间的桥梁，即让Web技术和Objective-C之间能够互联互通。通过标准的Web技术（HTML、JavaScript、CSS），开发者能够开发类似本地应用的iPhone程序。

这是一个标准之外的世界，通过非标准的类“黑客”方式，这种技术填充了Web和智能移动设备本地SDK之间的鸿沟。这个想法迅即获得了大量支持，并普及到了Android、Windows Phone、Symbian、黑莓、webOS和bada各个平台。

PhoneGap诞生了。

PhoneGap是什么

PhoneGap是为移动应用开发者准备的，使用HTML、JavaScript和CSS等Web技术创建跨平台移动应用的基于标准的开源开发框架。使用PhoneGap，Web应用开发者的开发范畴被进一步拓展到类本地应用（混合应用）的开发领域。总的来说，PhoneGap从以下三个方面帮助开发者。

打包：对于标准的Web应用，消费者需要打开移动设备上的浏览器，输入URL后才能访问。而PhoneGap可以打包Web应用为本地应用格式，比如iOS的ipa、Android的apk。对于消费者来说，通过PhoneGap打包的应用和使用本地SDK（比如iOS的Objective-C、Android的Java）开发的应用没什么区别。消费者需要到移动应用商店下载这些应用，安装运行。为了方便起见，在下文中我把这些使用Web技术开发、通过PhoneGap打包成本地格式的移动应用统称为“PhoneGap应用”。

访问智能移动设备本地特性：智能移动设备上的现代浏览器提供了一些本地特性的访问，比如GPS。然而，对于移动应用开发来说，需要能够访问更多的本地特性，比如设备摄像头、设备信息、通讯录等。

PhoneGap提供了诸多本地特性的JavaScript API接口，使得开发者使用JavaScript即可访问这些浏览器本身不能够支持的本地特性。

扩展插件：PhoneGap在不断推出访问本地功能的新API接口，但对于移动应用开发者，仍然可能需要访问一些PhoneGap尚不支持的功能，或者希望能够使用本地API来解决一些需要重度计算的功能。这时，PhoneGap提供了一套插件体系来帮助开发者定制扩展插件。事实上，标准的PhoneGap本地API也是以插件的方式提供的。通过插件方式，开发者可以使用平台指定的本地语言（例如Java）编写功能，并通过JavaScript把这些定制化的本地代码暴露出来供PhoneGap应用访问。

在不同平台上，PhoneGap1.3支持本地特性概览

PhoneGap不是什么

PhoneGap既不是JavaScript框架，也不是类似jQuery Mobile这样的移动应用框架，PhoneGap也不提供IDE环境。

开发者仍然需要依赖类似JQuery Mobile，Sencha Touch这样的第三方Web移动应用开发框架开发基本的Web移动应用。但PhoneGap支持这些移动应用开发框架。事实上，PhoneGap并不局限于任何一种JavaScript框架。

PhoneGap现状

截至本文发表时，PhoneGap的最新版本是1.4。2011年10月，Adobe公司收购了PhoneGap并将其贡献给Apache软件基金会，命名为Apache Callback。在经过正式审核和必要的流程前，PhoneGap仍处于孵化器阶段。在这个过程中，Apache Callback的名称近来再次变更为Apache Cordova。PhoneGap作为产品的商业名称仍然被使用。开发者可以在Apache和Github上访问PhoneGap的源代码【注：https://github.com/callback或https://svn.apache.org/repos/asf/incubator/callback/】。

打包

我们回到PhoneGap的第一个重要功能—打包。有三种不同方式打包生成PhoneGap应用。

使用Dreamweaver打包。Adobe Dreamweaver可以帮助开发者创建jQuery Mobile+PhoneGap的移动应用项目，如图2所示。

为了针对移动项目，Dreamweaver提供了一种一键式打包命令。然而，这种方式一方面目前只支持iOS和Android这两种移动平台应用；另一方面，开发者仍然需要先下载并配置平台对应的SDK。

使用不同平台的IDE和SDK打包。这种更加直接的打包方式是使用针对不同平台的IDE环境和对应的SDK手工打包【注：在PhoneGap网站的Get Started Guide上详细介绍了针对不同平台的打包指南http://phonegap.com/start】。

使用这种方式的话，不同平台的打包方式略有不同，开发者甚至需要自己编写打包代码，例如针对Android平台，并配置相关的配置文件和SDK。尽管这些步骤非常简单，但实际上对于那些希望能够覆盖尽可能多平台的移动应用开发者来说，这种方式还是非常烦琐。

使用PhoneGap Build服务打包。为了解决繁琐的打包问题，PhoneGap提供了在线打包服务：PhoneGap Build【注：连接为https://build.phonegap.com/】。

开发者需要注册账号，并上传代码到Github，在完成相关配置后，PhoneGap Build在云端直接编译打包Web应用为本地格式应用，甚至同时生成相关的应用二维条形码。

创建JQuery Mobile+PhoneGap的移动应用项目

使用PhoneGap访问本地特性

使用JavaScript调用PhoneGap提供的本地特性，就像使用任何标准的JavaScript类库。在PhoneGap官方网站上查看编写良好的本地特性API列表和代码示例【注：链接为http://docs.phonegap.com/en/1.3.0/index.html】，如图3所示。

我们摘录其中访问运动传感器（Accelerometer）的示例代码来做说明，代码中的注释解释了如何通过JavaScript访问PhoneGap本地API接口。

<!DOCTYPE html>

<html>

<head>

<title>Acceleration Example</title>

// 监听deviceready事件，等待PhoneGap加载完毕

document.

addEventListener(“deviceready”, onDeviceReady, false);

// PhoneGap加载完毕，监听运动传感器，设定成功和失败的回调函数（事件侦听器）

function onDeviceReady() {

navigator.accelerometer.getCurrentAccel

eration(onSuccess, onError);

}

// onSuccess: 成功得到当前在X,Y,Z轴的运动变

化值

function onSuccess(acceleration) {

alert(‘Acceleration X: ‘ +

acceleration.x + ‘\n’ +

‘Acceleration Y: ‘ + acceleration.y +

‘\n’ +

‘Acceleration Z: ‘ + acceleration.z +

‘\n’ +

‘Timestamp: ‘ + acceleration.

timestamp + ‘\n’);

}

// onError: 失败的事件侦听器

function onError() {

alert(‘onError!’);

}

</script>

</head>

<body>

<h1>Example</h1>

<p>getCurrentAcceleration</p>

</body>

</html>

本地特性和API代码列表示例

PhoneGap的本质

PhoneGap的本质解决两个问题：在移动设备上像本地应用一样运行Web应用；实现JavaScript和本地API之间的调用和通信。

在Android和iOS平台上，PhoneGap应用运行在WebView中，具体来说，在Android平台上，PhoneGap应用运行于WebView组件中，而在iOS上，则运行于UIWebView组件中。

WebView和UIWebView用来在移动设备上显示网页，二者都使用WebKit引擎。WebView提供了与浏览器同样的功能，但不提供浏览器边框。WebView方式下运行的Web应用，在用户看来就像本地应用一样。WebView封装了Web应用。下面的代码展示了如何在Android项目中使用Android SDK手工打包PhoneGap应用。

public class DemoActivity extends DroidGap {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

super.loadUrl(“file:///android_asset/www/index.html”);

}

在这个例子中，首先要继承DroidGap父类，并覆盖其onCreate方法。在该方法中调用super.loadUrl(“file:///android_asset/www/index.html”)来运行PhoneGap打包的应用首页。如果进一步深入查看PhoneGap源码，在PhoneGap提供的父类DroidGap.java中可以看到，DroidGap初始化时实例化了android.webkit.WebView，并在其loadUrl方法中调用WebView.loadUrl方法加载了指定的URL页面。

所以PhoneGap应用实际上就是运行在移动设备中WebView组件内的Web应用。

“黑客”的手段：JavaScript和本地API间的相互调用

PhoneGap解决的本质问题并不仅仅是打包，更困难的问题是如何实现JavaScript和本地API之间的调用和通信。PhoneGap的开发者根据不同的移动平台，采用了巧妙的方式实现了二者的相互调用和通信。

为了达到目标，PhoneGap团队在不同的平台上采用了不同的方式。

iOS：通过让本地代码拦截JavaScript中调用的window.location=”gap://Class.method/args”命令，来实现从JavaScript到本地代码之间的通信。在本地代码拦截该命令后，解析获取的参数，然后调用对应的类、方法并传递参数。对应的，使用UIWebView.stringByEvaluatingJavaScriptFromString来实现本地代码调用JavaScript。

Android：通过拦截JavaScript的prompt命令实现从JavaScript到本地代码的通信。JavaScript prompt命令默认会弹出对话框，而PhoneGap的Android本地代码会拦截该对话框，并进一步取得JavaScript数据。相应的，Android上的PhoneGap内部，使用Java实现了一个HTTP服务器，通过持久性的XHR连接，JavaScript可以不断轮询内部XHR服务器存储的信息，从而实现了从Java到JavaScript方向的通信。

BlackBerry 4.x：JavaScript与本地代码之间的唯一通信方式是通过document.cookie实现的。JavaScript设定Cookie，本地代码从Cookie中获取信息。对应的，本地代码也可以设定Cookie，允许JavaScript从Cookie中获取本地代码信息。

BlackBerry WebWorks：新的BlackBerry WebWorks SDK更好地支持了Java与JavaScript之间的交互通信。通过ScriptEngine.addExtension，Java对象可以被暴露给JavaScript，而对应的Java可以使用ScriptEngine.executeScript来调用JavaScript。

Windows Phone 7：在Windows Phone 7中，JavaScript通过window.external.Notify可以将信息发送给本地代码。而相应的，WebBrowser.InvokeScript允许本地代码调用JavaScript。【注：本节中主要内容基于博客：http://nullisnotanobject.com/phonegap-native-bridge】。

小结

PhoneGap为使用Web技术开发者打开了一扇新的大门，HTML、JavaScript和CSS成为跨平台移动应用开发中的一级语言。

更重要的是，PhoneGap延展了浏览器功能，提供了一个基本框架来实现浏览器本身没有提供的功能。甚至通过PhoneGap，我们可以把那些JavaScript无法承担的任务移交给本地代码完成，以达成更好的性能。这种面向跨平台移动应用的混合编程模式（Web技术+本地代码）能够提供更高效的开发速度和更高性能的应用。

作者董龙飞，Adobe公司开发者布道士，主要研究方向为前端技术和移动应用开发。

来源：关于PhoneGap的7件事.

Posted by ian at 02:12