Comment Uniapp met en cache les itinéraires

uniapp est un framework de développement multiplateforme qui peut réaliser le développement d'applications multiterminaux avec un seul ensemble de code. Dans Uniapp, le saut de routage de page est une fonction très importante. Afin d'optimiser l'expérience utilisateur, nous devons mettre en cache certaines pages de routage couramment utilisées afin qu'elles puissent être chargées rapidement lors de leur prochaine saisie. Cet article présentera comment Uniapp met en cache les itinéraires.

1. Contexte

Dans les applications mobiles, il faut généralement des centaines, voire des milliers de millisecondes pour ouvrir une nouvelle page. Cette fois, l'expérience utilisateur se dégrade car l'utilisateur ne peut rien faire d'autre en attendant le chargement de la page. Surtout dans certains cas où l'environnement réseau est médiocre, le temps de chargement des pages sera plus évident. Afin d'éviter que cela ne se produise, nous devons adopter certaines méthodes pour optimiser l'expérience utilisateur.

2. uniapp route cache

uniapp fournit une méthode de cache de route pour optimiser l'expérience utilisateur. La signification de la mise en cache de route est que lorsque l'utilisateur quitte une page, la page ne sera pas déchargée, mais restera en mémoire, de sorte que la prochaine fois que l'utilisateur entrera dans la page, ce sera très rapide.

Dans uniapp, la mise en cache des itinéraires est désactivée par défaut. Par conséquent, si vous devez utiliser la mise en cache des routes, vous devez configurer uniapp en conséquence.

Dans le fichier pages.json, nous pouvons utiliser l'attribut "keepAlive" pour définir si une page doit être mise en cache. Les valeurs de cet attribut sont true et false signifie que la mise en cache est requise, false signifie qu'aucune mise en cache n'est requise.

Exemple :

{
  "pages": [
    {
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "首页"
      },
      "keepAlive": true
    },
    {
      "path": "pages/my/my",
      "style": {
        "navigationBarTitleText": "我的"
      },
      "keepAlive": false
    }
  ]
}

Dans l'exemple, "keepAlive" : true indique que la "page d'accueil" doit être mise en cache, tandis que "keepAlive" : false indique qu'aucune mise en cache n'est requise.

Il est à noter que certaines pages ne sont pas adaptées à la mise en cache, comme les pages avec des scénarios interactifs tels que des zones de saisie et des comptes à rebours. Parce que ces pages sont sujettes à des problèmes de réaffichage des données ou de l'état précédemment conservés. Pour ces pages, nous devrions désactiver la mise en cache des routes.

3. Cycle de vie du cache de route

Dans le cycle de vie du cache de route, les trois étapes suivantes doivent principalement être traitées :

1.activé

Lorsque la page est ouverte et affichée, la vie "activée" de la page sera déclenchée. Dans cette fonction hook, nous pouvons généralement effectuer certaines opérations d'initialisation sur la page.

2.deactivated

Lorsque la page est quittée et masquée, la fonction hook de cycle de vie "désactivée" de la page sera déclenchée. Dans cette fonction hook, nous pouvons stocker et nettoyer certaines données de page. Ces données stockées peuvent être réutilisées lorsque la page est renvoyée.

3.destroyed

Lorsque la page est détruite, la fonction hook de cycle de vie "détruite" de la page sera déclenchée. Dans cette fonction de hook, nous pouvons généralement effectuer certaines opérations de nettoyage, telles que l'annulation des abonnements aux données de page, l'effacement des minuteries, etc.

4. Conclusion

La mise en cache des itinéraires peut améliorer efficacement l'expérience utilisateur des applications Uniapp. En utilisant l'attribut "keepAlive", nous pouvons configurer les pages qui doivent être mises en cache. Dans le même temps, pendant le cycle de vie de la page mise en cache, nous devons également effectuer des opérations connexes pour garantir que la page mise en cache puisse être mieux utilisée.

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!