微信小程序 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设为当前值。最终综合解决方式如下：

<template>
  <div>
    <!--此处是重点-->
    <web-view v-if="webViewUrl.len