Upload
-
View
16.602
Download
7
Embed Size (px)
DESCRIPTION
《淘宝客户端 for Android》项目实战 - 懒懒版 PPT大纲: 1. Android简介 2. 项目简介 3. 技术框架 * native app vs web app * 合体 4. Android webkit支持的主要前端特性 * HTML5 * CSS3 * JS+API 5. 前端Tips: * 宽度自适应布局 * CSS2.1/3选择器 * 告别 :hover * 迎接inline-block * 图形模拟 * 优化select * 实用CSS3组合 #1 * 实用CSS3组合 #2 * CSS动画 * JS框架/类库的选择 * Orientation屏幕旋转检测 * 去除超链接焦点框 * touch/gestures事件 * scrollTop与软键盘 * 业务逻辑和展现的分离 * 关于字体 * 视图区域控制 * 电话号码检测控制 * WebClip icon * 美观的原生控件 6. Native和Web的双向通信 * 简介 * Navtive调用Web * Web调用Native * 合体实例#1 * 合体实例#2 7. Android Webkit的缺陷和BUGs 8. 前端成就和用户体验优化 9. 技术应用展望 10. 向云谦致敬 感谢懒懒组委会和TaobaoUED所有的前端攻城师们。 see more on http://www.smbey0nd.com
Citation preview
淘宝客户端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