淘宝客户端fora课件

1、淘宝客户端for Android淘宝客户端fora课件淘宝客户端fora课件Android来了淘宝客户端fora课件淘宝客户端fora课件淘宝客户端fora课件淘宝客户端fora课件淘宝客户端fora课件淘宝客户端fora课件技术框架淘宝客户端fora课件技术框架Native App+Web App合体！淘宝客户端fora课件技术框架Web App 的优势： 成本 更新 扩展和复用淘宝客户端fora课件技术框架Native App 的优势： 功能 表现 速度和性能淘宝客户端fora课件技术框架扬长避短！淘宝客户端fora课件前端开发火花集TIPS淘宝客户端fora课件Android Webki

2、t Browser淘宝客户端fora课件Android Webkit Browser 支持的主要技术特性： localStorage (Android 2.1) Geolocation (Android 2.1) Canvas Video/Audio Forms(Android 2.0 incomplete) 淘宝客户端fora课件Android Webkit Browser 支持的主要技术特性： Selector Border Background Text effects Transition/Transform/Animation Media queries 淘宝客户端fora课件And

3、roid Webkit Browser 支持的主要技术特性： Touch Events ontouchstart/ontouchmove/ontouchend Multitouch Events/Gestures (incomplete) 设备API(Android 2.2) navigator.connection.type navigator.onLine navigator.isApplicationInstalled 淘宝客户端fora课件淘宝客户端fora课件宽度自适应布局 目的： 兼容不同分辨率设备 320 x480/360 x640/480 x800/480 x854 屏幕旋转适

4、应 Orientation 做法： 百分比宽度 max-width/min-width淘宝客户端fora课件宽度自适应布局淘宝客户端fora课件CSS2.1/3选择器 目的：拒绝冗余Class，提高灵活性 Eattr=val EF EF E+F E:last-child E:disabled 淘宝客户端fora课件告别 :hover 触屏没有鼠标，无需设置悬停色 关于点击焦点： Android不支持设置焦点高亮色和伪类 iPhone支持： webkit-tap-highlight-color :active伪类淘宝客户端fora课件告别 :hover淘宝客户端fora课件迎接inline-bl

5、ock 目的：告别float和轻浮 适用场合： 各种同向横排 不适用场合： 反向停靠 无法接受水平空隙淘宝客户端fora课件迎接inline-block淘宝客户端fora课件图形模拟 目的：减少图片 模拟圆形：-webkit-border-radius 模拟三角：border-top:10px solid transparent;border-bottom:10px solid transparent; border-right:10px solid #ccc;淘宝客户端fora课件图形模拟淘宝客户端fora课件优化select 隐藏边框和背景 selectbackground:transpa

6、rent; 增加下拉图片 扩大点击区域 labeldisplay:block;淘宝客户端fora课件优化select淘宝客户端fora课件实用CSS组合 #1 轻松实现漂亮按钮和tab： -webkit-border-radius -webkit-box-shadow -webkit-gradient text-shadow Multiple backgrounds淘宝客户端fora课件实用CSS组合 #2 轻松实现漂亮弹出层： -webkit-border-radius -webkit-box-shadow opacity淘宝客户端fora课件CSS动画 简单的弹出层动画：.ani-pop-

7、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; 低配置机器资源消耗较大，尽量不用：（淘宝客户端fora课件JS框架/类库的选择 框架/类库： YUI2/3 Kissy Sencha jQue

8、ry jQuery Mobile Native模拟： jQTouch iUI iWebkit 淘宝客户端fora课件Orientation屏幕旋转检测 事件 Android：window.resize iOS：onorientationchange 取值 window.orientation case 0 : /portrait(normal) case 90(-90): /landscape 动作 Body.landscape 淘宝客户端fora课件去除超链接焦点框 给a的ontouchstart设置return false; 快速响应 兼容Android/iOS淘宝客户端fora课件tou

9、ch/gestures事件 支持度 Android不支持多点触摸和手势 iOS全支持 touch和gestures介绍 ontouchstart/ontouchmove/ontouchend gesturestart/gesturechange/gestureend touches/targetTouches/changedTouches 应用 ScrollLayer组件Beta 淘宝客户端fora课件Native + Web双向通信（合体过程）淘宝客户端fora课件合体简介 WebView Webkit在SDK中封装而成的一个组件，用来显示网络内容 Java和JavaScript通过WebV

10、iew的接口进行通信淘宝客户端fora课件Native调用Web 监听超链接 监听b参数 loadUrl方法 webview.loadUrl(javascript:foo();淘宝客户端fora课件Web调用Native addJavascriptInterface方法 addJavascriptInterface(Object obj,String interfaceName)/将一个java对象绑定到一个javascript对象中 Native：webview. addJavascriptInterface (this, “GoAction”); Web：Javascript:window

11、.GoAction.htmlFinsh(); 善后处理 通过标识判断页面是否在Native环境中淘宝客户端fora课件合体实例 #1 加速加载 （Web调用Native） WebView的页面资源加载检测缺陷 页面onDomReady后马上调用Java函数通知Native淘宝客户端fora课件合体实例 #2 调用系统功能 分享给好友（Native调用Web）淘宝客户端fora课件Android Webkit的缺陷和BUGs HTML5语义化标记 Placeholder属性 不支持动画GIF和svg position:fixed不支持(Android 1.6-) /不完善(Android 2.1

12、-) 不支持-webkit-tap-highlight-color 不支持图片圆角和控件圆角(Android 1.6-) 部分机型 Scroll/touch事件的BUG(HTC Hero/HTC Legend) 缺少说明文档和官方支持淘宝客户端fora课件（ NB）前端成就吹淘宝客户端fora课件前端成就 用户体验优化 CSS3应用 24张 20KB 全自适应布局 320+ 按需加载和异步优化 ScrollLayer组件 兼容性 iPhone & other Webkit淘宝客户端fora课件技术应用展望淘宝客户端fora课件技术应用展望 HTML5语义化标记 Media Queries Video/Audio/Upload SVG/Canvas Flash localStorage/Ge