Your SlideShare is downloading. ×

高端版Tmall

1,302
views

Published on


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

No Downloads
Views
Total Views
1,302
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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