微信小程序 webview 页面刷新

微信小程序 webview 页面刷新

问题描述

在微信小程序原生页面做了操作，数据发生改变，回到 webview 页面时需要更新 webview 里面的数据。由于小程序没有提供与 webview 的实时通信能力，因此刷新页面是个可考虑的做法。

解决方案

首先，解决回到 webview 刷新的问题，webview 自带缓存，直接物理键返回，或者 back api 返回，都不会更新实时数据，这个问题可以利用 onShow 生命周期，在 onShow 生命周期中改变 webview 的 src 属性；

注意：
在 onShow 中改变 src 链接时，需要改变 src 的原链接，如果直接赋值原链接，不会起作用，所以需要在 query 参数再加上时间戳，才能让当前 webview 刷新页面；

引发的问题：
这种处理方式页面是会更新了。但是会增加webview的浏览history，导致用户在后退的时候，会在webview内退到前一个页面，而不是退到小程序的前一个页面。

处理方式：
首先，让webview做条件渲染；需要刷新时，先把webviewUrl设为空，销毁当前webview。然后再把webviewUrl设为当前值。最终综合解决方式如下：

这样便可以在不影响导航栏历史的情况下刷新页面，也可以是跳转url。
这里重新赋值 url 之后，页面内容的更新应该是异步执行的，因此我们后一次修改 url 需要延时一小段时间，否则会出现 error 。
猜测重新赋值 url 后页面实际更新应该是在下一次的 requestAnimationFrame ，因此如果页面完全不卡顿可能16ms就可以了，保险起见，我设了100ms。