淘宝客户端for Android 项目实战

TaobaoUED Mobile Web Team王卓 [SMbey0nd]

手机淘宝网iPhone/Android 版 #1

上线m.taobao.com

Android 来了

• Android ： Google & OpenSource

• vs. iOS

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

• 国内现状： OMS MTK & 国产设备• 未来趋势：…

项目简介

技术框架

Native App

WebApp

技术框架

Native App+Web App

合体！

技术框架Web App 的优势：

• 成本• 更新• 扩展和复用

技术框架Native App 的优势：

• 功能• 表现• 速度和性能

技术框架

扬长避短！

前端开发火花集TIPS

Android Webkit Browser

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.htmlhttp://html5test.com/

Android Webkit Browser

• 支持的主要技术特性：CSS3 ：• Selector• Border• Background• Text effects• Transition/Transform/Animation

• Media queries• …

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

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

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-border-radius• -webkit-box-shadow• -webkit-gradient• text-shadow• Multiple backgrounds

实用 CSS 组合 #2

• 轻松实现漂亮弹出层：• -webkit-border-radius• -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 to chencheng

致敬

"People should basically shut upand do as I tell them.

I know better. "

via @PPK

By 王卓 [SMbey0nd]

http://www.SMbey0nd.com

http://twitter.com/SMbey0nd

TaobaoU3DMobile Web Team

Questions?

拜拜bye