本文主要是介紹開發移動端web相簿這樣一案例用到的前置知識。

一、移動端樣式

移動端更接近手機原生的方式。

如下是一個angular mobile的demo的例子：

移動端demo做成這樣的好處：

• 在手機端瀏覽器中開啟，接近原生app應用。
• 打包成Android或者ios的app，以原生app呈現

二、移動端web開發除錯工具

因為移動端主要的瀏覽器核心是webkit，所以可以用chrome開發。可以模擬UA和解析度。

模擬觸控行為，注意touch和click區別。

也可以開啟其他模擬。

三、移動端開發tips

 1、相容性

Android和ios都是webkit核心，firefox os是greasemonkey核心。

2、 其他差異

棄用事件mousedown,mouseup,click。

使用手勢操作代替滑鼠輸入/輸出事件

響應式佈局

css3代替DOM animation動畫效果

（為相容IE:PC端用setTimeout定時器，定時修改DOm元素的style屬性實現動畫）

 優勢：css3使用裝置GUP渲染，動用硬體裝置的計算能力做展示，效率高。

四、移動端開發框架和庫

1、移動端開發框架和PC端對比

PC端：相容ie，冗餘程式碼，但是計算效率高。

移動端和PC相比：輕  重效率 ，希望在3g網路載入更少的程式碼，載入更快。

2、移動端開發框架

移動端開發框架：jquery mobile ,angular mobile ,簡單的還用不到框架，通過元件做複雜應用非常簡單。我們做的頁面簡單，談不上完整的app效果，用不到複雜應用框架。

3、移動端開發庫

移動端開發庫：zepto.js

也可以用純原生的javascript的API。

zepto也除了提供一些API，也提供了些外掛，比如touch和gesture,。

zepto.js庫和其他移動端框架區別，可查資料。

touch.js獨立於zepto.js存在，單獨在github庫中。

五、touch事件

1、touch事件

touchstart---》touchmove---》touchend和touchcancle。

當滑動螢幕時，來了個系統事件，比如來了個電話，此時就會進入接電話面板，整個的觸控事件就會被cancle掉,就會觸發touchcancle事件。

zepto.js的touch事件，在原生touch事件基礎上做了封裝，依賴於zepjs的一些外掛，touch.js暴露的事件

• tap事件 觸控
• singleTap事件 單次觸控和doubleTap事件
• longTap長按事件
• swipe,swipeLeft,swipeRight,swipeUp和swipeDown滑動事件。

2、為什麼不能用click

• click事件300ms延遲
• touch事件支援多點觸控，click不支援
• 手勢操作

六、canvas優化技巧

1、優勢：觸發物理裝置GPU渲染

使用convas代替image標籤做圖片展示。

通常來講，Image標籤展示一張圖片是用瀏覽器本身來做渲染的。

當一個圖片很大的時候，

或者一個網頁中有很多張大的圖片的時候，

而你的手機效能又不是特別好的情況下，圖片展示就會特別卡。

這個卡通常是在滑動圖片，滾動條滾動圖片的時候，會感覺圖片非常卡，因為沒有觸發物理裝置本身的GPU來渲染。

如何觸發物理裝置GPU渲染？使用Canvas。

2、drawImage API

有一本書《HTML5 Canvas》來介紹canvas，內容太多，下面只介紹一個API。

drawImage API：把一張原本使用Image標籤的圖片畫在Canvas上面。

• drawImage(image,x,y);在Canvas上繪製圖片。
• drawImage(image,x,y,width,height)；在Canvas上縮放並繪製圖片。

通常用到drawImage(image,x,y,width,height)。

引數image：image物件，要畫的圖片。

x,y:要畫的圖片是從canvas的哪個座標點開始。

座標通常是（0,0） 點，使用的也是第四象限的座標系。

width,height:要畫的這張圖的寬度和高度是多少，通常不傳也可以，不傳的話圖片有多大畫多大。

傳入的話就是控制圖片的縮放。

七、 Image物件

drawImage第一個引數要傳入一Image物件，那什麼是Image物件呢？

在手機上載入圖片，有一種方式，預載入圖片。預載入圖片就要用的Image物件了。我們通常看到的是Image標籤。

Image標籤就可以理解為Image物件。

Image物件的作用：預載入圖片和圖片按比例縮放。

例子：

當設定一個img物件的src的時候，實際上就是向網路上傳送一個請求，來請求這張圖片。

var img=new Image();
img.onload=function(){
  debugger
}
img.src='https://www.baidu.com/img/bdlogo.gif';

執行的時候進入了img的onload事件，說明請求傳送成功了，同時圖片載入回來了，才會觸發Image物件的onload()方法。

可以看看Image標籤載入回來的圖片都有些什麼屬性？

可以在控制檯debug的Watch中新增一個this。

通過這種方式加載出來的圖片，我們可以獲得它的高度，寬度。以及它的自然的寬度和自然的高度。

有了這些資訊，可以根據圖片大小和當前裝置的解析度動態的調整圖片的大小。如果只使用傳統的Image標籤是沒辦法做到的。

八、css3動畫事件

點選animation瞭解css3動畫知識。

為什麼要有動畫事件？當一個動畫結束後，我想執行一個操作時怎麼辦？怎麼用js做邏輯控制？此時必須用css3的動畫事件。

當一個動畫結束的時候，我們可以監聽一個元素的animationEnd事件來實現。

webkit瀏覽器需要加webkit字首。

做動畫時， css3動畫框架可以用animate.css。

引用animate.css，在動畫元素上加class animate rotateIn。

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/4904929.html有問題歡迎與我討論，共同進步。