移动高端版  TMALL  夏初
PART 02 <ul><li>开发过程 </li></ul><ul><li>设计稿 </li></ul><ul><li>HTML </li></ul><ul><li>CSS </li></ul><ul><li>Javascriprt </li...
PART 01 ——  高端版 <ul><li>主要平台 </li></ul><ul><li>——  iOS & Android </li></ul><ul><li>代表浏览器 </li></ul><ul><ul><li>——  Mobile ...
PART 01 ——  高端版
PART 01 ——  与桌面 WEB 应用的区别 <ul><li>有限的屏幕大小 </li></ul><ul><li>屏幕旋转自适应 </li></ul><ul><li>基于 Webkit 内核浏览器 </li></ul><ul><li>——...
PART 01 ——  基础知识 <ul><li>1.  私有 meta 属性 </li></ul><ul><li><meta content=&quot; width=device-width,  initialscale=1.0,  max...
PART 01 ——  基础知识 <ul><li>2.  私有 CSS 属性 </li></ul><ul><li>-webkit-box-shadow:none;  设置内外阴影和发光效果。 </li></ul><ul><li>-webkit-...
PART 01 —— 基础知识 <ul><li>3. CSS3 高级属性 </li></ul><ul><li>nth-child  与  nth-of –type </li></ul><ul><li>X:nth-child(Y)  :匹配元素类...
PART 01 —— 基础知识 <ul><li>4.  检测设备 </li></ul><ul><li>navigator.userAgent.match(/iPhone|iPod|android|…/i ) </li></ul>
PART 01 ——  基础知识 <ul><li>5.  自动隐藏地址栏 </li></ul><ul><li>setTimeout(scrollTo, 0, 0, 1); </li></ul><ul><li>条件:文档内容高度  >  窗口高度...
PART 01 ——  基础知识 <ul><li>7.  事件 </li></ul><ul><li>单手指操作触摸 </li></ul><ul><li>touchstart 、 touchmove 、 touchend   和  touchca...
PART 02 ——  开发过程 开发过程 设计稿 HTML CSS Javascriprt 搭建模块 遇到的问题 性能分析
PART 02 ——  设计稿
 
<ul><li>拿到设计稿后 </li></ul><ul><li>了解设计需求,有疑问与 PD 或设计师沟通 </li></ul><ul><li>确定页面开发先后顺序(有主有次,有难有易) </li></ul><ul><li>分析页面,大体把握...
PART 02 —— HTML <ul><li>代码简洁,语法规范 </li></ul><ul><li>确定点击区域, a 标签块级化 </li></ul><ul><li>空标签的处理(看情况) </li></ul>
PART 02 —— CSS <ul><li>小三角 </li></ul><ul><li>上下左右边距 / 框 </li></ul><ul><li>不要限制高度 </li></ul><ul><li>自适应宽度 </li></ul><style>...
PART 02 —— JS <ul><li>类目展开与收起 </li></ul><ul><li>吊顶 </li></ul><ul><li>轮播 </li></ul><ul><li>瀑布流 </li></ul>
PART 02 ——  搭建模块 <ul><li>标题是否需要编辑 </li></ul><ul><li>哪些内容由前端决定,哪些内容由运营填写。 </li></ul><ul><li>问题 1 :在 img 中加 alt 或 title , ti...
PART 02 ——  遇到的问题 <ul><li>1.  自适应高度 </li></ul>
PART 02 ——  遇到的问题 <ul><li>2.  回顶部 </li></ul>
PART 02 ——  遇到的问题 <ul><li>3.  瀑布流 </li></ul><ul><li>图片叠加问题 </li></ul><ul><li>滚动高度问题 </li></ul><ul><li>iOS 的 $(window).scro...
 
PART 02 ——  性能分析 <ul><li>YSlow for Mobile/Bookmarklet </li></ul><ul><li>http://developer.yahoo.com/yslow/mobile/ </li></ul...
<ul><li>m.tmall.com  iOS4.3 </li></ul>
<ul><li>Thank You! </li></ul>
Upcoming SlideShare
Loading in …5
×

高端版Tmall

1,590 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,590
On SlideShare
0
From Embeds
0
Number of Embeds
52
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

高端版Tmall

  1. 1. 移动高端版 TMALL 夏初
  2. 2. PART 02 <ul><li>开发过程 </li></ul><ul><li>设计稿 </li></ul><ul><li>HTML </li></ul><ul><li>CSS </li></ul><ul><li>Javascriprt </li></ul><ul><li>搭建模块 </li></ul><ul><li>遇到的问题 </li></ul><ul><li>性能分析 </li></ul>PART 01 <ul><li>Mobile Web App </li></ul><ul><li>高端版 </li></ul><ul><li>与桌面 WEB 应用的区别 </li></ul><ul><li>基础知识 </li></ul>
  3. 3. PART 01 —— 高端版 <ul><li>主要平台 </li></ul><ul><li>—— iOS & Android </li></ul><ul><li>代表浏览器 </li></ul><ul><ul><li>—— Mobile Safari / Android Webkit </li></ul></ul>
  4. 4. PART 01 —— 高端版
  5. 5. PART 01 —— 与桌面 WEB 应用的区别 <ul><li>有限的屏幕大小 </li></ul><ul><li>屏幕旋转自适应 </li></ul><ul><li>基于 Webkit 内核浏览器 </li></ul><ul><li>—— 支持 HTML5 、 CSS3 </li></ul><ul><li>足够大的点击范围 </li></ul><ul><li>触发事件 </li></ul><ul><li>—— 触摸、手势、重力感应 </li></ul>
  6. 6. PART 01 —— 基础知识 <ul><li>1. 私有 meta 属性 </li></ul><ul><li><meta content=&quot; width=device-width,  initialscale=1.0,  maximum-scale=1.0,  user-scalable=0;&quot;  name=&quot; viewport &quot; /> </li></ul><ul><li><meta content=&quot;yes&quot; name=&quot; apple-mobile-web-app-capable &quot; /> </li></ul><ul><li><meta content=&quot;black&quot; name=&quot; apple-mobile-web-app-status-bar-style &quot; /> </li></ul><ul><li><meta content=&quot;telephone=no&quot; name=&quot; format-detection &quot; /> </li></ul>
  7. 7. PART 01 —— 基础知识 <ul><li>2. 私有 CSS 属性 </li></ul><ul><li>-webkit-box-shadow:none; 设置内外阴影和发光效果。 </li></ul><ul><li>-webkit-tap-highlight-color 设置焦点框效果 </li></ul><ul><li>-webkit-text-size-adjust:none; 设置后旋转屏幕字体大小不变 </li></ul><ul><li>-webkit-transform 用于变形(静态) </li></ul><ul><li>-wedkit-transition 用于动画(动态) </li></ul><ul><li>-webkit-user-select:none; 禁止用户选择 </li></ul><ul><li>-webkit-box-flex 与 display:-webkit-box 配合使用,用于设置元素宽度所占比例 </li></ul>
  8. 8. PART 01 —— 基础知识 <ul><li>3. CSS3 高级属性 </li></ul><ul><li>nth-child 与 nth-of –type </li></ul><ul><li>X:nth-child(Y) :匹配元素类型为 X ,且为父元素的第 Y 个子元素。重在第几个孩子! </li></ul><ul><li>X:nth-of-type(Y) :匹配元素类型为 X ,且为父元素的第 Y 个类型 ( 指标签类型而非属性类型 ) 为 X 的子元素。重在第几个 X 类型! </li></ul><ul><li>二者区别在于,列表中插入其它类型的标签时, nth-child 值改变,而 nth-of-type 值不变。 </li></ul><ul><li>Y = an+b a 表示步长, b 表示从第几个元素开始 </li></ul>
  9. 9. PART 01 —— 基础知识 <ul><li>4. 检测设备 </li></ul><ul><li>navigator.userAgent.match(/iPhone|iPod|android|…/i ) </li></ul>
  10. 10. PART 01 —— 基础知识 <ul><li>5. 自动隐藏地址栏 </li></ul><ul><li>setTimeout(scrollTo, 0, 0, 1); </li></ul><ul><li>条件:文档内容高度 > 窗口高度 </li></ul><ul><li>6. 检测页面旋转 </li></ul><ul><li>通过 window.orientation 属性获取当前页面方向: </li></ul><ul><li>0 正常的竖直方向 -90 默认方向顺时针 90° 90 默认方向逆时针 90° 180 反向竖直方向,暂时手机还不支持 </li></ul>
  11. 11. PART 01 —— 基础知识 <ul><li>7. 事件 </li></ul><ul><li>单手指操作触摸 </li></ul><ul><li>touchstart 、 touchmove 、 touchend 和 touchcancel </li></ul><ul><li>两根手指的缩放和旋转 </li></ul><ul><li>gesturestart 、 gestureend 和 gesturechange </li></ul>
  12. 12. PART 02 —— 开发过程 开发过程 设计稿 HTML CSS Javascriprt 搭建模块 遇到的问题 性能分析
  13. 13. PART 02 —— 设计稿
  14. 15. <ul><li>拿到设计稿后 </li></ul><ul><li>了解设计需求,有疑问与 PD 或设计师沟通 </li></ul><ul><li>确定页面开发先后顺序(有主有次,有难有易) </li></ul><ul><li>分析页面,大体把握页面结构(哪些模块可以复用,避免重复开发,提高效率) </li></ul>
  15. 16. PART 02 —— HTML <ul><li>代码简洁,语法规范 </li></ul><ul><li>确定点击区域, a 标签块级化 </li></ul><ul><li>空标签的处理(看情况) </li></ul>
  16. 17. PART 02 —— CSS <ul><li>小三角 </li></ul><ul><li>上下左右边距 / 框 </li></ul><ul><li>不要限制高度 </li></ul><ul><li>自适应宽度 </li></ul><style> .floor-brand{ display: -webkit-box; } .floor-brand a{ display: block; -webkit-box-flex: 1; } </style> <div class=“floor-brand”> <a><img src=“” /></a> <a><img src=“” /></a> <a><img src=“” /></a> </div> <ul><li>.floor-cap span:after { </li></ul><ul><ul><li>content: ' 00a0'; </li></ul></ul><ul><ul><li>display: block; </li></ul></ul><ul><ul><li>position: absolute; </li></ul></ul><ul><ul><li>top: 15px; </li></ul></ul><ul><ul><li>right: 73px; </li></ul></ul><ul><ul><li>height: 0; </li></ul></ul><ul><ul><li>width: 0; </li></ul></ul><ul><ul><li>border-color: transparent transparent transparent white; </li></ul></ul><ul><ul><li>border-style: solid; </li></ul></ul><ul><ul><li>border-width: 4px; </li></ul></ul><ul><li>} </li></ul>li:nth-of-type(3n) { border-right: none; } li:nth-last-of-type(-n+3) { border-bottom: 0; }
  17. 18. PART 02 —— JS <ul><li>类目展开与收起 </li></ul><ul><li>吊顶 </li></ul><ul><li>轮播 </li></ul><ul><li>瀑布流 </li></ul>
  18. 19. PART 02 —— 搭建模块 <ul><li>标题是否需要编辑 </li></ul><ul><li>哪些内容由前端决定,哪些内容由运营填写。 </li></ul><ul><li>问题 1 :在 img 中加 alt 或 title , title 中有 <br /> 则会被截断出错。 </li></ul><ul><li>问题 2 :标题为空,则被无线的解析模板解析为自闭合,出错。 </li></ul>
  19. 20. PART 02 —— 遇到的问题 <ul><li>1. 自适应高度 </li></ul>
  20. 21. PART 02 —— 遇到的问题 <ul><li>2. 回顶部 </li></ul>
  21. 22. PART 02 —— 遇到的问题 <ul><li>3. 瀑布流 </li></ul><ul><li>图片叠加问题 </li></ul><ul><li>滚动高度问题 </li></ul><ul><li>iOS 的 $(window).scrollTop() 返回 0 ,应该使用 window.scrollY 获取滚动条的实时数值; </li></ul>
  22. 24. PART 02 —— 性能分析 <ul><li>YSlow for Mobile/Bookmarklet </li></ul><ul><li>http://developer.yahoo.com/yslow/mobile/ </li></ul><ul><li>Mobitest </li></ul><ul><li>http://www.blaze.io/mobile/ </li></ul>
  23. 25. <ul><li>m.tmall.com iOS4.3 </li></ul>
  24. 26. <ul><li>Thank You! </li></ul>

×