JD_M案例知识点（移动端）

JD_M案例知识点

---

基础布局+顶部通栏+顶部轮播图+导航栏

知识点

1. base.css

• ::before,::after 伪元素

1. 统一设置文字 sans-serif 移动端 的默认字体
   
   font-family: '微软雅黑',sans-serif;

2. 设置背景图片的大小压缩了一倍 目的是为了防止用户看到像素颗粒，如果要一行写完background，size要加“/”

3. 轮播图——左右两张的无限轮播图

• 最左边加上最后一张
• 最右边加上第一张图
• 默认给用户看的是：如果用索引来说，是索引为1的那一张（最前面一张的索引为0）

1. 图片分辨率问题

• ios中，会准备多张图片
• 早期的web开发中也会准备多张图片
• 现在流行的是准备一张大图然后进行压缩

1. 为了保证零头不影响布局

• 设置：width: 33.33333%;
• 而不是：width: 33%;

1. 移动端屏幕适配布局方式：

• 宽度百分比，定高
• viewport

1. 抽取通用样式的目的：

• 方便使用
• 将常用的样式定义为通用的资源，使用时直接添加class名字就可以

技术点：less

• 优点

  1. 为CSS赋予了动态的语言特性
  2. 变量、继承、运算、函数等，方便CSS的编写与维护

• sublime安装less插件

  1. 下载压缩包
  2. sublime 菜单的 倒数第二项
  • 第一个选项
  • 把弹出的文件夹的路径，复制
  1. 双击压缩包
  • 解压到
  • 将复制的路径 拷贝进去
  • 确定解压
  1. 开关sublime 即可

• less只是一个纯文本

  1. 装插件与否 仅仅影响的是 高亮效果
  2. 不影响代码的编写
  3. webstorm 我需要研究一下再告诉大家

• less使用

  1. 创建后缀是.less的文件
  2. 运行考拉
  3. 讲less的文件夹拖入考拉
  4. 只要保存.less文件 ctrl+s 考拉 会自动帮助我们进行 编译
  • 编译的作用是: 讲less 转化为 .css文件
  • 讲less中的语法 根据一定的规则 替换为 对应的css代码

• 考拉编译注意点

  1. 如果弹出红色框框 意味着 写错了代码
  2. 如果放.less文件的 文件夹 叫做 less
  • 在编译的时候 会在跟less文件夹同级的目录下 创建一个 叫css的文件 编译好的代码就在那里面
  1. 如果文件夹名不叫 less 而是 其他的 那么 会在统计目录下

• less的作用

  • 变量的作用
    1. 实现 替换变量值,所有使用变量的地方 都会被替换
    2. 比如 页面大量使用jd红,要换位 淘宝红 只需要替换变量值即可
  • 京东m使用less来写
    1. jd红 定义变量
    2. 嵌套多的结构 使用 less的 嵌套写法
    3. 混合的 写法 可以 先别急着 用上去：width:100%;

less语法

1. 注释

• //注释：less支持跟js一样是注释，并且这样的注释
• /我是一行注释，编译时，该注释会被保留/

1. 变量定义

//格式：变量名:变量值
@jdRed: rgb(201,21,35);

//定义宽度
@minWidth:100px;

//定义图片尺寸
@imgSize:100px 100px;

1. 类似于函数用法

• 括号中 参数名: 参数的默认值
• 如果使用 该class 进行混合时，如果不传递参数,会使用默认值

.red{
  background-color: red;
  border:1px solid red;
  color:red;
}

.oneColor(@color:#0094ff){
  background-color: @color;
  border:1px solid @color;
  color:@color;
}

body{
  .red();
}

ul{
  .oneColor(yellow);
}

div{
  .oneColor();
}

1. 嵌套

//css
.box {
    background: #fff;
}
.box ul {
    color: red;
}

//less
.box {
    background: #fff;
    ul {
        color: red;
    }
}

js基础

1. 滚动后顶部通栏透明度

• scrollTop获取滚动后，导航栏距离顶部的距离，最新版本浏览器（chrome和火狐，其他没有测试）不能使用document.body.scrollTop获取，只能使用document.documentElement.scrollTop获取。

2. 倒计时

• 先获取一些必要元素
• 每个一秒执行一次代码（定时器）
• 易错点1：dom元素修改文本，需要用.innerHTML
• 易错点2：时分秒的十位数记得取整，否则显示的是小数

3. 轮播图

• 自动轮播图

  1. 定义index记录索引值
  2. 获取一些必须要知道的变量
  • 单个元素宽度
  • 轮播图的ul（很长的ul：1000%）
  • 索引的ul里面的li（li数组）
  1. 定时器
  • index++
  • 修改ul位置
  • 使用过渡来实现动画（缓动）效果
  1. 过渡结束事件
  • transitionend
  • 加前缀：webkitTransitionEnd
  • 需要使用addEventListener的方式添加
  • 默认的方法名为transitionend
  • 由于浏览器兼容性问题，可能需要添加前缀
    • webkitTransitionEnd
    • mozTransitionEnd
    • msTransitionEnd
    • oTransitionEnd

• 移动端特有事件

  1. touch
  • touchstart：当手指触摸屏幕时触发，事件参数中有触摸点的值
  • touchmove：当手指在屏幕上滑动时连续的触发，事件参数中有触摸点的值
  • touchend：当手指从屏幕上移开时触发，事件参数中没有触摸点的值
  1. 特点
  • 不能通过doc.ontouchstart的方式去绑定
  • 只能addEventListener的方式进行绑定
  • 只在移动设备上支持
  1. 常见封装
  • 左滑，右滑
  • 长按
  • 捏合
  • 这些事件都是基于touch三个事件的封装

4. 注意

• 实际开发中，页面的数据的获取
• 如果是一个动态网站（基本上现在是所有网站都是动态的），页面中的内容是动态生成的
  • 比如：img的src属性，a标签的本质，页面布局效果等
• 不刷新页面获取新数据：ajax技术
  • 发送请求即可
  • 在什么情况下发送请求：
    
    1.点击加载更多：点击发送ajax
    
    2. 滚动加载更多：滚动发送ajax
    
    3. 失去焦点验证用户名：失去焦点事件发送ajax

分类搜索页面(list.html)

1. 左侧滑动

• 向上移动，是y的负方向
• 移动的最小值：父盒子的长度-ul的长度
• 移动的最大值：默认是0

2. 让代码的通用性更强

• 关于DOM元素的值：通过先获取DOM元素，然后根据DOM元素获取：

  • 高度
  • 宽度
  • 子元素个数
  • 默认的样式等

• 不要在代码中出现magicNumber

  • magicNumber：代码中写死具体的数值style.transition='all .3s';
  • 或者是：distance += 10;
  • 对于代码量足够大的项目，如果大量使用magicNumber，那么维护起来是致命的。
  • 实际开发中，在代码最开始的时候定义一大堆的变量
  • 成熟的代码一般都是先定义变量

• 移动端click事件的触发，会延迟200ms

  • 为了提升用户体验，能顾实时触发，一般会自己封装一个叫tap的方法，手指触发
  • touch只有3个，左右滑动，滚动都是封装的
  • 如何算tap事件：手指点上去不移动，快速松开。用以下三个事件封装：
    • touchstart
    • touchmove：手指不动是不会触发的，只要能执行这个方法，就是失效的，因此不移动的逻辑，可以在这里实现
    • touchend：记录开始时间的差值

• console.log();是十分消耗性能的，所以该方法只会出现在测试阶段，上线时会去掉。

• 使用老版本的谷歌浏览器，刚切换到移动端视口时还能够看到click的延迟效果，如果刷新之后就看不到了。

• 手机测试：

  • 比较low的方法，（公司不用）
    • 直接拷贝到手机上，通过手机的资源管理器打开html文件，指定使用的浏览器即可
    • 手机登陆qq
    • 电脑登陆qq：发送到我的设备，手机qq打开网站，选择使用的浏览器，注意iphone只支持使用qq浏览器才能打开
  • 公司里用的方法：会有一个专门的测试服务器，写好了以后上传即可
  • wamp：
    • 配置完成以后，将自己的移动站点丢到这里
    • 保证手机跟电脑在统一各局域网中（连着同一个wifi）：手机打开浏览器输入电脑的IP地址即可访问

• 索引值的获取：

  1. 可以在for循环中获取
  2. 为每一个li保存一个索引属性：<body data-index='1'>，点击li的时候获取该属性的值即可：dom.dataSet['index'];

• 解决左侧点击到li标签的问题：

  为了让a标签的点击范围增大，避免出现用户点击不到a标签的情况：将a标签的宽高设置为100%
  display: block;
  width: 100%;
  height: 100%;
  

响应式+bootstrap

基本概念

• 针对所有设备
• 目的是开发一次即可
• 会根据设备的屏幕尺寸改变而改变布局

技术的选择

• 老项目
  • 推出的时候手机还没有这么流行
  • 重新开发一个移动端的站点
• 新项目
  • 直接做响应式站点
• 性能考虑
  • 在时间、金钱允许的情况下，各开发一个版本是最好的
• 响应式网站的缺点：代码较多、维护较为复杂
• 工作中是否选用？看leader：选择项目使用的技术
• 开发时间：一般情况是，快于1+1

其他

• 如果直接使用js也是能够实现效果的，只不过可能代码较多
• 直到CSS3中推出了媒体查询：就是可以通过css去获取一些设备的信息

多媒体查询

-CSS2多媒体查询

• @media 规则在CSS2中有介绍，针对不同的媒体类型可以定制不同的样式规则。

• CSS3多媒体查询

  • CSS2的多媒体查询继承了CSS2多媒体类型的所以思想：取代了查找设备的类型，CSS3根据设置自适应显示。
  • 媒体查询可用于检测很多事情，例如：
    • viewport(视窗)的宽度与高度
    • 设备的宽度与高度
    • 朝向(智能手机横屏，竖屏)。
    • 分辨率
  • 目前很多针对iOS、Android手机，平板等设备都会用到多媒体查询。
  • 浏览器支持：chrome21.0，IE9.0，firefox3.5，safari4.0，opare
  • 媒体查询的基础语法：
    • 设备的屏幕尺寸大于等于480的时候，使用括号内的样式
    • 也遵循层叠样式表的
    • 为了避免样式覆盖
    • 可以修改先后顺序
  • 实例：

    @media screen and (min-width: 480px) {
        #leftsidebar {
    		  width: 200px;
        float: left;
    	  }
      #main {
        margin-left: 216px;
      }
      }
  

bootstrap字体图标

• 第一步：glyphicon
  • 设置图标的位置

  .glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
  
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  

• 第二步：glyphicon-barcode
  • 设置图标内容

  .glyphicon-barcode:before {
    content: "\e040";
  }
  

前端框架

有一对预定义的代码

• html，css
• 也有一部分封装的js

可以直接使用

• 直接使用定义好的class
• 直接使用它定义好的html层次结构（组件）

也可以改参数使用

bootstrap

• 2.x：早期的，目前很难看到
• 3.x：目前较为流行的版本，其中使用较多的是3.3.5
• 4.x：在测试中，更为侧重于移动端

全局CSS样式

• 设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。

• Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

• Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

• 为了确保适当的绘制和触屏缩放，需要在 之中添加 viewport 元数据标签。
  
  <meta name="viewport" content="width=device-width, initial-scale=1">

• 在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

• 预定义的CSS样式

  • 直接将需要的类添加给对应的标签，就可以得到想要的效果

• 栅格系统

  • Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

  • 栅格

  • .container（固定宽度）

    • row，column
    • 在某个范围内取值是一定的

  • .container-fluid（100%宽度）

    • row，column
    • 会根据父盒子进行适当的缩放

  • 默认将一行分为12份，在col后面对应的数字表示该单元格占几份

  • 如果超过了12换行

  • 如果想要在不同的品目宽度上，实现不同的布局，可以通过添加col-lg、col-md、col-sm、col-xs

  • 如果只写了col-lg，那么会在小于1200的宽度下占一行

  • 如果只写了col-lg col-md，那么会在小于992的宽度下占一行

  • 如果只写了col-lg col-md col-ms，那么会在小于768的宽度下占一行

  • 如果只写了col-lg col-md col-ms col-xs，会在对应的屏幕宽度下使用设置的值

  • 实例：从堆叠到水平排列

  • 栅格的好处

  • 示例：微金所顶部通栏

    • 栅格搭好框架
    • 内部的子元素以及子元素的布局还是使用自己手写css的方式