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

《淘宝客户端 for Android》项目实战

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