本项目旨在探讨淘宝客户端在 Android 平台上的开发实践，结合 native app 和 web app 的技术框架，以提高性能和用户体验。文档详细介绍了前端开发的优化技巧和常见技术特性，包括响应式设计、CSS3 应用等，同时关注 Android 和 iOS 设备的兼容性问题。未来展望部分强调了继续融合和优化 native 与 web 的技术应用。

1. 淘宝客户端项目实战for AndroidTaobaoUEDMobile Web Team王卓[SMbey0nd]

2. 手机淘宝网iPhone/Android版 #1上线m.taobao.com

3. Android来了

4. Android：Google & OpenSource

5. vs. iOS

6. 市场份额：17.2％ 3 SRAIW (Gartner)

7. 国内现状：OMS MTK & 国产设备

8. 未来趋势：…项目简介

12. 技术框架WebAppNative App

13. 技术框架Native App+Web App合体！

14. 技术框架Web App 的优势：成本更新扩展和复用

15. 技术框架Native App 的优势：功能表现速度和性能

16. 技术框架扬长避短！

17. TIPS前端开发火花集

18. Android Webkit Browser

19. Android Webkit Browser支持的主要技术特性：HTML5：localStorage(Android 2.1)

20. Geolocation(Android 2.1)

21. Canvas

22. Video/Audio

23. Forms(Android 2.0 incomplete)

24. …http://www.quirksmode.org/webkit.htmlhttp://html5test.com/

25. Android Webkit Browser支持的主要技术特性：CSS3：Selector

26. Border

27. Background

28. Text effects

29. Transition/Transform/Animation

30. Media queries

31. …http://www.quirksmode.org/webkit.html

32. Android Webkit Browser支持的主要技术特性：JavaScript：Touch Events

33. ontouchstart/ontouchmove/ontouchend

34. Multitouch Events/Gestures (incomplete)

35. 设备API(Android 2.2)

36. navigator.connection.type

37. navigator.onLine

38. navigator.isApplicationInstalled

39. …http://www.quirksmode.org/mobile/tableTouch.html

40. Let’s Goooooo！

41. 宽度自适应布局目的：兼容不同分辨率设备320x480/360x640/480x800/480x854屏幕旋转适应Orientation做法：百分比宽度max-width/min-width

42. 宽度自适应布局

43. CSS2.1/3选择器目的：拒绝冗余Class，提高灵活性E[attr=val]E>FE~FE+FE:last-childE:disabled…

44. 告别 :hover触屏没有鼠标，无需设置悬停色关于点击焦点：Android不支持设置焦点高亮色和伪类iPhone支持：–webkit-tap-highlight-color:active伪类

45. 告别 :hover

46. 迎接inline-block目的：告别float和轻浮适用场合：各种同向横排不适用场合：反向停靠无法接受水平空隙

47. 迎接inline-block

48. 图形模拟目的：减少图片模拟圆形：-webkit-border-radius模拟三角：border-top:10px solid transparent;border-bottom:10px solid transparent; border-right:10px solid #ccc;

49. 图形模拟

50. 优化select隐藏边框和背景select{background:transparent;}增加下拉图片扩大点击区域label{display:block;}

51. 优化select

52. 实用CSS组合 #1轻松实现漂亮按钮和tab：-webkit-border-radius -webkit-box-shadow -webkit-gradient text-shadow Multiple backgrounds

53. 实用CSS组合 #2轻松实现漂亮弹出层：-webkit-border-radius -webkit-box-shadow opacity

54. 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;}}低配置机器资源消耗较大，尽量不用：（

55. JS框架/类库的选择框架/类库：YUI2/3KissySenchajQueryjQuery MobileNative模拟：jQTouchiUIiWebkit…

56. Orientation屏幕旋转检测事件Android：window.resizeiOS：onorientationchange取值window.orientationcase 0 : //portrait(normal)case 90(-90): //landscape 动作Body.landscape

57. 去除超链接焦点框给a的ontouchstart设置return false;快速响应兼容Android/iOS

58. touch/gestures事件支持度Android不支持多点触摸和手势iOS全支持touch和gestures介绍ontouchstart/ontouchmove/ontouchendgesturestart/gesturechange/gestureendtouches/targetTouches/changedToucheshttp://2.ly/ccay应用ScrollLayer组件[Beta]http://2.ly/cca6http://www.smbey0nd.com/2010/07/10/touching-and-gesturing-on-the-iphone/

59. Native + Web双向通信（合体过程）

60. 合体简介WebViewWebkit在SDK中封装而成的一个组件，用来显示网络内容Java和JavaScript通过WebView的接口进行通信

61. Native调用Web监听超链接<a href=“http://a.com/?b”>监听b参数</a>loadUrl方法webview.loadUrl("javascript:foo()");

62. Web调用NativeaddJavascriptInterface方法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" />

63. 合体实例 #1加速加载 （Web调用Native）WebView的页面资源加载检测缺陷页面onDomReady后马上调用Java函数通知Native

64. 合体实例 #2调用系统功能分享给好友（Native调用Web）

65. Android Webkit的缺陷和BUGsHTML5语义化标记Placeholder属性不支持动画GIF和svgposition: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缺少说明文档和官方支持

66. 前端成就（ NB）吹

67. 前端成就– 用户体验优化CSS3应用24张 20KB全自适应布局320+按需加载和异步优化ScrollLayer组件兼容性iPhone& other Webkit…

68. 技术应用展望

69. 技术应用展望HTML5语义化标记Media QueriesVideo/Audio/UploadSVG/CanvasFlashlocalStorage/GeolocationNative+Web的深入融合和优化

70. 畅想

71. 致敬salute tochencheng

72. "People should basically shut upand do as I tell them. I know better. "via @PPK

73. Questions?By 王卓 [SMbey0nd]http://www.SMbey0nd.comhttp://twitter.com/SMbey0ndTaobaoU3DMobile Web Team

74. bye拜拜