建站
咨詢
售后
建站咨詢
新聞中心
今年做了大量的 HTML5 項目，遇到了很多坑。在這個過程中學(xué)到了一些之前不具備的知識，所以這篇文章就簡單分享一下這方面的話題。
在上街等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站建設(shè)、網(wǎng)站制作 網(wǎng)站設(shè)計制作按需定制網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計,全網(wǎng)營銷推廣,外貿(mào)網(wǎng)站建設(shè),上街網(wǎng)站建設(shè)費用合理。
傳統(tǒng)的MPA
首先，說一個比較古老的東西，叫做 MPA。
MPA 的全稱是 Multi-page Application，意思是整個應(yīng)用（站點）由多個完整的 html 構(gòu)成。用戶在頁面 1 點擊跳轉(zhuǎn)，需要向服務(wù)端請求頁面 2，請求成功后渲染。而用戶返回時，相當(dāng)于是點擊了瀏覽器的返回，頁面退回到之前的歷史記錄，并重新加載出來。
在這樣的模式下，頁面間切換慢、不流暢的問題比較突出，尤其是在移動端。
同時，它還產(chǎn)生了幾個小問題：
- 跳轉(zhuǎn)動畫：頁面間的跳轉(zhuǎn)無法實現(xiàn)轉(zhuǎn)場動畫效果。
- 如果前一個頁比較長，用戶滑動到頁面比較靠下方的位置后點擊，返回時，頁面無法默認(rèn)停留在原位置。
- iOS 右滑返回產(chǎn)生問題，從頁面 1 跳轉(zhuǎn)到頁面 2，再從頁面 2 跳轉(zhuǎn)到頁面 3，右滑返回，會直接回到頁面 1 前的頁。
SPA
隨著對移動端體驗需求的提高以及技術(shù)的進(jìn)步，另一種模式 SPA（Single-page Application）逐漸成為主流。
SPA 簡單來說，就是原來在 MPA 中的多個 html，現(xiàn)在被放在了一個 html 中，并被分成若干個片段。跳轉(zhuǎn)、返回的本質(zhì)變成了分段的「隱藏」與「顯示」。跳轉(zhuǎn)不需要反復(fù)對服務(wù)端進(jìn)行請求，從而使得頁面與頁面之間切換更加快速流暢。
在這樣的機制下，跳轉(zhuǎn)與返回完全由代碼控制，所以可以通過代碼定義頁面轉(zhuǎn)場的效果、返回。
在設(shè)計轉(zhuǎn)場動畫時，我們需要留意的是導(dǎo)航欄是 Native 的還是 HTML5 的。如果導(dǎo)航欄是 Native 的，那 HTML5 頁面不包括導(dǎo)航欄，它相當(dāng)于是網(wǎng)頁外的元素，不在轉(zhuǎn)場效果的設(shè)計范圍內(nèi)。
WebView
說 HTML5 的跳轉(zhuǎn)，就不得不說 WebView。簡單來說，WebView 是在 App 中用于顯示 web 內(nèi)容的容器。上文提到的 MPA 和 SPA，都裝在了這個叫做 WebView 的容器中。
用戶點擊頁面中的元素進(jìn)行跳轉(zhuǎn)，除了前面的兩種方式外，還有第三種：新打開 WebView 的方式。在這樣的方式下，跳轉(zhuǎn)的本質(zhì)是 HTML5「告訴」Native，由 Native 執(zhí)行打開新 WebView，并在新 WebView 中加載頁面。
因為 Native 的機制，打開新 WebView 的同時，之前的 WebView 會被自然、完整地保留。所以這時，之前的幾個問題就變?yōu)椋?/p>
- 跳轉(zhuǎn)動畫：頁面間的跳轉(zhuǎn)動畫由 WebView 之間的跳轉(zhuǎn)動畫來決定。
- 返回后頁面停留在原位置：***支持。
- iOS 右滑返回：***支持。
不過需要注意的地方是，打開新 WebView 是一個資源消耗比較大的操作。如果我們在設(shè)計一個流程時，需要比較多的連續(xù)使用這種方式，需要和研發(fā)同學(xué)進(jìn)行充分的溝通。
比較特殊的Replace
前述的三種跳轉(zhuǎn)，都會產(chǎn)生歷史記錄。MPA、SPA 的歷史記錄是在 HTML5 中產(chǎn)生，新開 WebView 中的記錄是在 Native 中產(chǎn)生。
在 MPA 或 SPA 中，如果跳轉(zhuǎn)時使用 Replace 方法，它會用新頁面替換之前的頁面，歷史記錄中沒有之前頁面的記錄。
這是一種特殊的跳轉(zhuǎn)方式，在設(shè)計一些不可逆的流程時可考慮使用。
多頁面回退
了解了上述的幾種機制后，我們來看一個小的應(yīng)用場景──多頁面回退。
我們在實際業(yè)務(wù)中，經(jīng)常會有這樣的需求。假設(shè)我們有 1、2、3 三個頁組成的一個流程，在頁面 3 上有個「完成」按鈕點擊回到頁面 1。在不同的交互模式下，實現(xiàn)這樣的跳轉(zhuǎn)有著不同的機制。
1. SPA模式下的正常跳轉(zhuǎn)
這種模式是 3 個頁面都在一個 WebView 中。點擊頁面 3 中的「完成」按鈕，回退 -2 ，即回退 2 步歷史記錄，到頁面 1。
2. 新打開WebView
打開新 WebView 又分三種方式。
如果我們把 3 個頁面，拆分到 2 個 WebView 中，如下圖，點擊完成按鈕，即關(guān)閉自身所在的 WebView。
同樣是打開新的 WebView，如果我們按如下圖的方法拆分會稍微復(fù)雜。這時點擊完成按鈕，首先關(guān)閉自身所在的 WebView，當(dāng)頁面 2「意識」到自己重新被展現(xiàn)時，自動退回 1 步到頁面 1。
每次打開新的 WebView，這時點擊完成，回退的本質(zhì)是 HTML5「告訴」Native 關(guān)閉多個 WebView。需要特別注意的是，HTML5 中實現(xiàn)這種方式不是天然具備的，它需要 Native 具有一次關(guān)閉多個 WebView 的能力。所以我們在設(shè)計方案時，需要了解清楚自家的 Native 是否有這樣的能力。
總結(jié)
以上，簡單說了幾種 HTML5 的跳轉(zhuǎn)方式。這些跳轉(zhuǎn)方式，沒有絕對的對與錯，我們在設(shè)計方案時，需要根據(jù)實際的業(yè)務(wù)需求與技術(shù)的限制，來整體考慮解決方案。
根據(jù)個人經(jīng)驗，也有幾點小帖士分享給大家：
- 前后邏輯交織不復(fù)雜的單個頁面，可以考慮使用新 WebView 打開跳轉(zhuǎn)。
- 如果是一個任務(wù)型的流程，可以考慮將一個任務(wù)流包在一個 WebView 中，在任務(wù)內(nèi)使用 SPA 跳轉(zhuǎn)。不同的任務(wù)使用不同的 WebView。保持任務(wù)之間的關(guān)系清晰明了。
- 設(shè)計上需要著重表現(xiàn)頁面間轉(zhuǎn)場動畫的效果，優(yōu)先考慮使用 SPA 跳轉(zhuǎn)。
- 為防止流程過于復(fù)雜，盡量不要自定義關(guān)閉、返回的行為。保持關(guān)閉為默認(rèn)的關(guān)閉行為，保持返回為默認(rèn)的返回行為。
文章標(biāo)題：踩過許多坑后，送你這份H5交互的頁面跳轉(zhuǎn)方式總結(jié)
轉(zhuǎn)載注明：http://www.5511xx.com/article/cdopeep.html
