腾讯广告平台产品团队谈 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 正在开发基于响应式网站的全新制作工具，也期待可以尽早使用上，提升效率。