一.什么是M站?
- 适用于在
手机浏览器上浏览的互联网WEB网站,也叫移动网页端; - 运行原理: 手机上的
Safari浏览器/UC浏览器/百度浏览器/QQ浏览器通过Webkit内核去加载我们写好的Html5和css 文件. - 什么是WebKit内核?
- WebKit其实就是一个浏览器的内置引擎,比如火狐的
Gecko和IE的Trident; - WebKit内置两大引擎:
WebCore排版引擎和JSCore引擎; - WebKit优势:1.高效稳定,2.兼容性好,3.且源码结构清晰,易于维护;
- Apple的Safari,Google的Chrome都是基于WebKit,当然Google有更好的V8引擎进行支撑;
- WebKit内核在手机上应用十分广泛,像Google的Android/Apple的iPhone所使用的Browser内核引擎,都是基于WebKit.
- WebKit其实就是一个浏览器的内置引擎,比如火狐的
- 哪些公司需要M站?
二.电商类型的M站首页布局特点
- 五部分:从上往下依次是 导航搜索头部,无限轮播banner图,产品分类索引,产品中心,tabBar选项卡
Snip20170517_4.png
- 产品中心从上而下又分三部分:秒杀/各种类型/推荐
Snip20170517_5.png
三.京东商城M站课程安排
-
总体目标:
- 首页
- 商品分类页
- 购物车
-
技术要求:
- 原生
HTML+CSS+JS实现
- 原生
-
技术难点: 移动设备的适配
- 屏幕适配与布局
- 设备控制与交互
- 性能优化
-
运行在移动端的M站如何解决屏幕适配?
- 媒体查询:使用多套css布局
- 通过rem代替px进行布局
- flex弹性布局
- 百分比布局(流体布局),
京东商城M站采用百分比自适应适配
- 优点
1. 流动布局页面对用户更友好，因为它能自适应用户的设置。
2. 页面周围的空白区域在所有分辨率和浏览器下都是相同的，在视觉上更美观。
3. 如果设计良好，流动布局可以避免在小分辨率下出现水平滚动条。
- 缺点
1. 设计者更难控制用户所见，并可能忽略掉一些错误，因为在特定的分辨率下看起来好的；
2. 图片，视频以及其他设置了宽度的内容可能需要多种宽度以适应不同分辨率的用户；
3. 在特别大的分辨率下，内容会被拉成长长的一行，变得难以阅读；
4. 会有画面失真问题
- 关键点: 视口
ViewPort
3.1. 基础概念
3.1.1 像素单位
-
-
iOS开发中通常要做@2x,@3x等3套图
Snip20170518_6.png css像素和设备像素的关系
1CSS pixels=（devicePixelRatio）^2 device pixels
-
pixel - px ( picture element )
dpi / ppi - 每英寸像素 ( dot per inch )
dips - 设备独立像素 ( device-independent pixels )
devicePixelRatio - 物理像素 / 设备独立像素
- 在移动端浏览器中以及某些桌面浏览器中，可通过
window.devicePixelRatio
获取设备物理像素和设备独立像素的比例,devicePixelRatio = 物理像素 / 独立像素
比如在4s上,值为2. (注意，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题,参考)
四.ViewPort(参考)
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。
-
Define ViewPort:
- 通俗的讲，移动设备上的viewport就是
设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。 - 在默认情况下，一般来讲，
移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小. - 为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的
浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。 -
下图列出了一些设备上浏览器的默认viewport的宽度。
viewpoint_01.png
- 通俗的讲，移动设备上的viewport就是
- 在M站中统一对ViewPort进行控制
- 在head标签中写入: meta:vp+tab键,即可得到
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
// 该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放，这样就不会出现横向滚动条。
* *initial-scale*
初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。
* maximum-scale
最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数
* user-scalable
用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。
部分M站(eg.淘宝)会根据屏幕真实分别率设置initial-scale,比如
@2x的0.5,@3x的0.33由于手机型号众多,完全适配所有的成本非常大,最终取舍方案为:宽度范围在
300px~640px取舍
五.京东首页
- 清除移动端设备默认的点击高亮效果
- iOS设备与大部分Android设备(效果有差别)
- 点击一个
链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景 - 重设这个表现，你可以设置-webkit-tap-highlight-color:rgba()。
想要禁用这个高亮
-webkit-tap-highlight-color: transparent;
- 针对iOS设备的默认扁平化UI
/* 去除iOS默认的一些非扁平化控件效果(风格不符合不如不要) */
-webkit-appearance: none;
- on与addEvenListener的区别
/* OnClick方法会被覆盖,也就是多次执行只会执行一次,
* addEventListener不会被覆盖,会全部触发,执行的是冒泡规则
* element.addEventListener(event, function, useCapture)
* event 必须。字符串，指定事件名。
(注意: 不要使用 "on" 前缀。
例如，使用 "click" ,而不是使用 "onclick"。 )
* function 必须。指定要事件触发时执行的函数。
(当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。
例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。)
* useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
(可能值: true - 事件句柄在捕获阶段执行;false- false- 默认。
事件句柄在冒泡阶段执行)
* */
-
移动web开发常用事件
-
Touch事件
- touchstart 当手指触碰屏幕的时候触发，不管当前有多少只手指。
- touchmove 当手指在屏幕中滑动时候连续触发。移动端在用这个事件的时候通常会调用 e.preventDefault()来阻止默认触发的页面滚动事件。
- touchend 当手指离开屏幕的时候触发。
- touchcancel 系统停止跟踪触摸时候会触发。
-
触摸点：我们可以通过事件的event获取需要的相关触摸点信息
- targetTouches 目标元素的所有当前触摸点
- changedTouches 页面上最新更改的所有触摸点
- touches 页面上的所有触摸点 touches[0]
在每个触摸点中我们可以获取以下属性
- clientX:触摸目标在视口中的X坐标。
- clientY:触摸目标在视口中的Y坐标。
- pageX：触摸目标在页面中的x坐标。
- pageY：触摸目标在页面中的y坐标。
- screenX:触摸目标在屏幕中的x坐标。
- screenY:触摸目标在屏幕中的y坐标。
- target:触摸的DOM节点坐标。
-
Gesture 事件（不常用）
- gesturestart 当一个手指触摸屏幕之后，第二个手指再触摸屏幕时触发。
- gesturechange 当上面的事件触发后立即触发。
- gestureend 第二根手指离开屏幕时触发，之后将不会再次触发gesturechange。
- 在event当中会返回另外两个参数： scale 根据两个手指的滑动距离计算的缩放比例 初始1，rotation根据两个手指的滑动距离计算的旋转角度 初始 0。
- 过渡和动画结束事件
- transitionEnd 过渡结束后触发。
- animationEnd 动画结束后触发
- 首页的三个JS效果
- 1.头部透明度:
alpha取值范围:[0,0.8];
UI作用范围: body.scrollTop在[0, bannerH]之间
- 2.焦点图: 业务逻辑主要分两部分
- 自动无限轮播:
1.定时器每秒过渡滚动一次
2.过渡结束后:
index范围判断,若滚动到边界则进行index转移以及非过渡位移
切换白点
- 手势滑动
1.手势开始时停止计时器
2.滑动手势期间:
- 清除默认事件event.preventDefault
- 非过渡滚动:切换x值=当前x值+movedX
3.手势结束
- 根据movedX,确定index--/++or不动,并过渡翻页
- 重启定时器
- 数据重置(optional)
- 3.秒杀倒计时
假设 每天3场抢购 0点场 8点场 16点场
当前处于 1.x点场 2.离下一场还剩多少时间 3.每秒展示一次
六、分类板块
-
让按钮占据足够大的空间，方便用户点击
padding: 12px 10px; /* 背景图相对于内容框来定位 */ -webkit-background-clip: content-box; background-clip: content-box; /* 背景图定位从内容开始计算 */ -webkit-background-origin: content-box; background-origin: content-box; 分类左边内容
<ul id="category_list">
<li class="current"><a href="javascript:;">家用电器</a></li>
<li><a href="javascript:;">电脑办公</a></li>
<li><a href="javascript:;">手机数码</a></li>
<li><a href="javascript:;">母婴童装</a></li>
<li><a href="javascript:;">图书</a></li>
<li><a href="javascript:;">家居家纺</a></li>
<li><a href="javascript:;">厨房用品</a></li>
<li><a href="javascript:;">家居建材</a></li>
<li><a href="javascript:;">食品生鲜</a></li>
<li><a href="javascript:;">酒水饮料</a></li>
<li><a href="javascript:;">运动户外</a></li>
<li><a href="javascript:;">鞋靴箱包</a></li>
<li><a href="javascript:;">奢品礼品</a></li>
<li><a href="javascript:;">钟表珠宝</a></li>
<li><a href="javascript:;">玩具乐器</a></li>
<li><a href="javascript:;">内衣配饰</a></li>
<li><a href="javascript:;">汽车用品</a></li>
<li><a href="javascript:;">音像制品</a></li>
<li><a href="javascript:;">医药保健</a></li>
<li><a href="javascript:;">计生情趣</a></li>
<li><a href="javascript:;">全球购</a></li>
<li><a href="javascript:;">京东金融</a></li>
<li><a href="javascript:;">生活旅行</a></li>
<li><a href="javascript:;">宠物农资</a></li>
</ul>
- 分类交互效果
- 1.左边的手势滑动与手势点击
手势滑动: 理解 ul的top值合理区间与合理运动区间
注意点1: touchmove期间,只能在合理区间与buffer区间ul移动
注意点2: touchend期间,buffer区间内则过渡回到正常边界,在合理区间内则保持不动
手势点击:先封装tap
