直击根源：微信小程序中web-view再次刷新后页面需要退两次

Posted 2022-07-16 fenqi

背景

在上一章(直击根源：vue项目微信小程序页面跳转web-view不刷新)解决了vue在小程序回退不刷新的问题之后，会引出了一个刷新的页面需要点击返回两次才能返回上一个页面

问题描述

在A页面从B页面带了参数返回之后，A页面会刷新，直接导致了，A页面返回上一个页面需要点击两次，其中点击一次时还是A页面。

解决方案

1. 首先第一个想法就是，设置一下退回按钮直接跳到上一个页面去；经过资料查找，回退按钮是没有直接触发函数的，也就是说不能直接控制回退的功能。

2. 在寻找资料时，发现可以间接的触发一个unload函数，于是尝试在当前页面退回按钮点击后，会立即触发当前页面的unload方法，在unload里面尝试跳转到A的前一页，结果如下：

   1. 在第一次点击退回，没有触发unload
   2. 再次点击退回，成功触发了unload

   与期望不符，预期unload第一次退回触发才可以进行页面跳转

3. 那么是web-view刷新产生的这个页面，也不能干掉，让web-view刷新这个页面就可以了，找了很多资料，没有理出一个头绪，web-view既然是第二次刷新产生的，那么让只刷新第一次是不是就可以解决了，于是做了如下尝试：

   在B页面把A页面的web-view的src变量置为空，然后在A页面web-view上添加wx:if=src!==‘‘的条件控制，在src为空时销毁web-view，然后在B页面退回通过另一个变量把需要的url传递过去在A页面onShow，再设置src为一个我们期望的跳转url，总结一下：

    A页面跳到B页面时设置A的src为空-销毁了`web-view`，退回A页面时在onShow方法在设置src的值-`web-view`被重新渲染

   测试结果得到了预期：
   页面被刷新，且没有了A页面退回两次的情况

总结

1. web-view在src变化之后，会产生一个新的页面，并加入的页面栈里面
2. 刷新之后的页面回退不会有unload方法调用
3. web-view销毁重建可以避免产生新的页面
4. 销毁重建解

自此，微信小程序使用vue嵌套页面刷新的核心问题都解决了