《淘宝客户端 for Android》项目实战 html webkit android css3
2011-04-24 14:20 sunblackshine 阅读(1469) 评论(0) 编辑 收藏 举报 《淘宝客户端 for Android》项目实战
View more presentations from 完颜 小卓
《淘宝客户端 for Android》项目实战 - Presentation Transcript
1. 淘宝客户端
项目实战
for Android
TaobaoUEDMobile 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. 项目简介
6.
7.
8.
9. 技术框架
Web
App
Native App
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的深入融合和优化
49. 畅想
50. 致敬
salute tochencheng
51. "People should basically shut up
and do as I tell them.
I know better. "
via @PPK
52. Questions?
By 王卓 [SMbey0nd]
http://www.SMbey0nd.com
http://twitter.com/SMbey0nd
TaobaoU3D
Mobile Web Team
53. bye
拜拜
1. 淘宝客户端
项目实战
for Android
TaobaoUEDMobile 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. 项目简介
6.
7.
8.
9. 技术框架
Web
App
Native App
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的深入融合和优化
49. 畅想
50. 致敬
salute tochencheng
51. "People should basically shut up
and do as I tell them.
I know better. "
via @PPK
52. Questions?
By 王卓 [SMbey0nd]
http://www.SMbey0nd.com
http://twitter.com/SMbey0nd
TaobaoU3D
Mobile Web Team
53. bye
拜拜
