Trois méthodes pour mettre à jour les pages WebView dans l'applet WeChat

Scénario

Lorsque vous effectuez une opération sur d'autres pages du mini programme et que les données changent, vous devez mettre à jour les données dans la vue Web lorsque vous revenez à la page de vue Web. Étant donné que le mini-programme ne fournit pas de capacités de communication en temps réel avec la vue Web, l'actualisation de la page est à prendre en compte.

Méthode 1

La méthode la plus courante consiste à modifier l'URL de la vue Web, à ajouter des paramètres de requête ou quelque chose du genre, et la page sera mise à jour. Cependant, cela augmentera l'historique de navigation de la vue Web, obligeant l'utilisateur à revenir à la page précédente de la vue Web au lieu de la page précédente de l'applet lors du retour en arrière.

Méthode 2

Appelez la méthode wx.redirectTo(OBJECT) dans le mini programme. Remplissez ici l'url de la page actuelle. En fait, fermer la page actuelle et la rouvrir atteint l'objectif de rafraîchir la vue Web déguisée. Cependant, puisque la page du mini programme est rouverte, cela prendra plus de temps. De plus, l'utilisateur verra la page précédente clignoter, puis la nouvelle page apparaîtra.

Méthode 3

Tout d'abord, laissez la vue Web effectuer un rendu conditionnel :

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

Lorsque vous devez actualiser, définissez d'abord l'URL de la vue Web pour qu'elle soit vide et détruise la vue Web actuelle. Définissez ensuite webviewUrl sur la valeur actuelle. Comme suit :

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

De cette façon, la page peut être actualisée sans affecter l'historique de la barre de navigation, et il peut également s'agir d'une URL de saut.
Après setData ici, la mise à jour du contenu de la page doit être exécutée de manière asynchrone, donc la dernière fois que nous modifions l'URL, nous devons la retarder pendant une courte période, sinon une erreur se produira.
Je suppose que la mise à jour réelle de la page après setData devrait être dans le prochain requestAnimationFrame, donc si la page n'est pas bloquée du tout, cela peut prendre 16 ms. Pour être sûr, je l'ai réglé sur 100 ms.

Résumé

D'après ce que j'ai appris jusqu'à présent, il n'existe en effet pas d'API simple capable d'actualiser directement la vue Web du mini programme sans effets secondaires. La troisième méthode est une méthode que j’ai trouvée moi-même. Mais j’ai toujours l’impression qu’un problème aussi simple devrait avoir une approche plus directe, ce qui est étrange.

Articles connexes :

Explication détaillée de la méthode d'implémentation de l'actualisation déroulante et du chargement pull-up dans l'applet WeChat

JS actualiser la fenêtre parent Résumé de plusieurs méthodes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!