淘宝客户端for android
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
– Android：window.resize – iOS：onorientationchange
• 取值
– window.orientation
• case 0 : //portrait(normal) • case 90(-90): //landscape
• 动作
– Body.landscape
• 应用
– ScrollLayer组件[Beta]
http://2.ly/cca6
http://www.smbey0nd.com/2010/07/10/touching-and-gesturing-on-the-iphone/
Native + Web 双向通信
（合体过程）
合体简介
• WebView
Web调用Native
• addJavascriptInterface方法
– addJavascriptInterface(Object obj,String interfaceName) //将一个java对象绑定到一个javascript对象中 – Native：webview. addJavascriptInterface (this, “GoAction”); – Web：Javascript:window.GoAction.htmlFinsh();
告别 :hover
迎接inline-block
• 目的：告别float和轻浮 • 适用场合：
– 各种同向横排
• 丌适用场合：
– 反向停靠 – 无法接受水平空隙
迎接inline-block
图形模拟
• 目的：减少图片
– 模拟圆形：
-webkit-border-radius
– 模拟三角：
border-top:10pxБайду номын сангаасsolid transparent; border-bottom:10px solid transparent; border-right:10px solid #ccc;
• 国内现状：OMS MTK & 国产设备
• 未来趋势：…
项目简介
技术框架
技术框架
Native App+Web App
合体！
技术框架
Web App 的优势：
• 成本 • 更新 • 扩展和复用
技术框架
Native App 的优势：
• 功能 • 表现 • 速度和性能
技术框架
扬长避短！
前端开发火花集
去除超链接焦点框
• 给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
http://www.quirksmode.org/webkit.html http://html5test.com/
Android Webkit Browser
• 支持的主要技术特性：
CSS3： • Selector • Border • Background • Text effects
• Transition/Transform/Animation
实用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;} }
– Webkit在SDK中封装而成的一个组件，用来显示网络
内容
– Java和JavaScript通过WebView的接口进行通信
Native调用Web
• 监听超链接
– <a href=“http://a.com/?b”>监听b参数</a>
• loadUrl方法
– webview.loadUrl("javascript:foo()");
– E[attr=val] – E>F – E~F – E+F – E:last-child – E:disabled –…
告别 :hover
• 触屏没有鼠标，无需设置悬停色 • 关于点击焦点：
– Android不支持设置焦点高亮色和伪类 – iPhone支持：
• –webkit-tap-highlight-color • :active伪类
合体实例 #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)
• 低配置机器资源消耗较大，尽量丌用：（
JS框架/类库的选择
• 框架/类库：
– – – – – – – – – YUI2/3 Kissy Sencha jQuery jQuery Mobile jQTouch iUI iWebkit …
• Native模拟：
Orientation屏幕旋转检测
• 事件
• Multitouch Events/Gestures
• 设备API(Android 2.2)
• navigator.connection.type • navigator.onLine • navigator.isApplicationInstalled
(incomplete)
• …
http://www.quirksmode.org/mobile/tableTouch.html
图形模拟
优化select
• 隐藏边框和背景
– select{background:transparent;}
• 增加下拉图片 • 扩大点击区域
– label{display:block;}
优化select
实用CSS组合 #1
• 轻松实现漂亮按钮和tab：
• • • • • -webkit-border-radius -webkit-box-shadow -webkit-gradient text-shadow Multiple backgrounds
淘宝客户端
for Android
项目实战
TaobaoUED Mobile Web Team 王卓[SMbey0nd]
手机淘宝网 iPhone/Android版 #1
m.taobao.com
上线
Android来了
• Android：Google & OpenSource
• vs. iOS
• 市场份额：17.2％ 3 SRAIW (Gartner)
Let’s Goooooo！
宽度自适应布局
• 目的：
– 兼容不同分辨率设备
• 320x480/360x640/480x800/480x854
– 屏幕旋转适应
• Orientation
• 做法：
– 百分比宽度 – max-width/min-width
宽度自适应布局
CSS2.1/3选择器
• 目的：拒绝冗余Class，提高灵活性
– 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 up
• Media queries • …
http://www.quirksmode.org/webkit.html
Android Webkit Browser
• 支持的主要技术特性：
JavaScript： • Touch Events
• ontouchstart/ontouchmove/ontouchend
TIPS
Android Webkit Browser
Android Webkit Browser
• 支持的主要技术特性：
HTML5： • localStorage (Android 2.1) • Geolocation (Android 2.1) • Canvas • Video/Audio • Forms(Android 2.0 incomplete) • …
and do as I tell them.
I know better. "
via @PPK
By 王卓 [SMbey0nd]
http://www.SMbey0nd.com
http://twitter.com/SMbey0nd
TaobaoU3D
Mobile W Team eb
bye
拜拜
• 善后处理
– 通过标识判断页面是否在Native环境中
<meta content="true" name="twcClient" id="twcClient" />
合体实例 #1
• 加速加载 （Web调用Native）
– WebView的页面资源加载检测缺陷 – 页面onDomReady后马上调用Java函数通知Native
• 取值
– window.orientation
• case 0 : //portrait(normal) • case 90(-90): //landscape
• 动作
– Body.landscape
• 应用
– ScrollLayer组件[Beta]
http://2.ly/cca6
http://www.smbey0nd.com/2010/07/10/touching-and-gesturing-on-the-iphone/
Native + Web 双向通信
（合体过程）
合体简介
• WebView
Web调用Native
• addJavascriptInterface方法
– addJavascriptInterface(Object obj,String interfaceName) //将一个java对象绑定到一个javascript对象中 – Native：webview. addJavascriptInterface (this, “GoAction”); – Web：Javascript:window.GoAction.htmlFinsh();
告别 :hover
迎接inline-block
• 目的：告别float和轻浮 • 适用场合：
– 各种同向横排
• 丌适用场合：
– 反向停靠 – 无法接受水平空隙
迎接inline-block
图形模拟
• 目的：减少图片
– 模拟圆形：
-webkit-border-radius
– 模拟三角：
border-top:10pxБайду номын сангаасsolid transparent; border-bottom:10px solid transparent; border-right:10px solid #ccc;
• 国内现状：OMS MTK & 国产设备
• 未来趋势：…
项目简介
技术框架
技术框架
Native App+Web App
合体！
技术框架
Web App 的优势：
• 成本 • 更新 • 扩展和复用
技术框架
Native App 的优势：
• 功能 • 表现 • 速度和性能
技术框架
扬长避短！
前端开发火花集
去除超链接焦点框
• 给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
http://www.quirksmode.org/webkit.html http://html5test.com/
Android Webkit Browser
• 支持的主要技术特性：
CSS3： • Selector • Border • Background • Text effects
• Transition/Transform/Animation
实用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;} }
– Webkit在SDK中封装而成的一个组件，用来显示网络
内容
– Java和JavaScript通过WebView的接口进行通信
Native调用Web
• 监听超链接
– <a href=“http://a.com/?b”>监听b参数</a>
• loadUrl方法
– webview.loadUrl("javascript:foo()");
– E[attr=val] – E>F – E~F – E+F – E:last-child – E:disabled –…
告别 :hover
• 触屏没有鼠标，无需设置悬停色 • 关于点击焦点：
– Android不支持设置焦点高亮色和伪类 – iPhone支持：
• –webkit-tap-highlight-color • :active伪类
合体实例 #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)
• 低配置机器资源消耗较大，尽量丌用：（
JS框架/类库的选择
• 框架/类库：
– – – – – – – – – YUI2/3 Kissy Sencha jQuery jQuery Mobile jQTouch iUI iWebkit …
• Native模拟：
Orientation屏幕旋转检测
• 事件
• Multitouch Events/Gestures
• 设备API(Android 2.2)
• navigator.connection.type • navigator.onLine • navigator.isApplicationInstalled
(incomplete)
• …
http://www.quirksmode.org/mobile/tableTouch.html
图形模拟
优化select
• 隐藏边框和背景
– select{background:transparent;}
• 增加下拉图片 • 扩大点击区域
– label{display:block;}
优化select
实用CSS组合 #1
• 轻松实现漂亮按钮和tab：
• • • • • -webkit-border-radius -webkit-box-shadow -webkit-gradient text-shadow Multiple backgrounds
淘宝客户端
for Android
项目实战
TaobaoUED Mobile Web Team 王卓[SMbey0nd]
手机淘宝网 iPhone/Android版 #1
m.taobao.com
上线
Android来了
• Android：Google & OpenSource
• vs. iOS
• 市场份额：17.2％ 3 SRAIW (Gartner)
Let’s Goooooo！
宽度自适应布局
• 目的：
– 兼容不同分辨率设备
• 320x480/360x640/480x800/480x854
– 屏幕旋转适应
• Orientation
• 做法：
– 百分比宽度 – max-width/min-width
宽度自适应布局
CSS2.1/3选择器
• 目的：拒绝冗余Class，提高灵活性
– 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 up
• Media queries • …
http://www.quirksmode.org/webkit.html
Android Webkit Browser
• 支持的主要技术特性：
JavaScript： • Touch Events
• ontouchstart/ontouchmove/ontouchend
TIPS
Android Webkit Browser
Android Webkit Browser
• 支持的主要技术特性：
HTML5： • localStorage (Android 2.1) • Geolocation (Android 2.1) • Canvas • Video/Audio • Forms(Android 2.0 incomplete) • …
and do as I tell them.
I know better. "
via @PPK
By 王卓 [SMbey0nd]
http://www.SMbey0nd.com
http://twitter.com/SMbey0nd
TaobaoU3D
Mobile W Team eb
bye
拜拜
• 善后处理
– 通过标识判断页面是否在Native环境中
<meta content="true" name="twcClient" id="twcClient" />
合体实例 #1
• 加速加载 （Web调用Native）
– WebView的页面资源加载检测缺陷 – 页面onDomReady后马上调用Java函数通知Native