版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yang450712123/article/details/86486849
微信小程序 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。