微信小程序 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.length" :src="webViewUrl"></web-view>
  </div>
</template>

<script>
  import api from "common/js/util/util";

  export default {
    data() {
      return {
        webViewUrl:''
      }
    },
    onShow(){
      //此处是重点
      if(wx.getStorageSync('isJournalBack')){
        let urlTemp = this.webViewUrl;
        this.webViewUrl = '';
        wx.removeStorageSync('isJournalBack');
        setTimeout( () => {
          this.webViewUrl=urlTemp.split('?')[0]+'?flag='+Date.parse(new Date())+'&' + urlTemp.split('?')[1];
        }, 100)
      }
    },
    onLoad(option) {
      if(wx.getStorageSync('isJournalBack')){
        wx.removeStorageSync('isJournalBack');
      }
      let str='/dist/journalList.html';
      if(JSON.stringify(option) !== '{}'){
        str+='?';
        for (var i in option){
          str+=i+'='+option[i]+'&'
        }
        str=str.slice(0,str.length-1);
      }
      this.webViewUrl = `${api.httpEnv()}${decodeURIComponent(str)}`
      console.log(this.webViewUrl)
    },
  }
</script>

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