关于H5页面问题的思考

前段时间，在工作中遇到一个关于H5的问题，引发了一些思考，在这里分享，与大家交流共勉。

问题背景：需要做一个带有企业logo的banner，然后用户点击后进入一个产品介绍页的H5。UI画了H5的5个页面，前端同事做了动画和交互。但是H5页面比较长，由5个子页面组成。问题是：

IOS：点击右上角返回键直接返回到native首页（无论H5页面内如何切换）

Andriod:点击右上角返回键返回到上一层级（如果用户在H5页面内切换查看，返回到上一个H5页面）

这里牵扯到内部产品，就不放原来页面了，我在网上找了一张H5页面，大家以理解意思为主。

H5页面说明

问题分析：5个子页面之间的跳转通过锚链接进行衔接。那么问题来了：native嵌套h5 之后，如果要返回到上一个页面，native想要返回到上一个native页面，可以监听到h5的链接，加入锚链接之后，h5的链接早已改变。所以native返回的，都是锚链接的路径，并不是真正的native页面。（技术最后分析出来的原因）

初步解决方案：站在产品层面，结合一些成熟产品的做法。我提出了一下几种初步解决方案：

1.直接将安卓的返回键逻辑设置为返回到native首页（与IOS一致）（这里主要是考虑目前的H5页面只是介绍，没有跳转，用户在H5内五个页面之间的切换操作习惯更多的是滑动，而非点击返回键。）

优点：改动较小，能够快速有效解决当前问题

缺点：后期如果有H5页面的嵌套，会影响用户操作体验

2.在右上角添加关闭页面操作×，然后将IOS于安卓设置统一：点击返回键是返回到上一层，点击关闭按钮直接关闭掉当前H5页面，返回到native首页（这里主要是考虑后期可能会有H5页面相互嵌套的情况，这种设置可以解决不同H5页面之间的循环跳转，将返回和关闭操作分离，给用户清晰、方便的操作体验）

优点：分离操作一次性解决后续问题

缺点：改动较大

3.将H5现在5个子页面改为1个界面（参考了淘宝，京东等电商网站，H5页面都为1张页面，返回键的逻辑也是返回上一个层级，这样单张性质的H5页面嵌套，用户操作逻辑也是正确的，也符合用户操作习惯）

优点：不用修改相关返回逻辑

缺点：1张页面可能会损失很大部分的动态效果，沦为静态页面

4.方案2的优化：判断如果H5页面用户没有进行页面切换，则用户点击返回键直接返回到native首页，判断如果用户在H5页面内又进行了页面切换，则当用户第一次点击返回的时候，在返回上一层级的同时，右上角出现关闭按钮×（类似京东）

优点：用户体验较好，而且作为电商，也实现了挽留用户的设置

缺点：貌似这种没有特别大的缺点

最终我们在保持原来全部动态效果的前提下，安卓实现了点击返回键就返回到native首页。算是对方案3的进一步优化。修改方案是更改了锚链接，使5个子页面都为同一个链接地址，所以当点击返回键时，默认返回到上一层级（上一个链接）。这样系统默认H5的所有页面都是一个层级。

总结：这样处理算是目前比较方便的一个方案，但对于后期如果设置多层H5页面的跳转和嵌套，那就必须要给一个立即终止操作，让用户直接跳出所有的H5页面。否则用户就会迷失在H5页面的包围之中，不能出去进行任何别的操作。这是很可怕的，用户会选择删掉应用。而且如果产品是电商类等需要留住用户在商品购买介绍页，以便于尽可能多的实现用户购买。那方案4目前是比较合理的做法。