android web app+native app （转自完颜小卓）

原文链接如下：
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
      拜拜