去年做了很多H5项目，遇到了很多坑，包括自己的和第三方的。 在这个过程中，我获得了一些以前没有的知识，所以在第一篇文章中，我将简要分享这个主题。
1. 传统MPA
首先我们先来说一个比较老的东西，叫做MPA。
MPA的全称是Multi-pageApplication，意思是整个应用程序（站点）是由多个完整的html组成的。 用户点击页面1进行跳转，需要向服务器请求页面2，请求成功后进行渲染。 当用户返回时，相当于点击浏览器的返回，页面返回到之前的历史记录并重新加载。
该模式下，页面切换缓慢、不流畅的问题较为突出，尤其是联通侧。
同时，也形成了一些小问题：
2. 水疗
随着联通终端体验需求的不断提高和技术的进步，另一种模式SPA（单页应用）逐渐成为主流。
简单来说，SPA就是原本在MPA中的多个html，现在被放到一个html中，分成几个片段。 跳转和返回的本质是实现了段的“隐藏”和“显示”。 跳转不需要向服务器重复请求，从而促进页面之间的切换更快、更流畅。
在这样的机制下，跳转和返回完全由代码控制，因此可以通过代码来定义页面跳转的效果和返回。
在设计过渡动画时，我们需要注意导航栏是Native还是H5。 如果导航栏是原生的，那么H5页面不包含导航栏，相当于网页之外的元素，不在转场效果的设计范围之内。
3. 网页视图
说到H5跳转，就不得不说到WebView。 简单来说，WebView是App中用来显示网页内容的容器。 上面提到的MPA和SPA都是安装在这个叫WebView的容器里的。
用户点击页面上的某个元素进行跳转，不仅有前面提到的两种形式，还有第三种形式：新打开WebView的形式。 这种形式下，跳转的本质是H5“告诉”Native打开一个新的WebView，并在新的WebView中加载页面。
由于Native的机制，当打开一个新的WebView时，之前的WebView会自然完整地保留下来。 那么这个时候，前面的问题就变成了：
但需要注意的是，打开一个新的WebView是一个资源密集型操作。 如果我们在设计流程时需要更持续地使用这些方法，就需要和开发朋友充分沟通。
四、特殊Replace
以上三跳将形成历史记录。 MPA和SPA的历史记录在H5中形成，新打开的WebView中的记录在Native中形成。
在MPA或SPA中，如果跳转时使用Replace方法，则会用新页面替换上一页，并且历史记录中没有上一页的记录。
这是跳跃的一种特殊形式，在设计一些不可逆过程时可以考虑这种形式。
五、多页面回退
了解了上面的机制之后html5跳转页面，我们来看一个小的应用场景——多页面回滚。
在我们的实际业务中，经常会有这样的需求。 假设我们有一个由1、2、3三个页面组成的流程，在页面3上有一个“完成”按钮返回页面1。在不同的交互模式下，有不同的机制来实现这样的跳转：
1.SPA模式下正常跳转
这些模式是 3 个页面html5跳转页面，全部位于一个 WebView 中。 点击第3页的“完成”按钮，回滚-2，即回滚2步历史，跳转到第1页。
2.新打开WebView
打开新的WebView分为三种形式：
A。 如果我们将 3 个页面拆分为 2 个 WebView，如右图所示，单击 Finish 按钮关闭所在的 WebView。
b. 也是新开一个WebView。 如果我们像右图那样拆分的话，就会稍微复杂一些。 这时候点击Finish按钮，先关掉所在的WebView，当页面2“意识到”你已经被重新解释后，手动返回1步到页面1。
C。 每次打开新的WebView时，此时单击Finish。 回退的本质是H5“告诉”Native关闭多个WebView。 需要注意的是，这些方法在H5中的实现并不是天然可用的，它需要Native具有一次关闭多个WebView的能力。 所以我们在设计方案的时候，需要知道自己的Native是否具备这样的能力。
尖端
上面，我简单讲了几种H5跳转形式。 这种跳跃形式没有绝对的正确或错误。 我们在设计解决方案时，需要根据实际的业务需求和技术约束，从整体上考虑解决方案。
根据个人经验，有几点建议与大家分享：
