《淘宝客户端 for Android》项目实战 html webkit android css3

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