移動端開發-佈局+框架+案例篇
###模板引擎javascript
1.ES6模板字符串
ES6中：${JS代碼}css
//ES6中須要兩個過程 :html
//1.定義模板
var htmlStr=`<p>${1+2}</p>`;
//2.手動將模板放到指定元素中
$(".box").html(htmlStr);複製代碼
2.EJS模板
//EJS 四步曲java
//1.在HTML結構中定義容器 例如：<div id="box"></div>
//2.經過AJAX動態獲取data數據
data=[{a:"A",b:"B",c:'C'},{a:"aa",b:"bb",c:'cc'},{a:"aaa",b:"bbb",c:'ccc'}];
//3.造模板 搭建HTML結構構導入數據
//4.經過ejs.render 將html結構，模板數據，data數據渲染出來
//ejs.render(模板的html結構,{模板數據:真實數據(通常都是經過AJAX獲取出來的數據)})
//4-1 獲取HTML模板
var boxHTML=$("#boxTemplate").html();
//4-2 ejs.render()
var result=ejs.render(boxHTML,{boxData:data});
console.log(result);
$("#box").html(result);複製代碼
>git
3.造模板-->github
給script標籤加上type="text/template"表示的是html模板
加個id="boxTemplate"是爲了方便後面第四部獲取這個html模板用的
boxData：是你本身定義的數據的名字 他是模板數據
咱們還須要把他跟AJAX獲取出來的數據相關聯
<script type="text/template" id="boxTemplate">
<ul>
<%$.each(boxData,function(index,item){%>
<!--處理li-->
<li>
<span><%=item.a%></span>
<span><%=item.b%></span>
<span><%=item.c%></span>
</li>
<%})%>
</ul>
</script>複製代碼
viewporet
移動端適配
準備工做1：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
width=device-width:寬度等於當前設備的寬度
initial-scale=1：初始縮放比例
minimum-scale=1：容許用戶的縮放的最小比例(默認值是1)
maximum-scale=1: 容許用戶的縮放的最大比例(默認值是1)
user-scalable=no：是否容許用戶縮放（默認值是no，通常都是不但願用戶去縮小放大界面）複製代碼
準備工做2：加在一些兼容文件
在IE9如下是不支持h5，也不支持CSS3中@media，因此咱們須要加載一些js文件來保證咱們的效果的兼容問題
<!--[if lt IE 9]>web
<![endif]-->chrome
準備工做3（選擇性加上）：設置瀏覽器的渲染模式是最高的
如今不少人的電腦IE瀏覽器的瀏覽器模式是IE9，IE10，IE11，都是高版本瀏覽模式，可是有些IE9 文檔模式倒是IE8，瀏覽器是按照文檔模式去渲染的，因此會出現不兼容問題，那麼咱們就手動打開控制檯修改一下文檔模式，可是不少人不會控制檯，咱們就考慮這一部分人，爲了他們咱們能夠強制IE的渲染方式爲最高，保證咱們的文檔模式是最新的bootstrap
還有個canvas
chrome=1 他是谷歌內嵌的一個瀏覽器框架（GCF：Goole Chrome Frame）
若是電腦上裝了這個框架，無論你用的什麼版本的IE都會用webkit內核和V8引擎來排版運算，要是沒裝就和上一個沒有chrome=1的那個同樣加載
關於IE版本條件注意語句
一、只有IE才能識別
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
由於只有IE5以上的版本纔開始支持IE條件註釋，全部「只有IE」才能識別的意思是「只有IE5版本以上」才能識別。
二、只有特定版本才能識別
<!--[if IE 8]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
識別特定的IE版本，高了或者低了都不能夠。上例只有IE8才能識別。
三、只有不是特定版本的才能識別
<!--[if !IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
上例中特定IE7版本不能識別，其餘版本都能識別，固然要在IE5以上。
四、只有高於特定版本才能識別
<!--[if gt IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
上例中只有高於IE7的版本才能識別。IE7沒法識別。
五、等於或者高於特定版本才能識別
<!--[if gte IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
上例中IE7和更高的版本都能識別。
六、只有低於特定版本的才能識別
<!--[if lt IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
上例中只有低於IE7的版本才能識別，IE7沒法識別。
七、等於或者低於特定版本的才能識別
<!--[if lte IE 7]>
<link type="text/css" rel="stylesheet" href="my.css" />
<![endif]-->
上例中IE7和更低的版本能夠識別。
關鍵詞解釋
上面那些代碼好像很難記的樣子，其實只要稍微解釋一下關鍵字就很容易記住了。
lt ：就是Less than的簡寫，也就是小於的意思。
lte ：就是Less than or equal to的簡寫，也就是小於或等於的意思。
gt ：就是Greater than的簡寫，也就是大於的意思。
gte：就是Greater than or equal to的簡寫，也就是大於或等於的意思。
!：就是不等於的意思，跟javascript裏的不等於判斷符相同。
特別提示：
１、有人會試圖使用<!--[if !IE]>來定義非IE瀏覽器下的情況，但注意：條件註釋只有在IE瀏覽器下才能執行，這個代碼在非IE瀏覽下被當作註釋視而不見。
２、咱們一般用IE條件註釋根據瀏覽器不一樣載入不一樣css，從而解決樣式兼容性問題的。其實它能夠作的更多。它能夠保護任何代碼塊——HTML代碼塊、JavaScript代碼塊、服務器端代碼……看看下面的代碼。
<!--[if IE]>
<script type="text/javascript">
alert("你使用的是IE瀏覽器！");
</script>
<![endif]-->複製代碼
響應式佈局
1.百分比+@media
width：瀏覽器的寬度
height：瀏覽器的高度
device-width:設備的屏幕寬
device-height:設備的屏幕高
orientation：檢測屏幕是出於橫向仍是縱向
aspect-ratio：檢測瀏覽器可視寬度和高度的比例（9/16）
device-aspect-ratio:檢測設備屏幕寬度和高度的比例
color：檢測顏色位數（min-color:32檢測顏色是否是32位的）
color-index:檢測設備顏色索引表中的顏色值都是正數
grid：檢測輸出的設備是網格仍是位圖設備
resolution:監測屏幕或者打印機的分辨率
min-resolution：300dpi
max-resolution：118dpcm
通常以前的佈局都是百分比佈局：或者流式佈局
@media都是配合其餘的方式去用
@media (max-width: 900px) and (min-width:500px ){
.box{
display:block;
width: 100%;
}
}複製代碼
2.DPR
iphnoe3分辨率是320*480，iPhone4分辨率是640*960
這兩款手機實際上都是寬爲320px，這就致使了屏幕大小沒變。實際像素卻多了一倍，
這時，一個css像素就等於兩個物理像素，這就是像素密度比
window.devicePixelRatio來檢測素密度比
爲何設計師給你的設計稿通常都是640*960 750*1334複製代碼
@media only screen and (device-pixel-ratio:1 ) {
/*device-pixel-ratio:來檢測素密度比*/
}複製代碼
3.REM佈局
一個CSS單位
px是固定單位：咱們設置300px*200px的尺寸，無論設備怎麼變，都會按照原有尺寸大小渲染，不受其它的影響
rem是相對單位：相對於當前頁面根元素(html)的字體大小來設置的
REM響應式佈局：
- 首先咱們嚴格按照設計稿的尺寸來寫樣式，只不過在寫樣式的時候，把全部的PX變爲REM (假設設計稿是640的尺寸)
- 當咱們把頁面放在320的手機上，以前寫的樣式須要總體縮小一倍，此時不必一個個的樣式進行更改，咱們只須要把HTML的字體大小在原來的基礎上縮小一倍便可（HTML字體縮小，以前以REM爲單位的值也都會跟着縮小）
- 爲了方便轉換計算，咱們通常把HTML的初始字體大小設置爲100（瀏覽器最小字體時10/12px，咱們縮減過小後，瀏覽器識別不了）
var dW = 640; //設計稿的寬
var win==document.documentElement.clientWidth || document.body.clientWidth;
document.documentElement.style.fontSize=win *100/dw+ "px";複製代碼
移動端框架的掌握
bootstrap
zepto
http://www.wenshuai.cn/Manual/Zepto/swiper
iscroll
MUI.....
移動端事件的處理
實現單擊事件
cdn.code.baidu.com/珠峯培訓:移動端事件
移動端:click(單擊)、load、scroll、blur、focus、change、input(代替keyup keydown)...
TOUCH事件模型(處理單手指操做)、GESTURE事件模型(處理多手指操做)
TOUCH:touchstart、touchmove、touchend、touchcancle
GESTURE:gesturestart、gesturechange、gestureend
一、click:在移動端click屬於單擊事件,不是點擊事件；在移動端的項目中我麼常常會區分單擊作什麼和雙擊作什麼，因此移動端的瀏覽器在識別click的時候，只有肯定是單擊後纔會把它執行；
在移動端使用click會存在300ms的延遲:瀏覽器在第一次點擊結束後，還須要等到300ms看是否觸發了第二次點擊，若是觸發了第二次點擊就不屬於click了，沒有觸發第二次點擊才屬於click；
二、點擊、單擊、雙擊、長按、滑動、左滑、右滑、上滑、下滑...
單擊和雙擊(300MS)
點擊和長按(750MS)
點擊和滑動(X/Y軸偏移的距離是否在30PX之內,超過30PX就是滑動)
左右滑動和上下滑動(X軸偏移的距離 > Y軸偏移的距離 = 左右滑 相反就是上下滑)
左滑和右滑(偏移的距離 > 0 = 右滑 相反就是左滑)
三、移動端事件庫
->FastClick.js:解決CLICK事件300MS的延遲
->TOUCH.JS:百度雲手勢事件庫 https://github.com/Clouda-team/touch.code.baidu.com
->HAMMER.JS複製代碼
touch模擬單擊事件
->使用TOUCH事件模型實現點擊操做(單擊&&雙擊)
on(oBox, 'touchstart', function (ev) {
//->ev:TouchEvent =>type、target、preventDefault(returnValue)、stopPropagation(cancelBubble)、changedTouches、touches
//->changedTouches和touches都是手指信息的集合(TouchList)，touches獲取到值的必備條件只有手指還在屏幕上才能夠獲取，因此在touchend事件中若是想獲取離開的瞬間座標只能使用changedTouches獲取
var point = ev.touches[0];
this['strX'] = point.clientX;
this['strY'] = point.clientY;
this['isMove'] = false;
});
on(oBox, 'touchmove', function (ev) {
var point = ev.touches[0];
var newX = point.clientX,
newY = point.clientY;
//->判斷是否發生滑動,咱們須要判斷偏移的值是否在30PX之內
if (Math.abs(newX - this['strX']) > 30 || Math.abs(newY - this['strY']) > 30) {
this['isMove'] = true;
}
});
on(oBox, 'touchend', function (ev) {
if (this['isMove'] === false) {
//->點擊
this.style.webkitTransitionDuration = '1s';
this.style.webkitTransform = 'rotate(360deg)';
var delayTimer = window.setTimeout(function () {
this.style.webkitTransitionDuration = '0s';
this.style.webkitTransform = 'rotate(0deg)';
}.bind(this), 1000);
} else {
//->滑動
this.style.background = 'red';
}
});複製代碼
案例
PC端案例：rem+bootstrap單頁排版的應用
移動端案例QQ音樂播放器：rem+zepto+音頻播放+歌詞處理
H5場景應用交互簡歷：rem佈局+H5音頻處理+CSS3+animate.css+swiper+zepto
新浪新聞首頁：rem佈局+swiper+zepto+iscroll+less+EJS
其餘框架的使用：MUI案例->酒店的預約app
其餘知識【分享課】
1.調取手機設備的接口
2.canvas畫布
3.調取百度、騰訊地圖API
4.微信二次開發
5.flexbox佈局
相關文章
- 1. 移動Web開發-WebApp（flex佈局+移動端導航案例）
- 2. 移動端開發佈局
- 3. MUI框架：移動端底部固定mui-bar-tab佈局 - 案例篇
- 4. 移動端佈局方案
- 5. 淺談前端移動端頁面開發（佈局篇）
- 6. 前端移動端頁面開發（佈局篇）【轉】
- 7. 開發移動端前端框架
- 8. 移動端開發-響應式佈局
- 9. 移動端開發之rem佈局
- 10. 移動端WEB開發之flex佈局
- 更多相關文章...
- • ionic 浮動框 - ionic 教程
- • ionic 滑動框 - ionic 教程
- • PHP開發工具
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 移動Web開發-WebApp（flex佈局+移動端導航案例）
- 2. 移動端開發佈局
- 3. MUI框架：移動端底部固定mui-bar-tab佈局 - 案例篇
- 4. 移動端佈局方案
- 5. 淺談前端移動端頁面開發（佈局篇）
- 6. 前端移動端頁面開發（佈局篇）【轉】
- 7. 開發移動端前端框架
- 8. 移動端開發-響應式佈局
- 9. 移動端開發之rem佈局
- 10. 移動端WEB開發之flex佈局