微信小程序更新webview页面的三种方法

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

方法一
最常见的做法，修改一下webview的url，加点query参数什么的，页面就会更新了。但是这会增加webview的浏览history，导致用户在后退的时候，会在webview内退到前一个页面，而不是退到小程序的前一个页面。

方法二
在小程序内调用wx.redirectTo(OBJECT)方法。这里填当前页面的url。其实是关闭当前页面重新打开，变相达到刷新webview的目的。但是由于重新打开了小程序页面，因此耗时会增加一些。并且，用户会看到前一个页面闪一下，然后出现新页面。

方法三
首先，让webview做条件渲染：

<web-view wx:if="{{ webviewUrl }}" src="{{ webviewUrl }}" />

需要刷新时，先把webviewUrl设为空，销毁当前webview。然后再把webviewUrl设为当前值。如下：

refreshWebview: function () {let tmpUrl = this.data.webviewUrl;this.setData({webviewUrl: ''});setTimeout(() => {this.setData({webviewUrl: tmpUrl})}, 100);
}

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

转载来源：https://www.php.cn/xiaochengxu-407648.html

微信小程序更新webview页面的三种方法相关推荐

微信小程序使用自定义字体的三种方法
一.loadFontFace接口小程序官方提供的接口,最便捷的加载字体的方法,不过限制颇多.必须https且同源,canvas等原生组件不支持.注意!!使用本地文件无效,必须使用网络地址. 官方文档 ...
微信小程序如何导入文件的一种方法
微信小程序如何导入文件的一种方法,前三条才是有用的信息 1 环境 2 当你看到好的demo想在自己的小程序试试的时候 3 解决方式,进入本地文件夹直接复制新的改变功能快捷键合理的创建标题,有助于 ...
微信小程序转二维码两种方法
话不多说,直接上干货第一种方法: 首先,你需要在电脑上打开https://mp.weixin.qq.com注册一个个人微信订阅号, 其次,登陆微信电脑版,微信号关注你注册的订阅号,这是重点注册好了 ...
微信小程序刷新webview页面问题
一.背景我这边小程序的首页使用的是web-view组件.相当于直接引入了url,访问写好的h5页面即可.比着原生的小程序页面来说,方便了不少,但是刷新是个问题.这里记录一下刷新的方法. 二.微信小程 ...
微信小程序在web-view页面做分享，并且把分享的参数传递给小程序
QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票本demo实现的功能,微信小程序给h5传参,h5给小程序传参实现代码: <!--index.wxm ...
微信小程序使用特殊字体的两种方法
微信小程序中如何使用特殊字体我有两种方法: 1. 转base64格式下载要使用的字体,建议TTF格式打开网站 https://transfonter.org/ 转换格式,得到压缩包将压缩包解压 ...
微信小程序使用和天气图标的一种方法
和天气官方文档上介绍的npm导入后使用<i class="qi-xxx"></i>的方式在微信小程序上并不能使用.网上搜的博客大多也是将icon图标下载到本 ...
微信小程序实现比较功能的五种方法
首先在index.wxml页面写一个测试页面如图: 代码如下接下来就是比较功能的实现第一种方法首先在两个input组件中用bindchange方法绑定事件处理函数,在button组件中用bin ...
微信小程序商品详情页面实现三个tab选项卡（商品参数、商品介绍、规格明细）
前段书写 <view class="about"><block wx:for="{{swiperTit ...

微信小程序更新webview页面的三种方法

微信小程序更新webview页面的三种方法相关推荐

最新文章

热门文章