点击支付宝小程序web-view返回遇到的坑

前言

最近和同事一起开发支付宝小程序。为了在微信小程序上使用，减少开发时间，大部分页面操作都在web-view中运行。网页通过web-view打开。因为是网页，所以在进行多次跳转时，如果点击返回操作，页面会返回到上一页，而有一些页面我们是不需要返回的。

业务场景

A页面跳转到B页面的地址列表页面，可以添加和编辑地址列表。如果用户进行编辑操作，页面会跳转到C页面的地址编辑页面，编辑成功后会跳转回B页面，此时点击返回。我们需要将页面返回到A页面，但是在实际操作中，你会发现页面并没有返回到A页面，而是返回到C页面来添加或编辑页面。

解决方案

在B页面编写C页面添加、编辑页面功能，默认显示列表，根据用户点击编辑或添加显示相应的操作。

此时从A页面跳转到B页面即可进行添加或编辑操作。操作成功后，刷新页面。

location.reload(); // 刷新当前页面

点击返回后，会发现页面返回到A页面。

但如果用户点击添加或编辑操作，不做修改直接返回，则页面将返回到A页面，而不是显示地址列表。

这时候就需要给添加一个标签来添加和编辑标签，并在href中指定一个瞄准点，如下

编辑

此时点击编辑，你会发现地址栏中会根据原来的URL添加#edit，并且页面不会刷新（改变）。