踩過許多坑后，送你這份H5交互的頁(yè)面跳轉(zhuǎn)方式總結(jié)

年做了大量的 HTML5 項(xiàng)目，遇到了很多坑。在這個(gè)過程中學(xué)到了一些之前不具備的知識(shí)，所以這篇文章就簡(jiǎn)單分享一下這方面的話題。

傳統(tǒng)的MPA

首先，說一個(gè)比較古老的東西，叫做 MPA。

MPA 的全稱是 Multi-page Application，意思是整個(gè)應(yīng)用（站點(diǎn)）由多個(gè)完整的 html 構(gòu)成。用戶在頁(yè)面 1 點(diǎn)擊跳轉(zhuǎn)，需要向服務(wù)端請(qǐng)求頁(yè)面 2，請(qǐng)求成功后渲染。而用戶返回時(shí)，相當(dāng)于是點(diǎn)擊了瀏覽器的返回，頁(yè)面退回到之前的歷史記錄，并重新加載出來。

在這樣的模式下，頁(yè)面間切換慢、不流暢的問題比較突出，尤其是在移動(dòng)端。

同時(shí)，它還產(chǎn)生了幾個(gè)小問題：

跳轉(zhuǎn)動(dòng)畫：頁(yè)面間的跳轉(zhuǎn)無法實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫效果。
如果前一個(gè)頁(yè)比較長(zhǎng)，用戶滑動(dòng)到頁(yè)面比較靠下方的位置后點(diǎn)擊，返回時(shí)，頁(yè)面無法默認(rèn)停留在原位置。
iOS 右滑返回產(chǎn)生問題，從頁(yè)面 1 跳轉(zhuǎn)到頁(yè)面 2，再?gòu)捻?yè)面 2 跳轉(zhuǎn)到頁(yè)面 3，右滑返回，會(huì)直接回到頁(yè)面 1 前的頁(yè)。

SPA

隨著對(duì)移動(dòng)端體驗(yàn)需求的提高以及技術(shù)的進(jìn)步，另一種模式 SPA（Single-page Application）逐漸成為主流。

SPA 簡(jiǎn)單來說，就是原來在 MPA 中的多個(gè) html，現(xiàn)在被放在了一個(gè) html 中，并被分成若干個(gè)片段。跳轉(zhuǎn)、返回的本質(zhì)變成了分段的「隱藏」與「顯示」。跳轉(zhuǎn)不需要反復(fù)對(duì)服務(wù)端進(jìn)行請(qǐng)求，從而使得頁(yè)面與頁(yè)面之間切換更加快速流暢。

在這樣的機(jī)制下，跳轉(zhuǎn)與返回完全由代碼控制，所以可以通過代碼定義頁(yè)面轉(zhuǎn)場(chǎng)的效果、返回。

在設(shè)計(jì)轉(zhuǎn)場(chǎng)動(dòng)畫時(shí)，我們需要留意的是導(dǎo)航欄是 Native 的還是 HTML5 的。如果導(dǎo)航欄是 Native 的，那 HTML5 頁(yè)面不包括導(dǎo)航欄，它相當(dāng)于是網(wǎng)頁(yè)外的元素，不在轉(zhuǎn)場(chǎng)效果的設(shè)計(jì)范圍內(nèi)。

WebView

說 HTML5 的跳轉(zhuǎn)，就不得不說 WebView。簡(jiǎn)單來說，WebView 是在 App 中用于顯示 web 內(nèi)容的容器。上文提到的 MPA 和 SPA，都裝在了這個(gè)叫做 WebView 的容器中。

用戶點(diǎn)擊頁(yè)面中的元素進(jìn)行跳轉(zhuǎn)，除了前面的兩種方式外，還有第三種：新打開 WebView 的方式。在這樣的方式下，跳轉(zhuǎn)的本質(zhì)是 HTML5「告訴」Native，由 Native 執(zhí)行打開新 WebView，并在新 WebView 中加載頁(yè)面。

因?yàn)?Native 的機(jī)制，打開新 WebView 的同時(shí)，之前的 WebView 會(huì)被自然、完整地保留。所以這時(shí)，之前的幾個(gè)問題就變?yōu)椋?/p>

跳轉(zhuǎn)動(dòng)畫：頁(yè)面間的跳轉(zhuǎn)動(dòng)畫由 WebView 之間的跳轉(zhuǎn)動(dòng)畫來決定。
返回后頁(yè)面停留在原位置：完美支持。
iOS 右滑返回：完美支持。

不過需要注意的地方是，打開新 WebView 是一個(gè)資源消耗比較大的操作。如果我們?cè)谠O(shè)計(jì)一個(gè)流程時(shí)，需要比較多的連續(xù)使用這種方式，需要和研發(fā)同學(xué)進(jìn)行充分的溝通。

比較特殊的Replace

前述的三種跳轉(zhuǎn)，都會(huì)產(chǎn)生歷史記錄。MPA、SPA 的歷史記錄是在 HTML5 中產(chǎn)生，新開 WebView 中的記錄是在 Native 中產(chǎn)生。

在 MPA 或 SPA 中，如果跳轉(zhuǎn)時(shí)使用 Replace 方法，它會(huì)用新頁(yè)面替換之前的頁(yè)面，歷史記錄中沒有之前頁(yè)面的記錄。

這是一種特殊的跳轉(zhuǎn)方式，在設(shè)計(jì)一些不可逆的流程時(shí)可考慮使用。

多頁(yè)面回退

了解了上述的幾種機(jī)制后，我們來看一個(gè)小的應(yīng)用場(chǎng)景──多頁(yè)面回退。

我們?cè)趯?shí)際業(yè)務(wù)中，經(jīng)常會(huì)有這樣的需求。假設(shè)我們有 1、2、3 三個(gè)頁(yè)組成的一個(gè)流程，在頁(yè)面 3 上有個(gè)「完成」按鈕點(diǎn)擊回到頁(yè)面 1。在不同的交互模式下，實(shí)現(xiàn)這樣的跳轉(zhuǎn)有著不同的機(jī)制。

1. SPA模式下的正常跳轉(zhuǎn)

這種模式是 3 個(gè)頁(yè)面都在一個(gè) WebView 中。點(diǎn)擊頁(yè)面 3 中的「完成」按鈕，回退 -2 ，即回退 2 步歷史記錄，到頁(yè)面 1。

2. 新打開WebView

打開新 WebView 又分三種方式。

如果我們把 3 個(gè)頁(yè)面，拆分到 2 個(gè) WebView 中，如下圖，點(diǎn)擊完成按鈕，即關(guān)閉自身所在的 WebView。

同樣是打開新的 WebView，如果我們按如下圖的方法拆分會(huì)稍微復(fù)雜。這時(shí)點(diǎn)擊完成按鈕，首先關(guān)閉自身所在的 WebView，當(dāng)頁(yè)面 2「意識(shí)」到自己重新被展現(xiàn)時(shí)，自動(dòng)退回 1 步到頁(yè)面 1。

每次打開新的 WebView，這時(shí)點(diǎn)擊完成，回退的本質(zhì)是 HTML5「告訴」Native 關(guān)閉多個(gè) WebView。需要特別注意的是，HTML5 中實(shí)現(xiàn)這種方式不是天然具備的，它需要 Native 具有一次關(guān)閉多個(gè) WebView 的能力。所以我們?cè)谠O(shè)計(jì)方案時(shí)，需要了解清楚自家的 Native 是否有這樣的能力。

總結(jié)

以上，簡(jiǎn)單說了幾種 HTML5 的跳轉(zhuǎn)方式。這些跳轉(zhuǎn)方式，沒有絕對(duì)的對(duì)與錯(cuò)，我們?cè)谠O(shè)計(jì)方案時(shí)，需要根據(jù)實(shí)際的業(yè)務(wù)需求與技術(shù)的限制，來整體考慮解決方案。

根據(jù)個(gè)人經(jīng)驗(yàn)，也有幾點(diǎn)小帖士分享給大家：

前后邏輯交織不復(fù)雜的單個(gè)頁(yè)面，可以考慮使用新 WebView 打開跳轉(zhuǎn)。
如果是一個(gè)任務(wù)型的流程，可以考慮將一個(gè)任務(wù)流包在一個(gè) WebView 中，在任務(wù)內(nèi)使用 SPA 跳轉(zhuǎn)。不同的任務(wù)使用不同的 WebView。保持任務(wù)之間的關(guān)系清晰明了。
設(shè)計(jì)上需要著重表現(xiàn)頁(yè)面間轉(zhuǎn)場(chǎng)動(dòng)畫的效果，優(yōu)先考慮使用 SPA 跳轉(zhuǎn)。
為防止流程過于復(fù)雜，盡量不要自定義關(guān)閉、返回的行為。保持關(guān)閉為默認(rèn)的關(guān)閉行為，保持返回為默認(rèn)的返回行為。

航切換設(shè)計(jì)到CSS中標(biāo)簽屬性設(shè)置：隱藏、顯示

涉及html5異步傳輸?shù)奶匦?/p>

更需要知道js多標(biāo)簽時(shí)候元素選擇的寫法

再啰嗦一下：classLIst屬性返回元素的類名，可以用方法add()、remove()添加class屬性

setAttribute(name,value)設(shè)置新屬性及其值，或者修改已有屬性的值

正文

上導(dǎo)航切換的示意圖

js代碼：

window.onload = function () { //window.onload:就是等整個(gè)頁(yè)面內(nèi)容全部加載完畢

//填寫js邏輯

//獲取ul里li的個(gè)數(shù)

var tab_ui = document.getElementsByTagName("ul");

var tab_li= tab_ui[0].getElementsByTagName("li")

//獲取要顯示的div的個(gè)數(shù)

var content = document.getElementById("content");

var content_div = content.getElementsByTagName("div");

//給li添加鼠標(biāo)點(diǎn)擊事件

for(var i= 0;i<tab_li.length;i++){

tab_li[i].index = i; //異步傳輸，不設(shè)置的話，得到的都是i的最大值

tab_li[i].onclick = function () {

//清除之前的樣式

for(var j=0;j<tab_li.length;j++){

//沒有點(diǎn)擊事件，j=0,1,2

tab_li[j].classList.remove("active");

content_div[j].setAttribute("class","hidden");

}

//設(shè)置自己本身的樣式:添加class=active

this.setAttribute("class","active");

//content_div[i].classList.remove("hidden"); 無效，i=3導(dǎo)致

//將對(duì)應(yīng)的內(nèi)容顯示出來

content_div[this.index].classList.remove("hidden");

}

//給li添加鼠標(biāo)點(diǎn)擊事件

var tab_ui = document.getElementsByTagName("ul");

var tab_li1= tab_ui[1].getElementsByTagName("li")

//var tab_li1= document.getElementsById("li")

var content1 = document.getElementById("content1");

var content1_div = content1.getElementsByTagName("div");

for(var i= 0;i<tab_li1.length;i++){

tab_li1[i].index = i; //重點(diǎn)，為了讓i在循環(huán)體內(nèi)

tab_li1[i].onmouseover = function () {

//這里的i永遠(yuǎn)=3，如果不設(shè)置 tab_li[i].index = i

//清除之前的樣式

for(var j=0;j<tab_li1.length;j++){

//沒有點(diǎn)擊事件，j=0,1,2

tab_li1[j].classList.remove("active");

content1_div[j].setAttribute("class","hidden");

}

//設(shè)置自己本身的樣式:添加class=active

this.setAttribute("class","active");

//content_div[i].classList.remove("hidden"); 無效，i=3導(dǎo)致

//將對(duì)應(yīng)的內(nèi)容顯示出來

content1_div[this.index].classList.remove("hidden");

}

</script>

css代碼

<style>

.hidden{

display: none;

}

.tabdemo>.active{

background: red;

border-bottom-color:white ;

}

#wrap{

height: 58px;

background-color: #c7eafa;

}

.tabdemo {

width: 100%;

list-style: none;

margin: 0 auto;

background-color: blue;

}

.tabdemo1 {

width: auto;

list-style: none;

margin: 0 auto;

background-color: pink;

float:left;

}

li{

color: rgb(0, 0, 0);

display:inline-block;

}

ul.tabdemo1 li {

color: rgb(224, 9, 9);

display:block;

}

li:hover{

background-color: lavender;

}

一定注意要把a(bǔ)轉(zhuǎn)成行內(nèi)塊元素，

如果轉(zhuǎn)的是塊元素那么短豎線會(huì)掉下去，

因?yàn)閴K級(jí)元素是獨(dú)占一行的

display:inline-block;

padding: 0 20px;

line-height: 58px;

text-decoration: none;

color: black;

}

</style>

html代碼

<!DOCTYPE html>

<html>

<head>

</head>

//js代碼、css代碼放在這里

<body>

<div>

</ul>

</div>

</div>

</div>

</div>

<div>

</ul>

</div>

</div>

</div>

</div>

</body>

</html>

HTML5的優(yōu)良特性很快被各種類型的網(wǎng)站利用，比如文件拖拽到網(wǎng)頁(yè)上傳功能，多數(shù)即使用HTML5提供的新屬性就可以完成，來實(shí)現(xiàn)素材的免插件拖放。因此，HTML5技術(shù)實(shí)際上在國(guó)內(nèi)已經(jīng)獲得了較廣泛的應(yīng)用與支持。從硬件角度來看，國(guó)內(nèi)手機(jī)和平板兩種移動(dòng)設(shè)備應(yīng)用最廣，PC端次之，緊接著是電視和游戲設(shè)備。從軟件角度來看，桌面瀏覽器對(duì)HTML5的支持高于移動(dòng)瀏覽器，最高可達(dá)95%；而從整體上而言，移動(dòng)瀏覽器對(duì)HTML5的支持卻優(yōu)于桌面瀏覽器。根據(jù)百度流量研究院統(tǒng)計(jì)，2016年國(guó)內(nèi)桌面瀏覽器市場(chǎng)份額最大的是Chrome，約占39.4%；IE次之，約占29.24%。其中，占比高達(dá)17%的IE 8.0對(duì)HTML5并不友好。然而，微軟已宣布停止對(duì)IE 6-10的技術(shù)支持，并打算放棄IE瀏覽器及Windows 10以下系統(tǒng)。因此，低版本IE份額正呈快速下降趨勢(shì)，2016年降到2%以下。

1.4.4 HTML5平臺(tái)的興起

2014年，在微信平臺(tái)的幫助下，HTML5社交小游戲獲得爆炸式傳播，同期為HTML5平臺(tái)以提供制作工具服務(wù)進(jìn)入市場(chǎng)的起點(diǎn)。到了2015年，越來越多公司在HTML5品牌推廣上進(jìn)行布局。在商業(yè)需求的驅(qū)動(dòng)下，HTML5頁(yè)面設(shè)計(jì)的目的性更強(qiáng)，獲得最好傳播效果的基本是經(jīng)過一定時(shí)間策劃，在團(tuán)隊(duì)操作下有針對(duì)性地進(jìn)行投放的企業(yè)案例。相對(duì)應(yīng)地，原有HTML5平臺(tái)也進(jìn)行了大面積升級(jí)。從平臺(tái)性質(zhì)而言，HTML5平臺(tái)可分為輕營(yíng)銷模板類、功能引擎類和基礎(chǔ)工具類三種：

（1）輕營(yíng)銷模板類：提供類似PPT頁(yè)面切換的HTML5制作工具，通常面向個(gè)人用戶，部分為企業(yè)用戶。該類平臺(tái)的數(shù)量較大，只適用于輕度營(yíng)銷，所能提供的頁(yè)面動(dòng)態(tài)效果局限于翻頁(yè)。如圖1所示：

圖1 易企秀桌面工具編輯界面和作品

在線咨詢

上一篇：ESP32 DHT11 / DHT22 Web服務(wù)器
下一篇：在 JS 中如何使用 Ajax 來進(jìn)行請(qǐng)求

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

踩過許多坑后，送你這份H5交互的頁(yè)面跳轉(zhuǎn)方式總結(jié)

您的項(xiàng)目需求