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

前言

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

业务场景

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

解决方法

将页面C添加和编辑页面功能写在页面B，默认显示列表，根据用户点击编辑或者添加显示相应的操作
这个时候从页面A跳转到页面B，进行添加或编辑操作，操作成功后进行刷新页面

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

在点击返回会发现此时页面回到了页面A
但是如果点击了添加或编辑操作，用户并没有进行修改，而直接进行返回，此时页面会回到页面A，而不是显示地址列表

这个时候需要在点击添加和编辑标签上加上a标签，并在href指定一个瞄点，如下

<a href="#edit">编辑</a>

此时点击编辑的时候会发现地址栏会在原先URL基础上增加#edit，页面没有发生刷新(改变）
当用户添加或编辑成功时，调用 window.history.back()返回上一页、或者直接返回上一页时，会触发onhashchange事件，通过onhashchange事件我们可以进行判断，如果最新URL地址没有出现#号，表示用户进行了返回操作，则可以刷新页面

		window.addEventListener("hashchange", function(e){
			console.log(e)
			if (e.newURL.lastIndexOf("#") == -1){
				location.reload(); // 刷新当前页面
			}
		});

这样实现了页面A跳转到页面B，进行编辑或修改，操作成功后，进行返回页面A的流程

结尾

第一次写博客，有些地方描述的不是特别好，有什么不明白的地方，希望能够指出来，大家一起学习！