【小顺序】小顺序革新webview小结

2019年8月22日 51次阅读 来源: 二师兄

场景

在小顺序别的页面做了操纵，数据发作转变，回到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。

小结

现在我相识到的状况来看，确切没有一个简朴的API能够直接无副作用地革新小顺序webview。要领三是我本身探索出来的方法。然则总觉得这么个简朴的题目应该有更直接的做法才对，新鲜。

    原文作者：二师兄
    原文地址: https://segmentfault.com/a/1190000015901363
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞