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

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

3. Android来了

4. • Android：Google & OpenSource
• vs. iOS
• 市场份额：17.2％ 3 SRAIW (Gartner)
• 国内现状：OMS MTK & 国产设备
• 未来趋势：…

5. 项目简介

9. 技术框架

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

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

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

13. 技术框架
扬长避短！

14. TIPS
前端开发火花集

15. Android Webkit Browser

16. 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.html
http://html5test.com/

17. Android Webkit Browser
• 支持的主要技术特性：
CSS3：
• Selector
• Border
• Background
• Text effects
• Transition/Transform/Animation
• Media queries
• …
http://www.quirksmode.org/webkit.html

18. 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

19. Let’s Goooooo！

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

21. 宽度自适应布局

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

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

24. 告别 :hover

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

26. 迎接inline-block

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

28. 图形模拟

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

30. 优化select

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

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

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

34. JS框架/类库的选择
• 框架/类库：
– YUI2/3
– Kissy
– Sencha
– jQuery
– jQuery Mobile
• Native模拟：
– jQTouch
– iUI
– iWebkit
– …

35. Orientation屏幕旋转检测
• 事件
– Android：window.resize
– iOS：onorientationchange
• 取值
– window.orientation
• case 0 : //portrait(normal)
• case 90(-90): //landscape
• 动作
– Body.landscape

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

37. 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/

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

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

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

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

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

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

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

45. 前端成就
（吹NB）

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

47. 技术应用展望

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

50. 致敬
salute to chencheng

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

52. By 王卓 [SMbey0nd]
http://www.SMbey0nd.com
TaobaoU3D
http://twitter.com/SMbey0nd M l e W Team
obi eb

53. bye
拜拜