淘宝客户端for-android.pptx

,#,按一下以編輯母片標題樣式,按一下以編輯母片,第二層,第三層,第四層,第五層,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2010/9/4,#,淘宝客户端,for Android,项目实战,TaobaoUED,Mobile Web Team,王卓,SMbey0nd,手机淘宝网,iPhone/Android,版,#1,上线,Android,来了,Android,：,Google&OpenSource,vs.iOS,市场份额：,17.2,3 SRAIW,(Gartner),国内现状：,OMS MTK&,国产设备,未来趋势：,项目简介,技术,框架,Native App,Web,App,技术,框架,Native App+Web App,合体！,技术,框架,Web App,的,优势,：,成本,更新,扩展和复用,技术,框架,Native App,的,优势,：,功能,表现,速度和性能,技术,框架,扬长避短！,前端开发,火花集,TIPS,Android,Webkit,Browser,Android,Webkit,Browser,支持的主要技术特性：,HTML5,：,localStorage,(Android 2.1),Geolocation,(Android 2.1),Canvas,Video/Audio,Forms,(Android 2.0 incomplete),www.quirksmode.org/webkit.html,effects,Transition/Transform/Animation,Media queries,www.quirksmode.org/webkit.html,Android,Webkit,Browser,支持的主要技术特性：,JavaScript,：,Touch Events,ontouchstart/ontouchmove/ontouchend,Multitouch Events/Gestures,(incomplete),设备,API,(Android 2.2),navigator.connection.type,navigator.onLine,navigator.isApplicationInstalled,www.quirksmode.org/mobile/tableTouch.html,Lets,G,o,oooo,o,！,宽度,自适应,布局,目的：,兼容不同分辨率设备,320 x480/360 x640/480 x800/480 x854,屏幕旋转适应,Orientation,做法：,百分比宽度,max-width/min-width,宽度,自适应,布局,CSS2.1/3,选择器,目的：拒绝冗余,Class,，提高灵活性,Eattr=val,EF,EF,E+F,E:last-child,E:disabled,告别,:hover,触屏没有鼠标，无需设置悬停色,关于点击焦点：,Android,不支持设置焦点高亮色和伪类,iPhone,支持：,webkit-tap-highlight-color,:active,伪类,告别,:hover,迎接,inline-block,目的：告别,float,和轻浮,适用场合：,各种同向横排,不适用场合：,反向停靠,无法接受水平空隙,迎接,inline-block,图形,模拟,目的：减少图片,模拟圆形：,-webkit-border-radius,模拟三角：,border-top:10px solid transparent;,border-bottom:10px solid transparent;,border-right:10px solid#ccc;,图形,模拟,优化,select,隐藏边框和背景,selectbackground:transparent;,增加下拉图片,扩大点击区域,labeldisplay:block;,优化,select,实用,CSS,组合,#1,轻松实现漂亮按钮和,tab,：,-webkit-border-radius,-webkit-box-shadow,-webkit-gradient,text-shadow,Multiplebackgrounds,实用,CSS,组合,#2,轻松实现漂亮弹出层：,-webkit-border-radius,-webkit-box-shadow,opacity,CSS,动画,简单的弹出层动画：,.ani-pop-webkit-animation:,twc-popup,.5s ease-in-out 0;,-webkit-keyframes,twc-popup,0%-webkit-transform:scale(1)rotate(0);opacity:0;,50%-webkit-transform:scale(1.2)rotate(0);opacity:.5;,100%-webkit-transform:scale(1)rotate(0);opacity:1;,低配置机器资源消耗较大，尽量不用：（,JS,框架,/,类库,的,选择,框架,/,类库：,YUI2/3,Kissy,Sencha,jQuery,jQuery Mobile,Native,模拟：,jQTouch,iUI,iWebkit,Orientation,屏幕旋转,检测,事件,Android,：,window.resize,iOS,：,onorientationchange,取值,window.orientation,case 0:/portrait(normal),case 90(-90):/landscape,动作,Body.landscape,去除,超链接,焦点框,给,a,的,ontouchstart,设置,return false;,快速响应,兼容,Android/iOS,touch/gestures,事件,支持度,Android,不支持多点触摸和手势,iOS,全支持,touch,和,gestures,介绍,ontouchstart/ontouchmove/ontouchend,gesturestart/gesturechange/gestureend,touches/targetTouches/changedTouches,2.ly/ccay,应用,ScrollLayer,组件,Beta,2.ly/cca6,+Web,双向通信,（合体过程）,合体简介,WebView,Webkit,在,SDK,中封装而成的一个组件，用来显示网络内容,Java,和,JavaScript,通过,WebView,的接口进行通信,Native,调用,Web,监听超链接,监听,b,参数,loadUrl,方法,webview.loadUrl(javascript:foo();,Web,调用,Native,addJavascriptInterface,方法,addJavascriptInterface(Object obj,String interfaceName)/,将一个,java,对象绑定到一个,javascript,对象中,Native,：,webview.addJavascriptInterface(this,“GoAction”);,Web,：,Javascript:window.GoAction.htmlFinsh();,善后处理,通过标识判断页面是否在,Native,环境中,合体,实例,#1,加速加载（,Web,调用,Native,）,WebView,的页面资源加载检测缺陷,页面,onDomReady,后马上调用,Java,函数通知,Native,合体,实例,#2,调用系统功能,分享给好友（,Native,调用,Web,）,Android,Webkit,的缺陷和,BUGs,HTML5,语义化标记,Placeholder,属性,不支持动画,GIF,和,svg,position:fixed,不支持,(Android 1.6-),/,不完善,(Android 2.1-),不支持,-webkit-tap-highlight-color,不支持图片圆角和控件圆角,(Android 1.6-),部分机型,Scroll/touch,事件的,BUG,(HTC Hero/HTC Legend),2.ly/cg8d,缺少说明文档和官方支持,（,NB,）,前端,成就,吹,前端,成就,用户体验优化,CSS3,应用,24,张,20KB,全自适应布局,320+,按需加载和异步优化,ScrollLayer,组件,兼容性,iPhone,&other Webkit,技术应用,展望,技术应用,展望,HTML5,语义化标记,Media Queries,Video/Audio/Upload,SVG/Canvas,Flash,localStorage/Geolocation,Native+Web,的深入融合和优化,畅想,salute to,chencheng,致敬,People should basically shut up,and do as I tell them.,I know better.,via PPK,By,王卓,SMbey0nd,www.SM,Web Team,Questions?,拜拜,bye,