传统的MPA

首先,说一个比较古老的东西,叫做 MPA。

MPA 的全称是 Multi-page Application,意思是全体运用(站点)由多个完全的 html 构成。
用户在页面 1 点击跳转,须要向做事端要求页面 2,要求成功后渲染。
而用户返回时,相称于是点击了浏览器的返回,页面退回到之前的历史记录,并重新加载出来。

html5手机导航栏左右滑动踩过很多坑后送你这份H5交互的页面跳转方法总结 Vue.js
(图片来自网络侵删)

在这样的模式下,页面间切换慢、不流畅的问题比较突出,尤其是在移动端。

同时,它还产生了几个小问题:

跳迁徙改变画:页面间的跳转无法实现转场动画效果。
如果前一个页比较长,用户滑动到页面比较靠下方的位置后点击,返回时,页面无法默认勾留在原位置。
iOS 右滑返回产生问题,从页面 1 跳转到页面 2,再从页面 2 跳转到页面 3,右滑返回,会直接回到页面 1 前的页。

SPA

随着对移动端体验需求的提高以及技能的进步,另一种模式 SPA(Single-page Application)逐渐成为主流。

SPA 大略来说,便是原来在 MPA 中的多个 html,现在被放在了一个 html 中,并被分成多少个片段。
跳转、返回的实质变成了分段的「隐蔽」与「显示」。
跳转不须要反复对做事端进行要求,从而使得页面与页面之间切换更加快速流畅。

在这样的机制下,跳转与返回完备由代码掌握,以是可以通过代码定义页面转场的效果、返回。

在设计转场动画时,我们须要留神的是导航栏是 Native 的还是 HTML5 的。
如果导航栏是 Native 的,那 HTML5 页面不包括导航栏,它相称于是网页外的元素,不在转场效果的设计范围内。

WebView

说 HTML5 的跳转,就不得不说 WebView。
大略来说,WebView 是在 App 中用于显示 web 内容的容器。
上文提到的 MPA 和 SPA,都装在了这个叫做 WebView 的容器中。

用户点击页面中的元素进行跳转,除了前面的两种办法外,还有第三种:新打开 WebView 的办法。
在这样的办法下,跳转的实质是 HTML5「见告」Native,由 Native 实行打开新 WebView,并在新 WebView 中加载页面。

由于 Native 的机制,打开新 WebView 的同时,之前的 WebView 会被自然、完全地保留。
以是这时,之前的几个问题就变为:

跳迁徙改变画:页面间的跳迁徙改变画由 WebView 之间的跳迁徙改变画来决定。
返回后页面勾留在原位置:完美支持。
iOS 右滑返回:完美支持。

不过须要把稳的地方是,打开新 WebView 是一个资源花费比较大的操作。
如果我们在设计一个流程时,须要比较多的连续利用这种办法,须要和研发同学进行充分的沟通。

比较分外的Replace

前述的三种跳转,都会产生历史记录。
MPA、SPA 的历史记录是在 HTML5 中产生,新开 WebView 中的记录是在 Native 中产生。

在 MPA 或 SPA 中,如果跳转时利用 Replace 方法,它会用新页面更换之前的页面,历史记录中没有之前页面的记录。

这是一种分外的跳转办法,在设计一些不可逆的流程时可考虑利用。

多页面回退

理解了上述的几种机制后,我们来看一个小的运用处景──多页面回退。

我们在实际业务中,常常会有这样的需求。
假设我们有 1、2、3 三个页组成的一个流程,在页面 3 上有个「完成」按钮点击回到页面 1。
在不同的交互模式下,实现这样的跳转有着不同的机制。

1. SPA模式下的正常跳转

这种模式是 3 个页面都在一个 WebView 中。
点击页面 3 中的「完成」按钮,回退 -2 ,即回退 2 步历史记录,到页面 1。

2. 新打开WebView

打开新 WebView 又分三种办法。

如果我们把 3 个页面,拆分到 2 个 WebView 中,如下图,点击完成按钮,即关闭自身所在的 WebView。

同样是打开新的 WebView,如果我们按如下图的方法拆分会轻微繁芜。
这时点击完成按钮,首先关闭自身所在的 WebView,当页面 2「意识」到自己重新被展现时,自动退回 1 步到页面 1。

每次打开新的 WebView,这时点击完成,回退的实质是 HTML5「见告」Native 关闭多个 WebView。
须要特殊把稳的是,HTML5 中实现这种办法不是天然具备的,它须要 Native 具有一次关闭多个 WebView 的能力。
以是我们在设计方案时,须要理解清楚自家的 Native 是否有这样的能力。

总结

以上,大略说了几种 HTML5 的跳转办法。
这些跳转办法,没有绝对的对与错,我们在设计方案时,须要根据实际的业务需求与技能的限定,来整体考虑办理方案。

根据个人履历,也有几点小帖士分享给大家:

前后逻辑交织不繁芜的单个页面,可以考虑利用新 WebView 打开跳转。
如果是一个任务型的流程,可以考虑将一个任务流包在一个 WebView 中,在任务内利用 SPA 跳转。
不同的任务利用不同的 WebView。
保持任务之间的关系清晰明了。
设计上须要着重表现页面间转场动画的效果,优先考虑利用 SPA 跳转。
为防止流程过于繁芜,只管即便不要自定义关闭、返回的行为。
保持关闭为默认的关闭行为,保持返回为默认的返回行为。