写点什么

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

  • 2013-01-22
  • 本文字数:3752 字

    阅读完需:约 12 分钟

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 正在开发基于响应式网站的全新制作工具,也期待可以尽早使用上,提升效率。

2013-01-22 05:5022192
用户头像

发布了 89 篇内容, 共 33.0 次阅读, 收获喜欢 4 次。

关注

评论

发布
暂无评论
发现更多内容

CQ社区版 v2024.10 | 支持k8s、helm部署!

BinTools图尔兹

k8s Helm 数据安全 数据库管理 CloudQuery

Java EasyExcel 导出报内存溢出如何解决

不在线第一只蜗牛

Java 内存

腾讯云的相关DDoS攻击问题概览

网络安全服务

腾讯云 服务器 DDoS 腾讯云服务器 DDoS 攻击

浅谈运营商政企存量客户运营

鲸品堂

大数据 产品运营 运营商 企业号 2024年10月PK榜

聊聊jvm的内存结构, 以及各种结构的作用

EquatorCoco

Java JVM 开发语言

掌握数据,赢得市场 —— 淘宝商品详情API让电商运营更精准

技术冰糖葫芦

API 接口 API 测试 API 协议 API 优先

鸿蒙生态崛起,开发者如何抓住这波“红利”?

最新动态

最好学的编程语言一览,建议收藏

高端章鱼哥

8大主流全生命周期项目管理工具对比

爱吃小舅的鱼

全生命周期项目管理工具

袋鼠云产品功能更新报告12期|让数据资产管理更高效

袋鼠云数栈

代码审查不足?教你改善流程的策略

爱吃小舅的鱼

代码审查

哪些项目管理软件值得一试?9款推荐清单

爱吃小舅的鱼

项目协同进度软件

云电脑的性价比高么

青椒云云电脑

云电脑

到底什么学历可以胜任程序员?

秃头小帅oi

深度解读GaussDB逻辑解码技术原理

不在线第一只蜗牛

数据库 oracle

资源成本降低60%,揭秘Serverless的省钱秘籍

华为云开发者联盟

容器 运维 #Serverless CCE

倒计时1天 | 袋鼠云秋季发布会明日10:00开幕,我们云上见!

袋鼠云数栈

汇聚全球智慧·共绘软件蓝图,2025北京软博会

AIOTE智博会

软博会 世亚软博会 北京软博会

Laravel后台极速开发框架 - 集成日历组件

YangGe

laravel

ppt文字描边怎么设置?用这2个软件轻松制作!

职场工具箱

职场 PPT 办公软件 AI生成PPT

团队沟通技巧:管理层与技术人员的协作之道

爱吃小舅的鱼

团队沟通技巧

2024年中国IT用户满意度调研结果公布

Geek_2d6073

淘宝商品类目API的获取与应用探索

科普小能手

API 接口 API 测试 淘宝API接口 淘宝数据采集 淘宝评论API

专业的RAW转换器Capture One Pro 21 for Mac

Mac相关知识分享

图像编辑器

利用 Vector 将 Kafka 中的日志数据高效写入 GreptimeDB

Greptime 格睿科技

kafka 时序数据库 vector

《一篇就够系列》之HTTP详解,覆盖高频面试考点!

EquatorCoco

面试 网络协议 HTTP

Java面试最常见的1309 道 BAT 大厂 java 面试题(附答案分享)

采菊东篱下

java面试

实现员工职业目标与项目目标对齐的策略

爱吃小舅的鱼

目标对齐

如何选择项目管理软件?8款工具详解

爱吃小舅的鱼

项目管理软件

阿里巴巴商品搜索API返回值中的关键信息点

技术冰糖葫芦

API 接口 API 测试 API 协议 API 优先

【活动预告】Apache TsFile 干货总结在 COSCON'24 等你~!

Apache IoTDB

腾讯广告平台产品团队谈PhoneGap使用_HTML5_水羽哲_InfoQ精选文章