今了的 HTML5 项目,遇到了很多坑。这过程中学到了一些之不具备的知识,所以这篇文章就简单分享一下这方面的话题。
首先,一比较古老的东,叫 MPA。
MPA 全称是 Multi-page Application,意思是个应用(站)由多个完 html 构成。用户在页 1 击跳转,需要服务端请求页 2,请求成功后渲染。而用户返回时,相于是击了浏览返回,页退回到前历史记录,并新加载出来。
在这的模式下,页面间切换慢、不流畅的问题比较突出,尤其是在移动端。
同时,它还产生几个小问题:
- 跳转动画:页面间的跳转无法实现转动画效果。
- 果前一个页比长,用户滑动到页面比靠下方的位置点击,返回时,页面无法默认停留在原位置。
- iOS 右滑返产生问题,从页面 1 跳转到页面 2,再从页面 2 跳转到页面 3,右滑返,会直接到页面 1 前的页。
随着对移动端体验需求的提高以及术的进步,另一种模式 SPA(Single-page Application)逐渐成为主流。
SPA 简单来说,就是原来在 MPA 中的个 html,现在被放在一个 html 中,并被分成若干个段。跳转、返回的质变成分段的「隐藏」与「显示」。跳转不需要反复对服务端进行请求,从而使得页面与页面之间切换更加快速流畅。
在这样的机制,跳转与返全由代码控制,可通过代码定义页面转场的效果、返。
设转场动画时,我们需留意的导航栏 Native 的还 HTML5 的。如果导航栏 Native 的,那 HTML5 页面不包括导航栏,它相当于网页外的元素,不转场效果的设范围内。
HTML5 的跳转,就不得不 WebView。简单,WebView App 中用于显示 web 内的器。文提到的 MPA SPA,都装了这叫 WebView 的器中。
用户击页元素进跳转,除了前两,有第三:新打开 WebView 。在这样下,跳转本质是 HTML5「告诉」Native,由 Native 执打开新 WebView,并在新 WebView 加载页。
因为 Native 的机制,开新 WebView 的同,之前的 WebView 会被然、完整地保留。所以这,之前的个问题就变为:
- 跳转动画:页跳转动画由 WebView 跳转动画来决定。
- 返回后页面停留在位置:完美支持。
- iOS 右滑返回:完美支持。
不过需要注的地方是,开新 WebView 是一个资源消耗比较大的操作。如果在计一个流程,需要比较多的续使用这种方式,需要和研发同学进行充的沟通。
前述的三种跳转,都会产生历史记录。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 跳转。
- 为防止流程过于复杂,尽量不要定义关闭、返回的行为。保持关闭为默认的关闭行为,保持返回为默认的返回行为。
欢迎关注作者微信公众号:「花生Design」