关于PhoneGap的12件事：基础介绍

CMDN Club第十六期活动已于3月24日顺利举行，本次活动以“跨平台开发框架PhoneGap入门与实践”主题，本次活动将聚焦这把“瑞士军刀”：PhoneGap。来自Adobe的技术经理董龙飞，向大家介绍，PhoneGap赢得如此多Web开发者青睐的原因、在Web开放方面的优势、工作原理，以及一些开发实践。

图：Adobe技术经理董龙飞

以下是文字实录：

董龙飞：我是Adobe开发者董龙飞，今天我的演讲主题是关于PhoneGap的12件事：基础介绍。我以前做FLEX开发的，也做过销售。现在我主要做的前端开发，因为原来我也是做FLEX，包括Adobe有很多基于一些工具有很多东西，我们今天借助其中一个PhoneGap。

因为可能很多人了解这个PhoneGap，也有很多人不了解PhoneGap， PhoneGap是什么？

好多人来这里都知道PhoneGap。PhoneGap是一个帮助我们利用这个平台进行移动平台跨平台开发的工具，或者是叫一个框架也好。但是实际上PhoneGap帮助我们做三件事：

第一件事情帮我们打包。比如说做了一个小的Web应用，你自己处理多平台、多尺寸的适配，一旦适配好之后，PhoneGap可以帮助你打造成不同平台的应用。你可以看到下面是它支持不同的平台，这里面最重要我们开发者涉及到比较多就是iOS和Android。

第二件事情就是当你要为移动设备开发应用的时候，我们只是本地应用，当然你需要访问移动设备很多本地化的特性或者功能。比如说摄象头、比如说我们访问移动电话里面的电话簿很多类似的功能，这个时候PhoneGap帮助你通过标准的接口，提供你访问本地特性的接口。PhoneGap框架提供一系列的接口为你服务。实际上在每一个设备上，或者每一个平台上，这些特性都不一样，而且这些特性不断快速的发展。

第三件事情比如说我们今年会有很多设备带NFC，那样PhoneGap本身提供的接口没有这种NFC接口。或者有一些设备索尼有一些设备是双屏，这时候是本地独特的特性，PhoneGap也不能支持。甚至有时候进行大图片处理，或者在Web应用里处理图片，PhoneGap大规模运算量高性能不是很多，这个时候你就需要有一个框架能够让你来挂接你自己进行扩展。PhoneGap我们提供了一个PLUGIN，你可以写自己本地的CALL，就可以写在自己的WEB应用上。

PhoneGap不包括什么呢？

PhoneGap如果我们做过开发，我们知道PhoneGap本身做应用不提供任何基础的框架，比如说做应动应用很多人用现在市场上一大堆开源的框架，UI框架、CSC框架、MBC的框架这个不面向移动，PhoneGap不是任何框架，PhoneGap只是完成我们刚才那几种，当你自己开发自己的移动应用的时候，你可能需要使用自己CSS库，我可能使用一套UI的框架，可能选一套MBC的框架，PhoneGap不提供所有的框架，仍然需要自己选择不同的框架，编好自己基于Web还是Web App。你开发PhoneGap应用的时候，你需要选择自己的ID。

PhoneGap是怎么来的呢？

PhoneGap是Adobe收购的一家公司，你比较好了解PhoneGap，PhoneGap在2008年当时还没IPAD，所以在旧金山针对iPhone的一个Club活动，在这个活动上，有几个工程师和FLEX自由职业者设计师实现这样一个IDEA，他的意思就是说我怎么能够使用Web技术调用iPhone的SDK，为了实现这个目的。然后就在这个平台上实现一些基础的代码，发到社区里面，结果这个IDEA非常受WEB开发者的欢迎，立刻非常火热，发展到现在。现在PhoneGap能够支撑不仅是IPHONE平台，还可以支持很多其他的平台。AIR是你用FLASH开发，你在iOS或者是Android，就是很多开发游戏的用这个技术。

所以我们看一看，我们第一眼看到PhoneGap在平台上的不同特性。PhoneGap发布到1.5版，1.5版是3月初刚刚发布。在发布1.4的时候PhoneGap正式支持Window Phone 7。实际上它每一个本地的支持，他也是以插件的形式提供，只不过有些是自己开发，有一些是在社区上。

这是他支持不同平台，一会儿我们看一下简单的例子。我们讲一下Cordova，Adobe收购了PhoneGap以后，Adobe就把它贡献给了阿巴奇基金会了，刚贡献给阿巴奇基金会的时候你在网上查名字叫CALLBACK，后来他们觉得这个名字比较太过于野性，后来把这个名改了，改成CORDOVA，CORDOVA是原来公司的地址的一个街名。这是一条街，就是那个公司在的地址。现在PhoneGap是一个开源项目，在这个PhoneGap里面有很多公司为这个CORDOVA贡献CALL，包括IBM，一开始在里面贡献了非常非常多的CALL。但是大家公认PhoneGap一开始来自这个公司的，但是后来成了一个社区公开的项目。实际上PhoneGap的名字仍然保留，它是由于一些法律问题实际上阿巴奇基金会这个名字就叫CORDOVA。在未来发展的时候你可以把PhoneGap看成是CORDOVA开源项目的一个发布版。Adobe也有计划在整个PhoneGap下面，除了基础的代码框架，也会不断加入不同的服务和工具。

打包：打包有三种方式，可能不止三种方式，但是我一直主要介绍三种。第一种方式就是用DW，你可以打开本地的DW，你有这么一个项目之后，你可以往里引任何代码，可以引各种各样的内库，编写完了以后里面有一个命令菜单，直接点击就可以直接把你的项目编译程APK或者iOS，当然也可以在模拟器里让你预览，但是前提是你把这个配制好。你刚入门的话用DW非常方便。但是DW只支持iOS和Android平台，所以很多人用手动打包。

很多人用ECLIPSE对SDK，你可以到PhoneGap网站上针对每一个平台都有一个开发者入门手册，告诉你针对每一个平台怎么配。比如说对于PhoneGap怎么配，比如说针对IOS都有不同的平台。另外一种就是说如果支持平台太多，我不愿意手工编，手工编Adobe有一个服务叫PhoneGap Build，你需要把你整个WEB的CALL，把整个目录结构按你的项目布置好，你在PhoneGap Build设一个号，你告诉希望打包到哪几个平台，你要是打包到IOS平台，你就告诉PhoneGap Build把这些信息提供上去。PhoneGap Build把这些东西都打包，给你生成一个页面，你就可以直接下载下来，自己去提交。甚至说也可以直接帮你提交到不同的应用商场里。

我们现在来看一下怎么访问本地的功能。你可以到PhoneGap网站，有一个比较好的文档，在这里面可以点击每一个文件，里面有对应的API。这是从里面摘录的一个，这是完整的HTML页面，专门来介绍如何利用PhoneGap访问手机运动传感器。实际上你可以看到Before1.4，这是1.4版本和1.4版本之前的写法。你可以看到其中几部分，因为就是一个标准的HTML页面，第一要引出一个PhoneGap.JS，然后你来指定deviceready事件，这个事件是PhoneGap自己抛出来的事件，抛出这个事件就说明把整个条件和体系好了，你就侦听这个事件，在这个事件你要自己设定镇定器，实际上这就是PhoneGap提供对应API接口访问本地的运动传感器的，当然可能是IOS的传感器，也可能是ANDROID。在PhoneGap整个体系里面到处都是CALLBACK，很好的反应了PhoneGap整个体系到底是怎么工作的。接下来你就自己在你这两个函数里面，通过事件获取PhoneGap通过本地代码返带来的接口，就很简单。这是一个比较完整的PhoneGap。每一个API都不一样，所以你需要自己来看。这是1.4的版本。

到1.5的版本就不一样了，这是刚刚下的1.5的版本，在这个1.5是针对不同的项，在这里面你可以看到JS文件名叫CORDOVA。实际上用1.5版本的话，其他的没什么变化，但是你引用SRC其实就是CORDOVA了。

刚才讲了一个比较简单的入门就是PhoneGap支持不同平台，我们怎么用PhoneGap访问这些本地特性。到底PhoneGap本质是什么呢？实际上PhoneGap本质我们可以从PhoneGap起源看到，PhoneGap一开始起源目的叫连接iOS TK连接这个鸿沟，PhoneGap很多工程师非常多的黑客，我去美国开会，听PhoneGap工程师来讲课，穿了一个T恤衫，他们就是非常黑客的那种情况。如果你看PhoneGap在不同平台实现的原理都是不一样的，你可以看到通过本地，因为在很多情况下，IOS和ANDROID平台没有提供很好的接口，所以PhoneGap通过不同方式帮你解决这些问题。

什么是PhoneGap？

最重要就解决了一个问题，就是解决你的JS和你Native他们之间的通讯问题或者是调用问题。怎么样使用JS来调用Native，基本上解决这样问题，只要解决了这个问题，其他问题都解决了，没有别的事情了。

如果我们落实到整个移动平台上，它是怎么来做的呢？我们刚才看的实际上覆盖面解决的就是JS和Native一个互相调用或者是通讯问题。在移动平台上所有的它包裹成PLUGINS在不同平台上Native WEB Control。Native WEB Control是什么呢？我们知道我们是做WEB应用的，WEB应用都是通过浏览器，我经常会跟好多开发者瞎说，浏览器和FLASH没有什么大区别，FLASH就是有一个编器。普通用户用的时候他认为浏览器就是带边框，有一个UI地址栏。但是每一个移动设备都有Native WEB Control，这个Native WEB Control就是一个全功能浏览器，但是没有边框，没有上面UI地址栏，但是实际上就浏览器。在移动设备上实际上仍然是运行在浏览器里面。

我们可以看一下怎么手工打包，如果你自己做过这个ANDROID开发的时候，它会生成一个应用接口，你要把它生成的默认积类，你要扩展他这样一个类。你整个页面把你WEB站点和应用首页出来，剩下就是WEB操作一样，所以它做的事情很简单。这是1.4以前。

这个怎么通过PhoneGap来给本地打包，在iOS又是另外一个样，你可以自己去看iOS的GAP。我们下面看一下PLUGIN。

怎么做一个PLUGIN呢？

如果自己手工做，你先看自己的LIBS应用，你要新建一个文件。你要在主文件里面改它的积类，积类改好了之后加入了主页，我们做插件要用这个PhoneGapJAR包。很重要一点你在打包这个文件或者做插件的时候，在XML里面有一个PLUGINS.XM，这里面有很多插件，包括你自己用的插件写完了以后要在这里面注册。最后看到我编写Android Manifest.xml，所有的权限要写在这里面。在1.5版之后，不同的就是这个JS文件和这个JAR包对应不同。

我们看一下怎么做插件，实际上当你做一个插件的时候，你要用本地的CALL写一些本地的脚本，把这个功能让其他WEB人员能够调用。我们可以看到在我这个代码例子里面创建了一个PLUGIN，每一个PLUGIN完成不同的List Actions。接下来你要覆盖一个方法，这个是PLUGIN提供的一个方法就是执行的一个方法，你复制这个PLUGIN方法里面，你要针对用户传进来的Actions，你要有不同的方法。然后下面还有一个设计，这个是我整个对于实现这个PLUGIN。

我们现在做了一个PLUGIN，这是所有的CALL，接下来下面我们要在JAVA这个里面做注册。我们要把做好的PLUGIN注册到PLUGIN文件里面，你可以看到一开始的PLUGIN这是文件里面原来就有的，这个文件里面APP、Geolocation 、Device你可以看到它对应的类，因为这都是开源的，可以看它怎么实现。我们做PLUGIN怎么注册呢？非常简单还是这个格式，做一个PLUGIN的标签，你为你自己的PLUGIN起一个名字，然后你要告诉PhoneGap说，我的这个名字对应是我哪一个Java，所以这个名字不需要和Java的名字一样，因为是通过这种方式进行注册。这个注册完了。这是在Java环境里面全实现了，你做了一个Java类，然后你把结果反馈回来，接下来你注册在PLUGIN这个文件里面。

我给Java做完了，下面就是说你要把做好的PLUGIN暴露出来让JAVASCRIPT文件，我这个你得加入这个LIST方法，当别人调用的时候这是你做的JAVASCRIPT接口，所以其他人调用你这个接口，然后给他传参数，他需要传是你调这个方法设定的回调函数，这是第三方JAVASCRIPT方法传进来的，在你这个LIST方法里面你就调用PhoneGap.EXEC，这就是PhoneGap到CS的里面一个方法，你一查CALL就知道了。我调用这个方法的时候，我调用的是这个插件，用这个插件调LIST。还没完，你还需要在JAVASCRIPT里面做插件，把你的插件放进去就完了。当你调用PhoneGap.ADDPLUGIN的时候，这里面加了一个数组，其他人调用的时候在这个数组里面寻找，知道你调的是什么不同的PLUGIN。

使用的人怎么调呢？

实际上我NEW一个这个加进去了。其他使用者调用你PLUGIN，叫WINDOW.PLUGINS，在这个数组里面有一个Callslisting，然后到LIST，传递给他回调函数，成功的回调函数和成功的回调函数，这个R和E是JAVA返回来，会在事件对象里面，你通过R和E来获得这个对象，这就是实现一个插件来做。

你可以到PhoneGap站点上非常清楚怎么来做这个PLUGIN。我今天讲这个PLUGIN不是告诉各位怎么做PLUGIN。我是想通过PLUGIN这个机制来给各位解释在ANDROID到底怎么调用？

刚才他调用的是我这个对象的PhoneGap提供给我们JAVASCRIPT的方法，我们告诉他调用哪一个PLUGIN，这个PLUGIN实际上就是我们当时在JAVA里面，这个PLUGIN当时JAVA那一端注册在PLUGINS.里面的这个名字，在JAVA说你调用这个名字是知道哪一类，然后他知道你调哪一个EXEC是调用哪一段，他就调用PLUGIN EXECUTE。这里面最诡异就是它怎么从这儿调到这儿来了？而且这儿结果返回来之后怎么就返回到我事件对象里面去了，这是它真正解决的地方。

所以我们看看它怎么实现JS和本地交互，我们以Android，以Android为例实际上做了两种方式，第一种你会知道当你在Android，实际上在PhoneGap里面他自己搭建了有一个内嵌HTBB，一启动就工作，通过内部的HTBB实现内部的沟通。

我们看一下它到底怎么做的？我们可以按以前的例子？一旦第三方调用我们LIST方法的时候，这个方法是从邮件上切下来了，一旦调用的时候，当然传回回调函数的值，这个里面会调一个名字，一个JSON命令，还有PROMPT，在弹框的时候根据一定的模式把这个数据写在弹框里面，如果你不做任何形式，用户就看到这个框了，PhoneGap不能让这个框弹出来，但是一旦弹出对话框，在JAVA那一边你就可以通过本地的对象就获取有弹框这个事件，我们在每一个PhoneGap启动应用类里面都覆盖了积类叫DROIDGAP，在这个DROIDGAP里面就直接覆盖了这个JSPrompt，在这个事件里面就不会弹框了，在这个代码里面直接调用PLUGINManager.EXEC。PLUGIN Manager也是一个类，所以这个时候就在这个里面，通过你传递不同的PLUGIN名字，就在里面找到底调哪一个PLUGIN，因为你所有的PLUGIN都是基于PLUGIN的积类，所以在你这个里面调用PLUGIN，最终调用是你自己实现的PLUGIN的方法，传递不同的参数，最终回调到你在JAVA的PLUGIN里面。但是有可能是异步、有可能是同步。

我现在调到JAVA里面了，下面我就想把这个数据返回给JS，这一段就是，一旦调用CDX.JAVASCRIPT，我们知道WEB应用最擅长就是SERVER连接，在这里面通过这种内嵌的方式。比如说我要读本地的通讯录长的话需要花一点时间，这个时间不是同步，是异步，所以通过SERVER把这个返回去。

在iOS实现方式又不一样了，在赛宾实现方式又不一样。IOS设备是这么做的，我没看，文档上自己写的，可以自己去看。在一些BLOG上有一些介绍。首先也是用这样个VIEW，他可以调一个DOCUMENT，把你调的类和对应方法和参数按照这种格式写上去，在NATIVE就返回去，具体怎么做你可以看CALL，所有CALL都是开源的。

下面花十分钟的时间我介绍介绍调试，因为我们在座都是做Web开发的，做WEB开发有一个很悲催的方式就是调试，你在桌面调试就是浏览器的开发工具，但是你要调试移动设备这就困难了，移动设备没开发者工具。现在好多人如果关注这方面，听说这个项目叫WEINRE，WEINRE就是让你在桌面一个环境里面，可以远程调试你移动设备上的WEB应用，或者是WEB站点。我们看看怎么做？我直接演示一下，因为你上网一搜就可以查到，我自己BOLG针对WEINRE的介绍。

你可以看到现在我起动了JAR WEINRE绑定了一个地址，就是说我把这台机器作为DEBUG的运行调试机，在我这个机器上运行。现在运行起来了，一旦运行起来之后，在这里面会告诉你让你访问一个地址，然后我们在浏览器里面访问它，那么这就是你的DEBUG SERVER，你就要测TARGET，比如说这台机器是我的SERVER，是TARGET，你可以自己搭一个DEBUG SERVER。我们现在可以做一个例子。这个例子里面可以看一下我的机器。你可以看到在我这个机器里面这是我的DEBUG SERVER的客户端，这是我的设备，比如说假设我们以这个为DEMO，访问这个DEMO。这个DEMO叫192.168.43.149，我可以输入这个DEMO，这里面有一个DEBUG，当我在这个ELEMENTS，我在这里选择的时候，可以看到我选择不同的节点，比如说我要改它，叫BLUE，COLOR叫RED，你可以在这里调试，当然你可以说直接输入OLERT，就在移动设备上自动弹出来，你也可以在多个设备上进行调试。这样可以在桌面上调试站点，如果用到本地的存储了，可以看到本地对应的网络、本地存储的值、数据库都可以看到。但是现在目前来讲还不支持断点。

你如果需要调试的话，需要加入一个代码，叫SCRIPT SRC，如果公司有很多人用就可以自己加一个ID。如果你是用PhoneGap，你可以在在页面里面加入这样一个代码，PhoneGap启动的时候也是可以的。比如说我们看一个例子。在我这里面关掉，我启动，这是我自己做的一个特简单的一个DEMO。这个DEMO通过我们刚才看到的PLUGIN，然这个例子列出来，这就是PhoneGap的应用。在这里面可以对它进行调试，我可以改名字任何地方都可以改。比如说我点这个CALLS就可以把所有打的电话列出来，那你也可以改。这还挺麻烦的实际上，因为我如果为WEB做不是为一台做，要为多台做，每一个都玩这么一遍也够受的。

那Adobe出了一个叫Adobe Shadow。Adobe Shadow就是帮助在不同平台上做测试的，Adobe Shadow分为几部分，第一部分有客户端，首先在你的桌面上有一个客户端，比如说我们启一下，这是客户端，你装的时候要装一个客户端叫Adobe Shadow，你双击它就启动了。启动了之后现在只支持IOS和ANDROID。在我这个里面我点中这个CONNECTIONS，今天我这个内网有点问题，一旦你配制完毕以后，你每次做测试的时候在你本机来做，它就会自动的，比如说按照我的页面，在你本机运行这个GPS应用的时候，或者你访问不同的页面的时候，就会自动把你这个页面同步到所有的DEBUG设备上，不需要一个个输入。你可以看到现在它多了一个设备，多了一个EVANGELISM，我如果在这个设备上，在这个页面上点击这个BULL，你不用做任何操作在这个PAD就可以进行。比如说我点一个STOP，就退出来了。所以如果有多台设备，可以通过桌面远程控制所有的设备。如果说你要调试的话，可能针对某一台设备调试，就可以制定我点XB为这个设备调试，就点击这个括号，它就启动这个设备。

Adobe Shadow现在有一些限制，现在只能支持浏览器。还有每次来这个页面访问的时候，比如说我切了一个屏幕，可以看到我在这儿做了一些效果，或者比如说拖拽到这儿来，在这个屏上没变，现在只是配制时间，一旦我这个调试机器变换的时候，如果触犯不是这个配制的话，它不会变。这还是一个实验阶段。

最后一个实际上就是CORDOVA最后一点，CORDOVA和PhoneGap1.4之前的版本有一个非常重要的区别，如果你感兴趣就可以看到，在CORDOVA代码非常多的这样的代码，这叫VAR CHANNEL，这就是MB，就是基于模块的开发。我刚才给各位演示的就是卖手机的站点，你可以看到PhoneGap写程序的时候页面就是一个配制，你不会开一个新的配制。PhoneGap现在一个配制一个完整的应用。不是所有的JS文件和对应资源是一开始就需要的，因为你用大了以后需要用好多不同的资源，如果程序一开始加载的时候全写在脚本里面，你这个程序启动非常慢，现在基于模块化的JS开发，它的概念是通过DEFIN和REQUIRE，你可以DEFINE一个模块，一个模块就是一个JS对象，或者是一个类，或者是一个文件，这个你自己来决定的。你所有的代码写在这里面，当其他地方要用的时候，就说REQUIRE，你通过CHANNL来应用。这样在JS里面可以进行模块化进行开发。在PhoneGap之前没有这个事情，在1.4版本之前，PhoneGap里面代码，PhoneGap工程师自己觉得比较混乱，不是特别整齐。现在越来越多利用DEFINE和REQUIRE，我相信未来整个方向也是基于这个。他们现在管这个项目叫CORDOVA2.0，你如果关心可以到PhoneGap或者是CORDOVA项目站点上有好多Bolg谈这个事情。谢谢大家！