淘宝客户端<br />项目实战<br />for Android<br />TaobaoUEDMobile Web Team<br />王卓[SMbey0nd]<br />
手机淘宝网<br />iPhone/Android版 #1<br />上线<br />m.taobao.com<br />
Android来了<br />
<ul><li> Android:Google & OpenSource
 vs. iOS
 市场份额:17.2% 3 SRAIW (Gartner)
 国内现状:OMS MTK & 国产设备
 未来趋势:…</li></li></ul><li>项目简介<br />
技术框架<br />Web<br />App<br />Native App<br />
技术框架<br />Native App+Web App<br />合体!<br />
技术框架<br />Web App 的优势:<br />成本<br />更新<br />扩展和复用<br />
技术框架<br />Native App 的优势:<br />功能<br />表现<br />速度和性能<br />
技术框架<br />扬长避短!<br />
TIPS<br />前端开发火花集<br />
Android Webkit Browser<br />
Android Webkit Browser<br />支持的主要技术特性:<br />HTML5:<br /><ul><li>localStorage(Android 2.1)
Geolocation(Android 2.1)
Canvas
Video/Audio
Forms(Android 2.0 incomplete)
…</li></ul>http://www.quirksmode.org/webkit.html<br />http://html5test.com/<br />
Android Webkit Browser<br />支持的主要技术特性:<br />CSS3:<br /><ul><li>Selector
Border
Background
Text effects
Transition/Transform/Animation
Media queries
…</li></ul>http://www.quirksmode.org/webkit.html<br />
Android Webkit Browser<br />支持的主要技术特性:<br />JavaScript:<br /><ul><li>Touch Events
ontouchstart/ontouchmove/ontouchend
Multitouch Events/Gestures (incomplete)
设备API(Android 2.2)
navigator.connection.type
navigator.onLine
navigator.isApplicationInstalled
…</li></ul>http://www.quirksmode.org/mobile/tableTouch.html<br />
Let’s Goooooo!<br />
宽度自适应布局<br />目的:<br />兼容不同分辨率设备<br />320x480/360x640/480x800/480x854<br />屏幕旋转适应<br />Orientation<br />做法:<br />百分比宽度<br /...
宽度自适应布局<br />
CSS2.1/3选择器<br />目的:拒绝冗余Class,提高灵活性<br />E[attr=val]<br />E>F<br />E~F<br />E+F<br />E:last-child<br />E:disabled<br />…<b...
告别 :hover<br />触屏没有鼠标,无需设置悬停色<br />关于点击焦点:<br />Android不支持设置焦点高亮色和伪类<br />iPhone支持:<br />–webkit-tap-highlight-color<br />...
告别 :hover<br />
迎接inline-block<br />目的:告别float和轻浮<br />适用场合:<br />各种同向横排<br />不适用场合:<br />反向停靠<br />无法接受水平空隙<br />
迎接inline-block<br />
图形模拟<br />目的:减少图片<br />模拟圆形:<br />-webkit-border-radius<br />模拟三角:<br />border-top:10px solid transparent;<br />border-bot...
图形模拟<br />
优化select<br />隐藏边框和背景<br />select{background:transparent;}<br />增加下拉图片<br />扩大点击区域<br />label{display:block;}<br />
优化select<br />
实用CSS组合 #1<br />轻松实现漂亮按钮和tab:<br />-webkit-border-radius<br /> -webkit-box-shadow<br /> -webkit-gradient<br /> text-shadow...
实用CSS组合 #2<br />轻松实现漂亮弹出层:<br />-webkit-border-radius<br /> -webkit-box-shadow<br /> opacity<br />
Upcoming SlideShare
Loading in …5
×

《淘宝客户端 for Android》项目实战

17,805 views
17,645 views

Published on

《淘宝客户端 for Android》项目实战 - 懒懒版
PPT大纲:
1. Android简介
2. 项目简介
3. 技术框架
* native app vs web app
* 合体
4. Android webkit支持的主要前端特性
* HTML5
* CSS3
* JS+API
5. 前端Tips:
* 宽度自适应布局
* CSS2.1/3选择器
* 告别 :hover
* 迎接inline-block
* 图形模拟
* 优化select
* 实用CSS3组合 #1
* 实用CSS3组合 #2
* CSS动画
* JS框架/类库的选择
* Orientation屏幕旋转检测
* 去除超链接焦点框
* touch/gestures事件
* scrollTop与软键盘
* 业务逻辑和展现的分离
* 关于字体
* 视图区域控制
* 电话号码检测控制
* WebClip icon
* 美观的原生控件
6. Native和Web的双向通信
* 简介
* Navtive调用Web
* Web调用Native
* 合体实例#1
* 合体实例#2
7. Android Webkit的缺陷和BUGs
8. 前端成就和用户体验优化
9. 技术应用展望
10. 向云谦致敬

感谢懒懒组委会和TaobaoUED所有的前端攻城师们。

see more on http://www.smbey0nd.com

Published in: Technology
11 Comments
62 Likes
Statistics
Notes
No Downloads
Views
Total views
17,805
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
801
Comments
11
Likes
62
Embeds 0
No embeds

No notes for slide

《淘宝客户端 for Android》项目实战

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

×