《淘宝客户端 for Android》项目实战

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

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

Android来了

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

项目简介

技术框架
Web
App
Native App

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

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

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

技术框架
扬长避短！

TIPS
前端开发火花集

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/

CSS3：
Selector
Border
Background
Text effects
Transition/Transform/Animation
Media queries
…
http://www.quirksmode.org/webkit.html

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

Let’s Goooooo！

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

宽度自适应布局

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

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

告别 :hover

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

迎接inline-block

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

图形模拟

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

优化select

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

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

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

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

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

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

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/

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

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

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

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

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

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

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

前端成就
（ NB）
吹

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

技术应用展望

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

畅想

致敬
salute tochencheng

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

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

bye
拜拜

http://www.smbey0nd.com	1039
http://www.cnblogs.com	354
http://www.xh-css.cn	147
http://archive.cnblogs.com	133
http://threecups.org	37
http://kb.cnblogs.com	32
http://xh-css.tk	18
http://cache.baidu.com	7
http://smbey0nd.com	4
http://www.techgig.com	4
http://static.slidesharecdn.com	4
http://192.168.0.103	3
http://www.haogongju.net	3
http://coopfrutosdelmar.com.ar	2
http://webcache.googleusercontent.com	2
http://www.zhuaxia.com	2
http://www.trunkly.com	1
http://translate.googleusercontent.com	1
http://cncc.bingj.com	1
url_unknown	1
http://snapshot.soso.com	1
http://xianguo.com	1

《淘宝客户端 for Android》项目实战

by 完颜小卓 on Sep 04, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

22 Embeds 1,797

Statistics