移動端開發demo—移動端web相冊（一）

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

1、移動端樣式

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

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

 

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

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

2、移動端web開發調試工具

由於移動端主要的瀏覽器內核是webkit，因此能夠用chrome開發。能夠模擬UA和分辨率。

模擬觸摸行爲，注意touch和click區別。

也能夠開啓其餘模擬。

3、移動端開發tips

 一、兼容性

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

二、 其餘差別

棄用事件mousedown,mouseup,click。

使用手勢操做代替鼠標輸入/輸出事件

響應式佈局

css3代替DOM animation動畫效果

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

 優點：css3使用設備GUP渲染，動用硬件設備的計算能力作展現，效率高。

4、移動端開發框架和庫

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

PC端：兼容ie，冗餘代碼，可是計算效率高。

移動端和PC相比：輕  重效率 ，但願在3g網絡加載更少的代碼，加載更快。

二、移動端開發框架

移動端開發框架：jquery mobile ,angular mobile ,簡單的還用不到框架，經過組件作複雜應用很是簡單。咱們作的頁面簡單，談不上完整的app效果，用不到複雜應用框架。

三、移動端開發庫

移動端開發庫：zepto.js

也能夠用純原生的javascript的API。

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

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

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

5、touch事件

一、touch事件

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

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

 

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

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

二、爲何不能用click

• click事件300ms延遲
• touch事件支持多點觸摸，click不支持
• 手勢操做

6、canvas優化技巧

一、優點：觸發物理設備GPU渲染

使用convas代替image標籤作圖片展現。

一般來說，Image標籤展現一張圖片是用瀏覽器自己來作渲染的。

當一個圖片很大的時候，

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

而你的手機性能又不是特別好的狀況下，圖片展現就會特別卡。

這個卡一般是在滑動圖片，滾動條滾動圖片的時候，會感受圖片很是卡，由於沒有觸發物理設備自己的GPU來渲染。

如何觸發物理設備GPU渲染？使用Canvas。

二、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:要畫的這張圖的寬度和高度是多少，一般不傳也能夠，不傳的話圖片有多大畫多大。

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

7、 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標籤是沒辦法作到的。

8、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有問題歡迎與我討論，共同進步。