这一年做了很多HTML5的项目，遇到了很多坑。在这个过程中，我学到了一些以前没有的知识，所以本文就这个话题简单分享一下。传统的MPA首先，我们来说说一个比较老的东西，叫做MPA。MPA的全称是Multi-pageApplication，意思是整个应用（站点）由多个完整的html组成。用户点击跳转到第1页，需要向服务器请求第2页，请求成功后渲染。当用户返回时，相当于点击浏览器的返回，页面返回到之前的历史记录，重新加载。这种模式下，页面切换慢、不流畅的问题比较突出，尤其是在移动端。同时它也有几个小问题：跳转动画：页面之间的跳转无法达到过渡动画的效果。如果上一页比较长，用户滑动到页面下方点击，返回时，默认页面不能停留在原位置。iOS右滑返回有问题，从第1页跳到第2页，再从第2页跳到第3页，右滑返回，会直接返回到第1页之前的页面。SPA随着需求的增加为了移动端的体验和技术的进步，另一种模式SPA（Single-pageApplication）逐渐成为主流。简单来说，SPA就是把MPA中的多个html现在放在一个html里面，分成几个片段。跳跃和返回的本质变成了片段的“隐藏”和“显示”。跳转不需要向服务器重复请求，这使得页面之间的切换更快更流畅。在这样的机制下，跳转和返回完全由代码控制，所以页面跳转的效果和返回都可以通过代码来定义。在设计转场动画时，需要注意导航栏是Native的还是HTML5的。如果导航栏是原生的，那么HTML5页面是不包含导航栏的，相当于网页之外的元素，不在转场效果的设计范围内。当WebView说HTML5跳转的时候，就不得不说WebView。简单的说，WebView就是一个在App中用来展示网页内容的容器。上面提到的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种方式。如果我们把3个页面拆分成2个WebView，如下图，点击Finish按钮关闭所在的WebView。同样是新开一个WebView，如果我们像下图那样拆分，会稍微复杂一点。这时点击Finish按钮，先关闭你所在的WebView，当page2“意识到”你重新呈现时，会自动退回1step到page1。每次打开一个新的WebView，点击此时结束。fallback的本质是HTML5“告诉”Native关闭多个WebView。需要注意的是，这种方式在HTML5中并不自然，需要Native具备一次关闭多个WebView的能力。所以，我们在设计方案的时候，需要知道自己的Native是否具备这样的能力。综上所述，简单说说几种HTML5的跳转方法。这些跳跃方式没有绝对的对错。我们在设计解决方案时，需要根据实际业务需求和技术约束，将解决方案作为一个整体来考虑。根据个人经验，有几个小技巧分享给大家：对于逻辑交织不复杂的单页，可以考虑使用新的WebView开启跳转。如果是基于任务的流程，可以考虑在WebView中包装一个任务流，在任务内使用SPA跳转。不同的任务使用不同的WebView。保持任务之间的关系清晰。设计需要关注页面间的过渡动??画效果，优先使用SPA跳转。为了防止流程过于复杂，尽量不要自定义关闭和返回的行为。keepclose用于默认关闭行为，keepreturn用于默认返回行为。
