腾讯广告平台产品团队谈PhoneGap使用

原文：http://www.infoq.com/cn/news/2013/01/tencent-ad-department-phonegap

“HTML5状况及发展形势报告”回顾了2012年HTML5的发展历程，并预测了2013年的趋势，就报告看来HTML5在移动终端领域将会有大的发展。在进行跨移动终端的应用设计时，开发者普遍会选择一些框架来处理业务无关的技术细节，本期我们采访到了腾讯广告事业部设计中心总监董霙，请他和他的团队谈下在使用移动开发框架PhoneGap时的感受。

InfoQ：首先请介绍下团队背景和成员？

董霙：我们的团队隶属于腾讯OMG网络媒体事业群下的广告平台产品部，主要负责腾讯网平台上的日常广告项目设计工作，以及新广告产品的研发。 目前团队拥有13个成员，分散于北京，上海，广州三地。其中设计师10人，程序员3人，虽然平均年龄不到30岁，但大部分人都有8-10年的互联网设计或开发经验，算是一个经验丰富又充满活力的集体。

InfoQ：目前团队中PhoneGap的应用现状是怎样的？

董霙：我们的团队平均每年产出300多个互动创意广告作品以及3-5款新APP产品。2012年我们尝试使用PhoneGap开发了多款移动客户端的APP，其中2款已应用于商业活动中，分别是“北大青鸟我是博士后-互动问答游戏应用”与“万圣节更衣室应用“。后者的案例我们在12年的中国广告长城奖中获得铜奖，并在《PhoneGap实战》一书中写了完整的项目开发介绍，2013年，我们计划加大移动客户端的互动创意推广力度，PhoneGap也必将在未来一年对我们的工作贡献更大的力量。

InfoQ：选择PhoneGap做移动产品开发的技术选型方案是如何确定的？它和其他的框架对比有哪些优势？

董霙：技术选型方案上主要依据以下2点：

• 学习与开发成本：PhoneGap 使用的核心语言是JS，团队里的程序员都有JS经验，这对于他们来说学习成本无疑降低了很多。开发一个简单功能APP，从设计到开发完成，一般只需用到半个月时间左右。
• 平台兼容性：PhoneGap开发的APP只需编写一次APP的功能核心代码，即可发布到多个平台。真正实现多平台全面覆盖。

它和其他的框架对比有哪些优势：

• 支撑平台数量最多： PhoneGap 支持当前大多数的主流平台除了 iPhone，Android 外还支持 BlackBerry，Symbian，Palm，Window Phone。
• 代码可操控性较高：PhoneGap 采用了 HTML + CSS + JavaScript 作为其编程语言，同时对 HTML5 和 CSS3 提供了相应的支持。除此PhoneGap 包含了DOM特性，PhoneGap 可以用jQuery等第三方库。
• 发展前景明朗：PhoneGap被 Adobe 收购后，无疑有了更强大的技术支持后盾，相信未来会有更好的发展。

InfoQ：在使用PhoneGap开发产品的过程中遇到哪些令人抓狂的地方？是如何解决的？

董霙：

提高性能：

PhoneGap的性能主要依赖于webkit浏览器的内核解析能力，所以它的运行效率必定弱于原生。同时webview无法释放占用内存的问题也是一个导致性能较差的重要原因。为了提高APP性能，优化JS是必须要做的工作，主要依靠以下2方面进行优化：

首先选择较小的框架-XUI，XUI与 jQuery比较，文件更小，效率较高，语法与 jQuery 接近。

其次通过对选择器的各种语法的性能分析进行测试后，我们发现，最快的选择器是id选择器和元素标签选择器；较慢的选择器是class选择器；最慢的选择器是伪类选择器和属性选择器。所以在对DOM操作的时候一定要选择最快的id或者标签选择器。

通过以上2点，可从 JS 上入手优化APP的性能。

另外说一个小技巧直接在APP内打开外网URL，而不是用系统默认浏览器打开： PhoneGap APP 页面中如果尝试访问的是外网链接，系统会使用默认浏览器打开，如何直接在APP页面打开？除了使用ajax外，可以采用在 res/xml/cordova.xml 中配置 URL 白名单，在该文件内配置后，就都可以实现在APP页中直接跳转。配置规则范例，如下：

<!-- <access origin="https://example.com" /> 允许访问example.com 域名下的链接-->
<!-- <access origin="https://example.com" subdomains="true" /> 同上，但包括子域，例如www -->
<!-- <access origin=".*"/> 允许访问任何域名，建议只在开发中才用-->

InfoQ：我们看到团队最近出了一本书《PhoneGap实战》，写这本书的目的是怎样的？这本书主要关注哪些方面的内容？

董霙：写这本书的主要目的有两个，一方面是通过写作这种方式细致的梳理一遍PhongGap的功能和开发技巧，对我们过去的工作进行一次总结；另一方面，考虑到移动互联网的快速发展，大家迫切希望了解更多的移动产品设计研发技巧，我们认为PhoneGap作为一款强大的工具值得推荐给同行们，希望通过这本书跟更多的开发者进行交流。

这本书相对与市面上的其他PhoneGap教材的最大特点，也是我们在写作过程中一直在着力突出的点就是“接地气”。我们不光要介绍基本的功能点，解释用法，告诉大家“PhoneGap是什么”，而且要通过大量丰富而生动的例子来告诉帮助大家学会实际项目中“怎么用”。这些实例有的是为本书专门制作的，有的就直接是我们在过去一年中为广告主量身定做的真实案例，希望初接触PhoneGAP的人通过阅读相关的章节，能对移动端的产品开发有一些直观的认识。另外本书非常适合想掌握移动应用开发技术的设计师学习和参考，通过使用Adobe Edge Animate和phonegap可以在很短的时间内上手移动应用的开发。

InfoQ：团队内部是如何做移动产品开发的？有哪些标准和规范？请针对重点的考量指标进行介绍。

董霙：移动端的产品开发，既是对传统PC端的产品开发方法的继承，也有一定的个性特点。宏观来看，还是遵循调研-原型-成品的顺序，在实际项目进行过程中，我们会更加关注用户在移动设备上的操作体验优化，移动端设备在这个方面给我们的产品提出了更高的要求，同时也提供了更多可能。针对不同的平台和设备需要在产品规划上有全面考虑。Phonegap在这点上非常有优势，结合响应式布局可以很快速的实现多终端多设备的适配。

InfoQ：在开发的项目中，有很多用到了PhoneGap和Air的结合，对于Air，希望看到哪些方面的改进和提升？可以列举3-5点。

董霙：之前团队使用 AIR 开发了基于 iOS 平台 iPad设备上运行的电子杂志APP。现在正使用AIR 开发一款广告产品APP。通过一段时期对AIR的开发使用，我们觉得 AIR 整体上已相当出色。AIR 继承了 Flash 在桌面平台上的易用、高效的特点。它在移动设备原生特性支持上亦相当给力，iOS 和 Android 平台上常用的原生特性基本支持（未支持特性可通过ANE进行拓展），同时 AIR 3.6 的最新版本，在运行效率上也比之前的版本有了很大提高。但也有一定的改进空间，以下几方面的改进和提升还是非常希望能尽快看到：

• 加快 iOS APP 的标准打包速度。
• 更好地支持使用 Retina 屏幕分辨率所开发的APP。
• 增强 StageWebView 和air内部的通信及交互功能以及提升StageWebView渲染外部网页的性能。
• 基于 ActionScript 手机项目开发的APP能提供更多接近原生UI的交互组件，例如：下拉更新功能组件；Swipe 滑动及拖动组件。

InfoQ： 如何看待Flash和HTML5的发展和应用现状？对于这两种技术的适用领域有哪些建议？

董霙：

Flash和HTML5的发展和应用现状？

自从苹果禁止Flash在其iOS浏览器上运行以后，很多人说“Flash已退出舞台，HTML5才是未来”。但当前的事实是Flash依旧有很强的生命力。直到今天可以说，包括iOS平台在内，Flash对于各个平台的支持都是最佳的。最近2年，我们除了看到Flash在桌面浏览器优势依旧以外，还目睹了许多利用 AIR开发的优秀移动原生APP 和利用 Stage3D API 建立的强大3D 应用。相信Flash在移动应用开发和 Web3D领域上未来会做得更好。

而HTML5作为新一代的WEB规范，定义了新的元素标签让Html代码更加规范；可以直接在 HTML 代码中嵌入音频和视频；包含全新的 API，可以轻松实现拖放、文件编辑、绘图等功能；对移动设备的支持能力越来越高。同时它得到了各大IT公司的鼎力支持，在未来也会有广阔的发展前景。

对于这两种技术的适用领域有哪些建议?

Flash 理应不断提高 AIR 移动原生APP 的运行效率，同时降低APP的能耗，并且开发出更好的移动应用组件给开发者使用，从而继续保持其在移动原生APP上的优势。在 Web-3D 领域内继续深化 Stage3D API，优化与提高3D引擎的功能与性能，同时希望在flash ide工具中增加有关3D操作的组件，让开发者能更高效地创建出画面更炫、性能更佳的 3D 应用。

HTML5对移动特性的支持力度也越来越强，在iOS5以上的设备上运行性能也有了明显提升。当前移动浏览器开始更多地支持这些新特性，例如触摸事件、加速度、地理位置等移动原生特性。但由于HTML5基于Open Web的出现，这导致不同浏览器对于 HTML5 的兼容性与支持性都会有差异，同时老式的桌面浏览器对 HTML5 的支持很弱，淘汰还需要一个漫长的过程。基于兼容性的原因，目前团队主要利用HTML5来设计与开发基于移动浏览器上的网页与应用。在最近的项目中，团队利用HTML5、CSS3结合响应式网页设计技术为某品牌汽车创建了响应式的互动活动网站，响应式网页设计能让网页在不同分辨率大小的设备上呈现最佳的视觉效果。同时有着较好的向下兼容特性，随着HTML5在移动浏览器的平台上越走越好， 我们相信基于HTML5 与 CSS3技术的响应式网页设计也会使用的更加普遍，可以说它将会是网页设计的一个趋势。另外我们了解到Adobe正在开发基于响应式网站的全新制作工具，也期待可以尽早使用上，提升效率。