1,手机网站对多样化移动终端的适配-淘宝无线实施经验分享,部门：无线事业部,日期：2011/07,2,About Me,Contact me = new Contact();me.setName(“朱中明/花名:泽胤”);me.setSinaWeibo(“edwardpro”);me.setImWangwang(“泽胤”);me.setMsn(“edwardpro”);me.setMail(“zeyintaobao.com”);me.setGmail(“edwardpro.zhugmail.com”);me.setQQ(“1689918”);You you = You.contact(me);,一些网站的实践,Sohu: 通过v参数切换 http:/wap.sohu.com/news/china/?nid=167,16&rid=NL223864775,ND310053978&sr=CL251&v=3http:/wap.sohu.com/news/china/?nid=167,16&rid=NL223864775,ND310053978&sr=CL251&v=4Kong.net 通过http:/kong.net/xiaoshuo/cd_html.jsp?k_id=27696814&pg=1&proxy=0&v=3http:/kong.net/xiaoshuo/cd.jsp?k_id=27696814&pg=1&proxy=0&v=3,实现思路,无论如何,我们只要一套结构,所以其他的问题我们通过调整css进行解决,优点:开发上比较省,不需要动业务逻辑上线速度也比较快,缺点:无法体现某些平台的高级特性当需要使用js时还是会有问题如果通过js去动态修改结构以适应变化则会对客户端性能产生影响,总结:比较合适浏览型网站,如基于CMS系统的新闻类功能,实现思路,重新做一套页面,在实践时会发现几乎就是新做一套.,优点:能做出任何想要的效果,能完全基于平台特性给出满意的效果,缺点:工作量巨大可维护性很值得怀疑,总结:这种做法试用于一些功能型网站,特别合适做web game,6,几点需求,1 较低的开发成本有效地利用现有代码,尽量不进行重复开发2 单一URL请求任何版本使用的URL是相同的,不同的展示效果只在设备上才会体现, 这无论对于应用还是用户都是必须的,淘宝的方案,我们采用多套模板的机制:目前具有普通版(还细分 240及以下 320以上 qq/ucweb Hack); 基于HTML5+css3+JS的高端版 高度复用原有数据存取逻辑(主要页面均达到了90%,只有部分ajax加载有新开发)通过多种参数来控制最后展现页面,以便提供给 wap 和 客户端都非常好的支持(任意的request内容都可以作为判断条件),8,这样做的道理,1 大部分的页面主要逻辑是一致的(我们在所有地方都复用了页面逻辑2 显式的显示方法利于多人开发明晰当前页面的版本3 基于模板为单位的实现在WEB框架中可以实现透明开发, 降低开发人员的学习成本,9,淘宝目前的效果演示,整体流程,我们通过一种抓钩获得对应页面的版本适配信息,这个信息包括手机的型号屏幕宽度等等信息,这些信息是可以定义并扩展的.然后修改了页面中得到的模板文件后缀发送render到另外一个页面.,11,实现细节:怎么得到Convert? 抓钩!,还记得我们前面提到过统一URL么? 现在再明确一下这里的需求:通过任意的http request内容进行判断得到我们所需要的Convert对象.这个request可以是: 参数 User-Agent 任意的Header 可以是一个url参数,实现细节:我们实现的一些抓钩,WurflClawer:基于WURFL库,从UA中获得机型的一种抓钩,这是我们主站最通用的”自动适配”CookieClawer:基于Cookie中设置的特殊参数指定某种页面展现,目前我们把上述这两种结合做到”开关+自动适配”ClientClawer:当我们的客户端请求过来使用特殊的UA字,我们会可以返回客户端专属页面OtherBrowerClawer:专门用于识别如QQ浏览器 UCEWEB浏览器,使页面知道当前是这些浏览器做相应页面Hack,实现细节:抓钩java定义,I 是input,一般我们使用HttpServletRequest作为入参T是返回的数据集合,这个集合中包含向Convert传递的所有信息集合,接口定义: (非常简单)public interface Claw public Convert getConvert(I input);,14,实现细节:上下文核心对象Convert,Convert是一个行为集合,把它塞入用户的上下文,提供给程序代码进行”询问”,可以理解它是一个叫桥梁,下面是一些询问方法举例:,/操作系统的判断方法public boolean isAndroid();略,/判断手机特性的方法public int getScreenWidth();public int getScreenHeight();public int getColor();public boolean isJs();public boolean isAjax();/略.,/ 得到模板的后缀符public String getSuffix();,实现细节:模板层,在模板层有两种方式工作:1 直接新的模板,我们在工程中使用不同的后缀以示区分.2 使用模板语言实现如: $convert.isAndroid() 这种方式多用于hack页面的css,如前面提到对qq和ucweb的hack,以及普通版中对不同分辨率的字体设置都是采用这种方式,在web框架中实现:API和ajax,通过多模板输出,我们可以实现一些特殊的操作,如淘宝的搜索,通过参数可以直接同url得到json的搜索结果数据,为客户端提供支持同样在IPHONE版本页面中的一些AJAX也可以通过复用逻辑产生JASON输出来达到降低开发成本的目的,总结,大部分页面对象是共用的对于页面流完全不同建议重新开发,淘宝的旺旺实际上iphone版本和wap版本并不共用java代码对于页面中的异步调用,也可以利用它来做逻辑共享实现上基于MVC的实现,因此可以在任何web框架上实施,