你的分享就是我们的动力 ---﹥

支付宝触屏版项目总结

时间:2011-10-20 17:05来源:www.chengxuyuans.com 点击:

我习惯了每次做完项目后,将自己的心得写出来与各位分享,这次也不离外。
这次项目的总结本应该老早就写出来的,但一直忙的没有时间梳理。
7月份支付宝无线事业部发布了WAP支付宝触屏版(for iOS & Android OS),这是支付宝无线部门为iOS用户和Android推出的第一版本的WAP站点,我们为什么要开发触屏版?毫无疑问,一切为了用户!下面我们的触屏版用户首页截图:
支付宝触屏版首页
在这次项目中,我们把除支付宝生活助手以外的主业务基本全部做了适配,涵盖了消费记录的查询\账户的管理\充值\提现\红包等等。
我们总共花了一个月的时间,5位工程师的人力,完成了支付宝触屏版的设计与开发,当然这次项目还有很多不足的地方,我们正在一一的改进……。
就这次项目中前端工作量的占比无疑是最大的,因为这关系到整个站点的UI改造。因为这是我们第一个完全基于HTML5和CSS3搭建的站点,所以在整个项 目的开发过程中,可以说我们是边学习\边探索\边开发,完全带有试验性质的项目,因此我们通过这次项目的开发,我们当然也积累了一些比较有价值的知识。
为提高我们的开发效率,我们使用了jQuery 1.5.2做为该项目的底层框架,之后,我们有了一个基于jQuery的widget,再然后就是页面级和功能级的javascript了。
这个widget是整个站点的核心组件库,一开始我们准备借鉴YUI 3的Widget和Module设计思路来构建这个widget,但由于项目时间和其它的因素,最终我们只做了简单的封装。
某些复杂的功能模块,我们就单独构建了一个js文件来处理这块功能,以降低功能间的耦合。比如我们对消费记录\联系人管理以及红包管理三大功能,建了三个对应的功能级js文件。
在这次项目中我们也尝试使用了HTML5 Canvas来绘制个别Icon(当然,我们并不建议这样做,因为Canvas不是用来绘制Icon的)

支付宝触屏版添加联系人支付宝触屏版添加联系人支付宝触屏版收银台
支付宝触屏版收银台

在此我们推荐一个非常好的入门级HTML5 Canvas学习站点 html5canvastutorials
我们也借鉴了HTML5 History API(仅仅是借鉴,不是使用)完成了在数据列表页面中跳转页面时记录当前用户点击的行为。比如消费记录页面中,可能有很多条消费记录的数据,当用户点击 了其中的某一条数据时,浏览器会跳转到消费记录详情页面,这时我们已经记录下用户点击的是第几页,第几条数据了,在用户从详情页面回来时,我们会对他之前 点击过的那条数据做特殊的样式处理。
我们还针对iPhone4的用户做了图片高清处理(实际上,我们只处理了LOGO),我们是国内第一家站点支持iPhone4图片高清晰,你可以用 iPhone4访问m.alipay.com,仔细看一下支付宝的LOGO是非常高清的。了解更多iPhone4图片高清晰处理,可访问iPhone4图片高清晰
另外我们考虑到用户可能无意会把javascript功能关闭,所以我们又做了noscript处理,以提醒用户开启他的javascript方能正常使用手机支付宝。

通过这次项目,我们也给交互设计师和前端工程师提出几点建议:
1:不要频繁的使用动画。在手机操作系统中动画的性能并不理想;
2:尽量不要使用浮出层的交互方式。在个别Android平台中,浮出层并不能遮住下面的元素,也就是虽然浮出层显示了,但是它下面的元素依然可以获取焦点,并且可以点击,此现象主要表现在Android平台。具体的解决方案你可以访问我之前的一篇文章Android Webkit中CSS属性zIndex问题。
3:前端工程师在编写动画时,应该主要考虑动画的时间周期在300-500之间。
4:请勿频繁的对DOM操作,可以将其存储客户端的某个变量中。
5:善于使用-webkit-box布局模式。
6:对于含有试验性质的项目,在开发过程中切注意多沟通,不要随便下结论,更不要随便评估开发时间

本文地址http://www.chengxuyuans.com/web_technology/27172.html