http://blog.csdn.net/s82ygg04/article/details/56495887

本文主要是介紹開(kāi)發(fā)移動(dòng)端web相冊(cè)這樣一案例用到的前置知識(shí)。

一、移動(dòng)端樣式

移動(dòng)端更接近手機(jī)原生的方式。

如下是一個(gè)angular mobile的demo的例子：

?

移動(dòng)端demo做成這樣的好處：

• 在手機(jī)端瀏覽器中打開(kāi)，接近原生app應(yīng)用。
• 打包成Android或者ios的app，以原生app呈現(xiàn)

二、移動(dòng)端web開(kāi)發(fā)調(diào)試工具

因?yàn)橐苿?dòng)端主要的瀏覽器內(nèi)核是webkit，所以可以用chrome開(kāi)發(fā)。可以模擬UA和分辨率。

模擬觸摸行為，注意touch和click區(qū)別。

也可以開(kāi)啟其他模擬。

三、移動(dòng)端開(kāi)發(fā)tips

?1、兼容性

Android和ios都是webkit內(nèi)核，firefox os是greasemonkey內(nèi)核。

2、 其他差異

棄用事件mousedown,mouseup,click。

使用手勢(shì)操作代替鼠標(biāo)輸入/輸出事件

響應(yīng)式布局

css3代替DOM animation動(dòng)畫(huà)效果

（為兼容IE:PC端用setTimeout定時(shí)器，定時(shí)修改DOm元素的style屬性實(shí)現(xiàn)動(dòng)畫(huà)）

?優(yōu)勢(shì)：css3使用設(shè)備GUP渲染，動(dòng)用硬件設(shè)備的計(jì)算能力做展示，效率高。

四、移動(dòng)端開(kāi)發(fā)框架和庫(kù)

1、移動(dòng)端開(kāi)發(fā)框架和PC端對(duì)比

PC端：兼容ie，冗余代碼，但是計(jì)算效率高。

移動(dòng)端和PC相比：輕? 重效率 ，希望在3g網(wǎng)絡(luò)加載更少的代碼，加載更快。

2、移動(dòng)端開(kāi)發(fā)框架

移動(dòng)端開(kāi)發(fā)框架：jquery mobile ,angular mobile ,簡(jiǎn)單的還用不到框架，通過(guò)組件做復(fù)雜應(yīng)用非常簡(jiǎn)單。我們做的頁(yè)面簡(jiǎn)單，談不上完整的app效果，用不到復(fù)雜應(yīng)用框架。

3、移動(dòng)端開(kāi)發(fā)庫(kù)

移動(dòng)端開(kāi)發(fā)庫(kù)：zepto.js

也可以用純?cè)膉avascript的API。

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

zepto.js庫(kù)和其他移動(dòng)端框架區(qū)別，可查資料。

touch.js獨(dú)立于zepto.js存在，單獨(dú)在github庫(kù)中。

五、touch事件

1、touch事件

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

當(dāng)滑動(dòng)屏幕時(shí)，來(lái)了個(gè)系統(tǒng)事件，比如來(lái)了個(gè)電話，此時(shí)就會(huì)進(jìn)入接電話面板，整個(gè)的觸摸事件就會(huì)被cancle掉,就會(huì)觸發(fā)touchcancle事件。

?

zepto.js的touch事件，在原生touch事件基礎(chǔ)上做了封裝，依賴于zepjs的一些插件，touch.js暴露的事件

• tap事件 觸摸
• singleTap事件 單次觸摸和doubleTap事件
• longTap長(zhǎng)按事件
• swipe,swipeLeft,swipeRight,swipeUp和swipeDown滑動(dòng)事件。

2、為什么不能用click

• click事件300ms延遲
• touch事件支持多點(diǎn)觸摸，click不支持
• 手勢(shì)操作

六、canvas優(yōu)化技巧

1、優(yōu)勢(shì)：觸發(fā)物理設(shè)備GPU渲染

使用convas代替image標(biāo)簽做圖片展示。

通常來(lái)講，Image標(biāo)簽展示一張圖片是用瀏覽器本身來(lái)做渲染的。

當(dāng)一個(gè)圖片很大的時(shí)候，

或者一個(gè)網(wǎng)頁(yè)中有很多張大的圖片的時(shí)候，

而你的手機(jī)性能又不是特別好的情況下，圖片展示就會(huì)特別卡。

這個(gè)卡通常是在滑動(dòng)圖片，滾動(dòng)條滾動(dòng)圖片的時(shí)候，會(huì)感覺(jué)圖片非常卡，因?yàn)闆](méi)有觸發(fā)物理設(shè)備本身的GPU來(lái)渲染。

如何觸發(fā)物理設(shè)備GPU渲染？使用Canvas。

2、drawImage API

有一本書(shū)《HTML5 Canvas》來(lái)介紹canvas，內(nèi)容太多，下面只介紹一個(gè)API。

drawImage API：把一張?jiān)臼褂肐mage標(biāo)簽的圖片畫(huà)在Canvas上面。

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

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

參數(shù)image：image對(duì)象，要畫(huà)的圖片。

x,y:要畫(huà)的圖片是從canvas的哪個(gè)坐標(biāo)點(diǎn)開(kāi)始。

坐標(biāo)通常是（0,0） 點(diǎn)，使用的也是第四象限的坐標(biāo)系。

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

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

七、 Image對(duì)象

drawImage第一個(gè)參數(shù)要傳入一Image對(duì)象，那什么是Image對(duì)象呢？

在手機(jī)上加載圖片，有一種方式，預(yù)加載圖片。預(yù)加載圖片就要用的Image對(duì)象了。我們通常看到的是Image標(biāo)簽。

Image標(biāo)簽就可以理解為Image對(duì)象。

Image對(duì)象的作用：預(yù)加載圖片和圖片按比例縮放。

例子：

當(dāng)設(shè)置一個(gè)img對(duì)象的src的時(shí)候，實(shí)際上就是向網(wǎng)絡(luò)上發(fā)送一個(gè)請(qǐng)求，來(lái)請(qǐng)求這張圖片。

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

執(zhí)行的時(shí)候進(jìn)入了img的onload事件，說(shuō)明請(qǐng)求發(fā)送成功了，同時(shí)圖片加載回來(lái)了，才會(huì)觸發(fā)Image對(duì)象的onload()方法。

可以看看Image標(biāo)簽加載回來(lái)的圖片都有些什么屬性？

可以在控制臺(tái)debug的Watch中添加一個(gè)this。

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

有了這些信息，可以根據(jù)圖片大小和當(dāng)前設(shè)備的分辨率動(dòng)態(tài)的調(diào)整圖片的大小。如果只使用傳統(tǒng)的Image標(biāo)簽是沒(méi)辦法做到的。

八、css3動(dòng)畫(huà)事件

點(diǎn)擊animation了解css3動(dòng)畫(huà)知識(shí)。

為什么要有動(dòng)畫(huà)事件？當(dāng)一個(gè)動(dòng)畫(huà)結(jié)束后，我想執(zhí)行一個(gè)操作時(shí)怎么辦？怎么用js做邏輯控制？此時(shí)必須用css3的動(dòng)畫(huà)事件。

當(dāng)一個(gè)動(dòng)畫(huà)結(jié)束的時(shí)候，我們可以監(jiān)聽(tīng)一個(gè)元素的animationEnd事件來(lái)實(shí)現(xiàn)。

webkit瀏覽器需要加webkit前綴。

做動(dòng)畫(huà)時(shí)， css3動(dòng)畫(huà)框架可以用animate.css。

引用animate.css，在動(dòng)畫(huà)元素上加class animate rotateIn。

?

本文作者starof,因知識(shí)本身在變化，作者也在不斷學(xué)習(xí)成長(zhǎng)，文章內(nèi)容也不定時(shí)更新，為避免誤導(dǎo)讀者，方便追根溯源，請(qǐng)諸位轉(zhuǎn)載注明出處：http://www.cnblogs.com/starof/p/4904929.html有問(wèn)題歡迎與我討論，共同進(jìn)步。

總結(jié)

以上是生活随笔為你收集整理的移动端相册开发的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。