原文链接如下:
http://www.slideshare.net/SMbey0nd/for-android-5128076
《淘宝客户端 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
拜拜
转载于:https://www.cnblogs.com/startfromit/archive/2011/01/05/1926674.html