今年做了大量的H5項目,遇到了很多坑,有自家的也有第三方的,在這個過程中g(shù)et到了一些之前不具備的知識,所以這一篇,就簡單分享一下這方面的話題吧。
一、傳統(tǒng)的MPA
首先,說一個比較古老的東西,叫做MPA。
MPA的全稱是Multi-page Application,意思是整個應用(站點)由多個完整的html構(gòu)成。用戶在頁面1點擊跳轉(zhuǎn),需要向服務(wù)端請求頁面2,請求成功后渲染。而用戶返回時,相當于是點擊了瀏覽器的返回,頁面退回到之前的歷史記錄,并重新加載出來。
在這樣的模式下,頁面間切換慢、不流暢的問題比較突出,尤其是在移動端。
同時,它還產(chǎn)生了幾個小問題:
? 跳轉(zhuǎn)動畫:頁面間的跳轉(zhuǎn)無法實現(xiàn)轉(zhuǎn)場動畫效果。
? 如果前一個頁比較長,用戶滑動到頁面比較靠下方的位置后點擊,返回時,頁面無法默認停留在原位置。
? iOS右滑返產(chǎn)生問題,從頁面1跳轉(zhuǎn)到頁面2,再從頁面2跳轉(zhuǎn)到頁面3,右滑返回,會直接回到頁面1再之前的頁。
二、SPA
隨著對移動端體驗需求的提高以及技術(shù)的進步,另一種模式SPA(Single-page Application)逐漸成為主流。
SPA簡單來說,就是原來在MPA中的多個html,現(xiàn)在被放在了一個html中,并被分成若干個片段。跳轉(zhuǎn)、返回的本質(zhì)變成了分段的“隱藏”與“顯示”。跳轉(zhuǎn)不需要反復對服務(wù)端進行請求,從而使得頁面與頁面之間切換更加快速流暢。
在這樣的機制下,跳轉(zhuǎn)與返回完全由代碼控制,所以可以通過代碼定義頁面轉(zhuǎn)場的效果、返回。
在設(shè)計轉(zhuǎn)場動畫時,我們需要留意的是導航欄是Native的還是H5的。如果導航欄是Native的,那H5頁面不包括導航欄,它相當于是網(wǎng)頁外的元素,不在轉(zhuǎn)場效果的設(shè)計范圍內(nèi)。
三、WebView
說H5的跳轉(zhuǎn),就不得不說WebView。簡單來說,WebView是在App中用于顯示web內(nèi)容的容器。 上文提到的MPA和SPA,都裝在了這個叫做WebView的容器中。
用戶點擊頁面中的元素進行跳轉(zhuǎn),除了前述的兩種方式外,還有第三種:新打開WebView的方式。在這樣的方式下,跳轉(zhuǎn)的本質(zhì)是H5“告訴”Native,由Native執(zhí)行打開新WebView,并在新WebView中加載頁面。
因為Native的機制,打開新WebView的同時,之前的WebView會被自然、完整的保留。所以這時,之前的幾個問題就變?yōu)椋?
? 跳轉(zhuǎn)動畫:頁面間的跳轉(zhuǎn)動畫由WebView之間的跳轉(zhuǎn)動畫來決定。
? 返回后頁面停留在原位置:完美支持。
? iOS右滑返回:完美支持。
不過需要注意的地方是,打開新WebView是一個資源消耗比較大的操作。如果我們在設(shè)計一個流程時,需要比較多地連續(xù)使用這種方式,需要和研發(fā)同學進行充分的溝通。
四、比較特殊的Replace
前述的三種跳轉(zhuǎn),都會產(chǎn)生歷史記錄。MPA、SPA的歷史記錄是在H5中產(chǎn)生,新開WebView中的記錄是在Native中產(chǎn)生。
在MPA或SPA中,如果跳轉(zhuǎn)時使用Replace方法,它會用新頁面替換之前的頁面,歷史記錄中沒有之前頁面的記錄。
這是一種特殊的跳轉(zhuǎn)方式,在設(shè)計一些不可逆的流程時可考慮使用。
五、多頁面回退
了解了上述的幾種機制后,我們來看一個小的應用場景-多頁面回退。
我們在實際業(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又分三種方式:
a,如果我們把3個頁面,拆分到2個WebView中,如下圖,點擊完成按鈕,即關(guān)閉自身所在的WebView。
b,同樣是打開新的WebView,如果我們按如下圖的方法拆分會稍微復雜。這時點擊完成按鈕,首先關(guān)閉自身所在的WebView,當頁面2“意識”到自己重新被展現(xiàn)時,自動退回1步到頁面1。
c,每次打開新的WebView,這時點擊完成,回退的本質(zhì)是H5“告訴”Native關(guān)閉多個WebView。需要特別注意的是,H5中實現(xiàn)這種方式不是天然具備的,它需要Native具有一次關(guān)閉多個WebView的能力。所以我們在設(shè)計方案時,需要了解清楚自家的Native是否有這樣的能力。
小帖士
以上,簡單說了幾種H5的跳轉(zhuǎn)方式。這些跳轉(zhuǎn)方式,沒有絕對的對與錯,我們在設(shè)計方案時,需要根據(jù)實際的業(yè)務(wù)需求與技術(shù)的限制,來整體考慮解決方案。
根據(jù)個人經(jīng)驗,也有幾點小帖士分享給大家:
? 前后邏輯交織不復雜的單個頁面,可以考慮使用新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)。
? 為防止流程過于復雜,盡量不要自定義關(guān)閉、返回的行為。保持關(guān)閉為默認的關(guān)閉行為,保持返回為默認的返回行為。
作者:花生Design
公眾號: 花生Design
全站高品質(zhì)素材免費下載!