《淘宝客户端 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

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

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

3. Android来了

5. vs. iOS

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

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

12. 技术框架 Web App Native App

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

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

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

16. 技术框架 扬长避短！

17. TIPS 前端开发火花集

18. Android Webkit Browser

20. Geolocation(Android 2.1)

21. Canvas

22. Video/Audio

23. Forms(Android 2.0 incomplete)

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

26. Border

27. Background

28. Text effects

29. Transition/Transform/Animation

30. Media queries

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

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>F E~F E+F E:last-child E: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/3 Kissy Sencha jQuery jQuery Mobile Native模拟： jQTouch iUI iWebkit …

56. Orientation屏幕旋转检测 事件 Android：window.resize iOS：onorientationchange 取值 window.orientation case 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/ontouchend gesturestart/gesturechange/gestureend touches/targetTouches/changedTouches http://2.ly/ccay 应用 ScrollLayer组件[Beta]http://2.ly/cca6 http://www.smbey0nd.com/2010/07/10/touching-and-gesturing-on-the-iphone/

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

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

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

62. 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" />

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

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

65. 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 缺少说明文档和官方支持

66. 前端成就 （ NB） 吹

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

68. 技术应用展望

69. 技术应用展望 HTML5语义化标记 Media Queries Video/Audio/Upload SVG/Canvas Flash localStorage/Geolocation Native+Web的深入融合和优化

70. 畅想

71. 致敬 salute tochencheng

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

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

74. bye 拜拜