• Like
  • Save
Android 4-app
Upcoming SlideShare
Loading in...5
×
 

Android 4-app

on

  • 1,071 views

 

Statistics

Views

Total Views
1,071
Views on SlideShare
1,071
Embed Views
0

Actions

Likes
1
Downloads
14
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Android 4-app Android 4-app Presentation Transcript

    • 淘宝客户端 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+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/cca6http://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 up and do as I tell them. I know better. " via @PPK
    • By 王卓 [SMbey0nd] http://www.SMbey0nd.com TaobaoU3Dhttp://twitter.com/SMbey0nd M l e W Team obi eb
    • bye 拜拜