一.什么是M站?
- 適用于在
手機瀏覽器上瀏覽的互聯(lián)網(wǎng)WEB網(wǎng)站,也叫移動網(wǎng)頁端; - 運行原理: 手機上的
Safari瀏覽器/UC瀏覽器/百度瀏覽器/QQ瀏覽器通過Webkit內(nèi)核去加載我們寫好的Html5和css 文件. - 什么是WebKit內(nèi)核?
- WebKit其實就是一個瀏覽器的內(nèi)置引擎,比如火狐的
Gecko和IE的Trident; - WebKit內(nèi)置兩大引擎:
WebCore排版引擎和JSCore引擎; - WebKit優(yōu)勢:1.高效穩(wěn)定,2.兼容性好,3.且源碼結(jié)構(gòu)清晰,易于維護;
- Apple的Safari,Google的Chrome都是基于WebKit,當然Google有更好的V8引擎進行支撐;
- WebKit內(nèi)核在手機上應用十分廣泛,像Google的Android/Apple的iPhone所使用的Browser內(nèi)核引擎,都是基于WebKit.
- WebKit其實就是一個瀏覽器的內(nèi)置引擎,比如火狐的
- 哪些公司需要M站?
二.電商類型的M站首頁布局特點
- 五部分:從上往下依次是 導航搜索頭部,無限輪播banner圖,產(chǎn)品分類索引,產(chǎn)品中心,tabBar選項卡
Snip20170517_4.png
- 產(chǎn)品中心從上而下又分三部分:秒殺/各種類型/推薦
Snip20170517_5.png
三.京東商城M站課程安排
-
總體目標:
- 首頁
- 商品分類頁
- 購物車
-
技術要求:
- 原生
HTML+CSS+JS實現(xiàn)
- 原生
-
技術難點: 移動設備的適配
- 屏幕適配與布局
- 設備控制與交互
- 性能優(yōu)化
-
運行在移動端的M站如何解決屏幕適配?
- 媒體查詢:使用多套css布局
- 通過rem代替px進行布局
- flex彈性布局
- 百分比布局(流體布局),
京東商城M站采用百分比自適應適配
- 優(yōu)點
1. 流動布局頁面對用戶更友好涣易，因為它能自適應用戶的設置著觉。
2. 頁面周圍的空白區(qū)域在所有分辨率和瀏覽器下都是相同的箭券，在視覺上更美觀。
3. 如果設計良好，流動布局可以避免在小分辨率下出現(xiàn)水平滾動條。
- 缺點
1. 設計者更難控制用戶所見，并可能忽略掉一些錯誤，因為在特定的分辨率下看起來好的辟汰；
2. 圖片，視頻以及其他設置了寬度的內(nèi)容可能需要多種寬度以適應不同分辨率的用戶阱佛；
3. 在特別大的分辨率下帖汞，內(nèi)容會被拉成長長的一行，變得難以閱讀凑术；
4. 會有畫面失真問題
- 關鍵點: 視口
ViewPort
3.1. 基礎概念
3.1.1 像素單位
-
-
iOS開發(fā)中通常要做@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(參考)
在移動設備上進行網(wǎng)頁的重構(gòu)或開發(fā)淮逊，首先得搞明白的就是移動設備上的viewport了催首，只有明白了viewport的概念以及弄清楚了跟viewport有關的meta標簽的使用，才能更好地讓我們的網(wǎng)頁適配或響應各種不同分辨率的移動設備泄鹏。
-
Define ViewPort:
- 通俗的講郎任，移動設備上的viewport就是
設備的屏幕上能用來顯示我們的網(wǎng)頁的那一塊區(qū)域，在具體一點备籽，就是瀏覽器上(也可能是一個app中的webview)用來顯示網(wǎng)頁的那部分區(qū)域舶治，但viewport又不局限于瀏覽器可視區(qū)域的大小，它可能比瀏覽器的可視區(qū)域要大车猬，也可能比瀏覽器的可視區(qū)域要小歼疮。 - 在默認情況下，一般來講诈唬，
移動設備上的viewport都是要大于瀏覽器可視區(qū)域的，這是因為考慮到移動設備的分辨率相對于桌面電腦來說都比較小. - 為了能在移動設備上正常顯示那些傳統(tǒng)的為桌面瀏覽器設計的網(wǎng)站缩麸，移動設備上的
瀏覽器都會把自己默認的viewport設為980px或1024px（也可能是其它值铸磅，這個是由設備自己決定的），但帶來的后果就是瀏覽器會出現(xiàn)橫向滾動條杭朱，因為瀏覽器可視區(qū)域的寬度是比這個默認的viewport的寬度要小的阅仔。 -
下圖列出了一些設備上瀏覽器的默認viewport的寬度。
viewpoint_01.png
- 通俗的講郎任，移動設備上的viewport就是
- 在M站中統(tǒng)一對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的寬度等于設備的寬度弧械，同時不允許用戶手動縮放八酒，這樣就不會出現(xiàn)橫向滾動條。
* *initial-scale*
初始縮放刃唐。即頁面初始縮放程度羞迷。這是一個浮點值界轩，是頁面大小的一個乘數(shù)。
* maximum-scale
最大縮放衔瓮。即允許的最大縮放程度浊猾。這也是一個浮點值，用以指出頁面大小與屏幕大小相比的最大乘數(shù)
* user-scalable
用戶調(diào)整縮放热鞍。即用戶是否能改變頁面縮放程度葫慎。如果設置為yes則是允許用戶對其進行改變，反之為no薇宠。默認值是yes偷办。如果你將其設置為no，那么minimum-scale 和 maximum-scale都將被忽略澄港，因為根本不可能縮放椒涯。
部分M站(eg.淘寶)會根據(jù)屏幕真實分別率設置initial-scale,比如
@2x的0.5,@3x的0.33由于手機型號眾多,完全適配所有的成本非常大,最終取舍方案為:寬度范圍在
300px~640px取舍
五.京東首頁
- 清除移動端設備默認的點擊高亮效果
- iOS設備與大部分Android設備(效果有差別)
- 點擊一個
鏈接或者通過Javascript定義的可點擊元素的時候，它就會出現(xiàn)一個半透明的灰色背景 - 重設這個表現(xiàn)慢睡，你可以設置-webkit-tap-highlight-color:rgba()逐工。
想要禁用這個高亮
-webkit-tap-highlight-color: transparent;
- 針對iOS設備的默認扁平化UI
/* 去除iOS默認的一些非扁平化控件效果(風格不符合不如不要) */
-webkit-appearance: none;
- on與addEvenListener的區(qū)別
/* OnClick方法會被覆蓋,也就是多次執(zhí)行只會執(zhí)行一次,
* addEventListener不會被覆蓋,會全部觸發(fā),執(zhí)行的是冒泡規(guī)則
* element.addEventListener(event, function, useCapture)
* event 必須。字符串漂辐，指定事件名泪喊。
(注意: 不要使用 "on" 前綴。
例如髓涯，使用 "click" ,而不是使用 "onclick"袒啼。 )
* function 必須。指定要事件觸發(fā)時執(zhí)行的函數(shù)纬纪。
(當事件對象會作為第一個參數(shù)傳入函數(shù)蚓再。 事件對象的類型取決于特定的事件。
例如包各， "click" 事件屬于 MouseEvent(鼠標事件) 對象摘仅。)
* useCapture 可選。布爾值问畅，指定事件是否在捕獲或冒泡階段執(zhí)行娃属。
(可能值: true - 事件句柄在捕獲階段執(zhí)行;false- false- 默認。
事件句柄在冒泡階段執(zhí)行)
* */
-
移動web開發(fā)常用事件
-
Touch事件
- touchstart 當手指觸碰屏幕的時候觸發(fā)护姆，不管當前有多少只手指矾端。
- touchmove 當手指在屏幕中滑動時候連續(xù)觸發(fā)。移動端在用這個事件的時候通常會調(diào)用 e.preventDefault()來阻止默認觸發(fā)的頁面滾動事件卵皂。
- touchend 當手指離開屏幕的時候觸發(fā)秩铆。
- touchcancel 系統(tǒng)停止跟蹤觸摸時候會觸發(fā)。
-
觸摸點：我們可以通過事件的event獲取需要的相關觸摸點信息
- targetTouches 目標元素的所有當前觸摸點
- changedTouches 頁面上最新更改的所有觸摸點
- touches 頁面上的所有觸摸點 touches[0]
在每個觸摸點中我們可以獲取以下屬性
- clientX:觸摸目標在視口中的X坐標灯变。
- clientY:觸摸目標在視口中的Y坐標殴玛。
- pageX：觸摸目標在頁面中的x坐標捅膘。
- pageY：觸摸目標在頁面中的y坐標。
- screenX:觸摸目標在屏幕中的x坐標族阅。
- screenY:觸摸目標在屏幕中的y坐標篓跛。
- target:觸摸的DOM節(jié)點坐標。
-
Gesture 事件（不常用）
- gesturestart 當一個手指觸摸屏幕之后坦刀，第二個手指再觸摸屏幕時觸發(fā)愧沟。
- gesturechange 當上面的事件觸發(fā)后立即觸發(fā)。
- gestureend 第二根手指離開屏幕時觸發(fā)鲤遥，之后將不會再次觸發(fā)gesturechange沐寺。
- 在event當中會返回另外兩個參數(shù)： scale 根據(jù)兩個手指的滑動距離計算的縮放比例 初始1，rotation根據(jù)兩個手指的滑動距離計算的旋轉(zhuǎn)角度 初始 0盖奈。
- 過渡和動畫結(jié)束事件
- transitionEnd 過渡結(jié)束后觸發(fā)混坞。
- animationEnd 動畫結(jié)束后觸發(fā)
- 首頁的三個JS效果
- 1.頭部透明度:
alpha取值范圍:[0,0.8];
UI作用范圍: body.scrollTop在[0, bannerH]之間
- 2.焦點圖: 業(yè)務邏輯主要分兩部分
- 自動無限輪播:
1.定時器每秒過渡滾動一次
2.過渡結(jié)束后:
index范圍判斷,若滾動到邊界則進行index轉(zhuǎn)移以及非過渡位移
切換白點
- 手勢滑動
1.手勢開始時停止計時器
2.滑動手勢期間:
- 清除默認事件event.preventDefault
- 非過渡滾動:切換x值=當前x值+movedX
3.手勢結(jié)束
- 根據(jù)movedX,確定index--/++or不動,并過渡翻頁
- 重啟定時器
- 數(shù)據(jù)重置(optional)
- 3.秒殺倒計時
假設 每天3場搶購 0點場 8點場 16點場
當前處于 1.x點場 2.離下一場還剩多少時間 3.每秒展示一次
六、分類板塊
-
讓按鈕占據(jù)足夠大的空間钢坦，方便用戶點擊
padding: 12px 10px; /* 背景圖相對于內(nèi)容框來定位 */ -webkit-background-clip: content-box; background-clip: content-box; /* 背景圖定位從內(nèi)容開始計算 */ -webkit-background-origin: content-box; background-origin: content-box; 分類左邊內(nèi)容
<ul id="category_list">
<li class="current"><a href="javascript:;">家用電器</a></li>
<li><a href="javascript:;">電腦辦公</a></li>
<li><a href="javascript:;">手機數(shù)碼</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:;">內(nèi)衣配飾</a></li>
<li><a href="javascript:;">汽車用品</a></li>
<li><a href="javascript:;">音像制品</a></li>
<li><a href="javascript:;">醫(yī)藥保健</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:;">寵物農(nóng)資</a></li>
</ul>
- 分類交互效果
- 1.左邊的手勢滑動與手勢點擊
手勢滑動: 理解 ul的top值合理區(qū)間與合理運動區(qū)間
注意點1: touchmove期間,只能在合理區(qū)間與buffer區(qū)間ul移動
注意點2: touchend期間,buffer區(qū)間內(nèi)則過渡回到正常邊界,在合理區(qū)間內(nèi)則保持不動
手勢點擊:先封裝tap
