淘宝客户端 for Android    项目实战               TaobaoUED Mobile Web Team                          王卓[SMbey0nd]
手机淘宝网iPhone/Android版 #1     上线m.taobao.com
Android来了
• Android:Google & OpenSource• vs. iOS• 市场份额:17.2% 3 SRAIW (Gartner)• 国内现状:OMS MTK & 国产设备• 未来趋势:…
项目简介
技术框架
技术框架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   ...
Android Webkit Browser• 支持的主要技术特性:    CSS3:    • Selector    • Border    • Background    • Text effects    • Transition/Tr...
Android Webkit Browser• 支持的主要技术特性:    JavaScript:    • Touch Events         • ontouchstart/ontouchmove/ontouchend    • Mul...
Let’s Goooooo!
宽度自适应布局• 目的: – 兼容不同分辨率设备   • 320x480/360x640/480x800/480x854 – 屏幕旋转适应   • Orientation• 做法: – 百分比宽度 – max-width/min-width
宽度自适应布局
CSS2.1/3选择器• 目的:拒绝冗余Class,提高灵活性 –   E[attr=val] –   E>F –   E~F –   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 transpa...
图形模拟
优化select• 隐藏边框和背景 – select{background:transparent;}• 增加下拉图片• 扩大点击区域 – label{display:block;}
优化select
实用CSS组合 #1• 轻松实现漂亮按钮和tab:  •   -webkit-border-radius  •   -webkit-box-shadow  •   -webkit-gradient  •   text-shadow  •   M...
实用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-tr...
JS框架/类库的选择• 框架/类库: –   YUI2/3 –   Kissy –   Sencha –   jQuery –   jQuery Mobile• Native模拟: –   jQTouch –   iUI –   iWebkit...
Orientation屏幕旋转检测• 事件 – Android:window.resize – iOS:onorientationchange• 取值 – window.orientation    • case 0 : //portrait(...
去除超链接焦点框• 给a的ontouchstart设置return false;  – 快速响应  – 兼容Android/iOS
touch/gestures事件• 支持度    – Android不支持多点触摸和手势    – iOS全支持• touch和gestures介绍    –   ontouchstart/ontouchmove/ontouchend    –...
Native + Web  双向通信 (合体过程)
合体简介• WebView  – Webkit在SDK中封装而成的一个组件,用来显示网络   内容  – Java和JavaScript通过WebView的接口进行通信
Native调用Web• 监听超链接  – <a href=“http://a.com/?b”>监听b参数</a>• loadUrl方法  – webview.loadUrl("javascript:foo()");
Web调用Native• addJavascriptInterface方法  – addJavascriptInterface(Object obj,String interfaceName)    //将一个java对象绑定到一个javasc...
合体实例 #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-...
前端成就(吹NB)
前端成就 – 用户体验优化• CSS3应用 – 24张 20KB• 全自适应布局 – 320+• 按需加载和异步优化• ScrollLayer组件• 兼容性 – iPhone & other Webkit…
技术应用展望
技术应用展望•   HTML5语义化标记•   Media Queries•   Video/Audio/Upload•   SVG/Canvas•   Flash•   localStorage/Geolocation•   Native+W...
致敬salute to chencheng
"People should basically shut up     and do as I tell them.      I know better. "             via @PPK
By 王卓 [SMbey0nd] http://www.SMbey0nd.com                              TaobaoU3Dhttp://twitter.com/SMbey0nd   M l e W Team ...
bye  拜拜
Android 4-app
Android 4-app
Android 4-app
Android 4-app
Upcoming SlideShare
Loading in...5
×

Android 4-app

1,087

Published on

Published in: Education, Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,087
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Android 4-app

  1. 1. 淘宝客户端 for Android 项目实战 TaobaoUED Mobile Web Team 王卓[SMbey0nd]
  2. 2. 手机淘宝网iPhone/Android版 #1 上线m.taobao.com
  3. 3. Android来了
  4. 4. • Android:Google & OpenSource• vs. iOS• 市场份额:17.2% 3 SRAIW (Gartner)• 国内现状:OMS MTK & 国产设备• 未来趋势:…
  5. 5. 项目简介
  6. 6. 技术框架
  7. 7. 技术框架Native App+Web App 合体!
  8. 8. 技术框架Web App 的优势:• 成本• 更新• 扩展和复用
  9. 9. 技术框架Native App 的优势:• 功能• 表现• 速度和性能
  10. 10. 技术框架 扬长避短!
  11. 11. TIPS前端开发火花集
  12. 12. Android Webkit Browser
  13. 13. Android Webkit Browser• 支持的主要技术特性: HTML5: • localStorage (Android 2.1) • Geolocation (Android 2.1) • Canvas • Video/Audio • Forms(Android 2.0 incomplete) • …http://www.quirksmode.org/webkit.htmlhttp://html5test.com/
  14. 14. Android Webkit Browser• 支持的主要技术特性: CSS3: • Selector • Border • Background • Text effects • Transition/Transform/Animation • Media queries • …http://www.quirksmode.org/webkit.html
  15. 15. Android Webkit Browser• 支持的主要技术特性: JavaScript: • Touch Events • ontouchstart/ontouchmove/ontouchend • Multitouch Events/Gestures (incomplete) • 设备API(Android 2.2) • navigator.connection.type • navigator.onLine • navigator.isApplicationInstalled • …http://www.quirksmode.org/mobile/tableTouch.html
  16. 16. Let’s Goooooo!
  17. 17. 宽度自适应布局• 目的: – 兼容不同分辨率设备 • 320x480/360x640/480x800/480x854 – 屏幕旋转适应 • Orientation• 做法: – 百分比宽度 – max-width/min-width
  18. 18. 宽度自适应布局
  19. 19. CSS2.1/3选择器• 目的:拒绝冗余Class,提高灵活性 – E[attr=val] – E>F – E~F – E+F – E:last-child – E:disabled – …
  20. 20. 告别 :hover• 触屏没有鼠标,无需设置悬停色• 关于点击焦点: – Android不支持设置焦点高亮色和伪类 – iPhone支持: • –webkit-tap-highlight-color • :active伪类
  21. 21. 告别 :hover
  22. 22. 迎接inline-block• 目的:告别float和轻浮• 适用场合: – 各种同向横排• 不适用场合: – 反向停靠 – 无法接受水平空隙
  23. 23. 迎接inline-block
  24. 24. 图形模拟• 目的:减少图片 – 模拟圆形: -webkit-border-radius – 模拟三角: border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:10px solid #ccc;
  25. 25. 图形模拟
  26. 26. 优化select• 隐藏边框和背景 – select{background:transparent;}• 增加下拉图片• 扩大点击区域 – label{display:block;}
  27. 27. 优化select
  28. 28. 实用CSS组合 #1• 轻松实现漂亮按钮和tab: • -webkit-border-radius • -webkit-box-shadow • -webkit-gradient • text-shadow • Multiple backgrounds
  29. 29. 实用CSS组合 #2• 轻松实现漂亮弹出层: • -webkit-border-radius • -webkit-box-shadow • opacity
  30. 30. 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;} }• 低配置机器资源消耗较大,尽量不用:(
  31. 31. JS框架/类库的选择• 框架/类库: – YUI2/3 – Kissy – Sencha – jQuery – jQuery Mobile• Native模拟: – jQTouch – iUI – iWebkit – …
  32. 32. Orientation屏幕旋转检测• 事件 – Android:window.resize – iOS:onorientationchange• 取值 – window.orientation • case 0 : //portrait(normal) • case 90(-90): //landscape• 动作 – Body.landscape
  33. 33. 去除超链接焦点框• 给a的ontouchstart设置return false; – 快速响应 – 兼容Android/iOS
  34. 34. touch/gestures事件• 支持度 – Android不支持多点触摸和手势 – iOS全支持• touch和gestures介绍 – ontouchstart/ontouchmove/ontouchend – gesturestart/gesturechange/gestureend – touches/targetTouches/changedTouches – http://2.ly/ccay• 应用 – ScrollLayer组件[Beta] http://2.ly/cca6http://www.smbey0nd.com/2010/07/10/touching-and-gesturing-on-the-iphone/
  35. 35. Native + Web 双向通信 (合体过程)
  36. 36. 合体简介• WebView – Webkit在SDK中封装而成的一个组件,用来显示网络 内容 – Java和JavaScript通过WebView的接口进行通信
  37. 37. Native调用Web• 监听超链接 – <a href=“http://a.com/?b”>监听b参数</a>• loadUrl方法 – webview.loadUrl("javascript:foo()");
  38. 38. Web调用Native• addJavascriptInterface方法 – addJavascriptInterface(Object obj,String interfaceName) //将一个java对象绑定到一个javascript对象中 – Native:webview. addJavascriptInterface (this, “GoAction”); – Web:Javascript:window.GoAction.htmlFinsh();• 善后处理 – 通过标识判断页面是否在Native环境中 <meta content="true" name="twcClient" id="twcClient" />
  39. 39. 合体实例 #1• 加速加载 (Web调用Native) – WebView的页面资源加载检测缺陷 – 页面onDomReady后马上调用Java函数通知Native
  40. 40. 合体实例 #2• 调用系统功能 – 分享给好友(Native调用Web)
  41. 41. 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) – http://2.ly/cg8d• 缺少说明文档和官方支持
  42. 42. 前端成就(吹NB)
  43. 43. 前端成就 – 用户体验优化• CSS3应用 – 24张 20KB• 全自适应布局 – 320+• 按需加载和异步优化• ScrollLayer组件• 兼容性 – iPhone & other Webkit…
  44. 44. 技术应用展望
  45. 45. 技术应用展望• HTML5语义化标记• Media Queries• Video/Audio/Upload• SVG/Canvas• Flash• localStorage/Geolocation• Native+Web的深入融合和优化
  46. 46. 致敬salute to chencheng
  47. 47. "People should basically shut up and do as I tell them. I know better. " via @PPK
  48. 48. By 王卓 [SMbey0nd] http://www.SMbey0nd.com TaobaoU3Dhttp://twitter.com/SMbey0nd M l e W Team obi eb
  49. 49. bye 拜拜
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×