H5的技术实现要点

H5作为一个新兴的宣传手法，我们很容易遇到很多的坑，有第三发开发公司坑人的，也有自己需求没给足，开发出来的H5效果很差的，在这个过程中你就会发现你对H5一点都不了解，小编今天就带大家补补知识。

一、传统的MPA

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

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

在这样的模式下，页面间切换慢、不流畅的问题比较突出，尤其是在移动端。同时，它还产生了几个小问题：

• 跳转动画：页面间的跳转无法实现转场动画效果。

• 如果前一个页比较长，用户滑动到页面比较靠下方的位置后点击，返回时，页面无法默认停留在原位置。

• iOS右滑返产生问题，从页面1跳转到页面2，再从页面2跳转到页面3，右滑返回，会直接回到页面1再之前的页。

二、WebView

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

用户点击页面中的元素进行跳转，除了前述的两种方式外，还有第三种：新打开WebView的方式。在这样的方式下，跳转的本质是H5“告诉”Native，由Native执行打开新WebView，并在新WebView中加载页面。因为Native的机制，打开新WebView的同时，之前的WebView会被自然、完整的保留。所以这时，之前的几个问题就变为：

• 跳转动画：页面间的跳转动画由WebView之间的跳转动画来决定。

• 返回后页面停留在原位置：完美支持。

• iOS右滑返回：完美支持。

不过需要注意的地方是，打开新WebView是一个资源消耗比较大的操作。如果我们在设计一个流程时，需要比较多地连续使用这种方式，需要和研发同学进行充分的沟通。

三、SPA

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

SPA简单来说，就是原来在MPA中的多个html，现在被放在了一个html中，并被分成若干个片段。跳转、返回的本质变成了分段的“隐藏”与“显示”。跳转不需要反复对服务端进行请求，从而使得页面与页面之间切换更加快速流畅。在这样的机制下，跳转与返回完全由代码控制，所以可以通过代码定义页面转场的效果、返回。

在设计转场动画时，我们需要留意的是导航栏是Native的还是H5的。如果导航栏是Native的，那H5页面不包括导航栏，它相当于是网页外的元素，不在转场效果的设计范围内。

四、比较特殊的Replace

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

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

这是一种特殊的跳转方式，在设计一些不可逆的流程时可考虑使用。

总结：这几种介绍都是比较专业的知识面，小编希望大家在做H5的时候更能了解自己的需求，这样才能得到更多的改善。有更好的推广效果，做出来的东西也更美观。