原文链接如下:
http://www.slideshare.net/SMbey0nd/for-android-5128076
《淘宝客户端 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" id="twcClient" />
42. 合体实例 #1
加速加载 (Web调用Native)
WebView的页面资源加载检测缺陷
页面onDomReady后马上调用Java函数通知Native
43. 合体实例 #2
调用系统功能
分享给好友(Native调用Web)
44. 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
缺少说明文档和官方支持
45. 前端成就
( NB)
吹
46. 前端成就– 用户体验优化
CSS3应用
24张 20KB
全自适应布局
320+
按需加载和异步优化
ScrollLayer组件
兼容性
iPhone& other Webkit…
47. 技术应用展望
48. 技术应用展望
HTML5语义化标记
Media Queries
Video/Audio/Upload
SVG/Canvas
Flash
localStorage/Geolocation
Native+Web的深入融合和优化
49. 畅想
50. 致敬
salute tochencheng
51. "People should basically shut up
and do as I tell them.
I know better. "
via @PPK
52. Questions?
By 王卓 [SMbey0nd]
http://www.SMbey0nd.com
http://twitter.com/SMbey0nd
TaobaoU3D
Mobile Web Team
53. bye
拜拜
分享到:
相关推荐
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和...旅游自助系统源码+数据库+报告+项目说明(Android APP+Web管理系统).zip
Android购物商城App+客户端+服务端+数据库。 购物商城App+客户端+服务端+数据库 基本的登陆注册以及商品购买浏览功能齐全 购物商城App
介绍Web App 和Native App的相同和不同之处,并阐释了他们相互之间的关系、优缺点,对Web App 和Native App了解必读
车联网Android App源码+项目说明(中国软件杯参赛作品).zip车联网Android App源码+项目说明(中国软件杯参赛作品).zip车联网Android App源码+项目说明(中国软件杯参赛作品).zip车联网Android App源码+项目说明...
Android Studio项目+报告+app文件
Android studio 项目 和 MyEclipse 项目 ,整套完整的源代码(包括数据库结构文件),可以直接跑通,非常适合个人学习。
安卓期末大作业-记账app(含源码+导出app+运行截图)免积分下载,详细情况请看我的文章介绍:https://blog.csdn.net/weixin_43474701/article/details/131733334 开发软件:Android Studio 开发语言:Java 2023年上...
MAC 下 Web App to native app 的框架.zip,将Web应用程序捆绑到本机OS X应用程序
只需要具备一些HTML和JavaScript的基础知识 就可以开启我们的Android Web Game App高级编程之旅 从一个空白的HTML网页开始 最后将收获多人在线游戏 有丰富多彩的图像 声音 动画等 开发必需的一些知识和技巧 即使你...
省钱兄跑腿源码(公众号+APP+小程序+Android+IOS)校园跑腿小程序社区跑腿uniapp前端模版
用于3种App(Web App,Light App,Native App)应用的对比,分析各自的优缺点,可以帮助大家来很好的选择需要用哪种方式开发APP。 包含了最新的轻应用APP。
本项目是即时通讯 APP,主要功能有群聊、私聊、朋友圈、可以发送文字、语音、视频、图片、表情、红包等。消息可以撤回, 群组可以设置管理员、可以禁言、踢人,能设置能否可查看客户信息,可@客户等,支持扫码入群,...
云应用开发——Google+App+Engine+&+Google+Web+Toolkit入门指南 云应用开发——Google+App+Engine+&+Google+Web+Toolkit入门指南
佳博Q80蓝牙便携打印机,H5开发;使用工具为HBuilder+Native.js
Android博客阅读App+课设报告,后端采用SpringBoot+MyBatis+MySQL
android debug bridge,实现Android手机连接PC的工具
基于Android跌倒监护APP+毕业论文
android课程设计Android studio实现的一款作业提交管理APP源码+文档+PPT,已获高分通过项目。 使用Android studio实现一款作业提交管理APP,该软件可以实现三种用户登录。 学生端可以查看课表,提交作业以及小组讨论...
省钱兄电竞源码(APP+H5+公众号)模版竞赛APP源码竞赛平台APP源码游戏打比赛APP源码UNIAPP前端的源码赏金电竞源码大圣电竞源码
Beginning Progressive Web App Development Creating a Native App Experience on the Web 英文epub 本资源转载自网络,如有侵权,请联系上传者或csdn删除