Comment optimiser le mini programme WeChat ? Partage de connaissances en optimisation que vous ne connaissez peut-être pas

Comment optimiser le mini programme WeChat ? Cet article résume certaines connaissances en optimisation que les débutants peuvent ne pas comprendre dans les petits programmes et les partage avec tout le monde. J'espère qu'il sera utile à tout le monde !

Le composant navigateur est préféré pour les sauts de page

L'applet fournit deux méthodes de routage de page :
a Composant navigateur
b API de routage, telle que naviguer vers / redirectTo / switchTab / naviguerBack / reLaunch.

Lorsque le robot d'exploration WeChat explore le contenu du mini-programme, l'utilisation du composant navigateur aidera le robot à explorer le contenu au niveau de la page. Si votre mini-programme accorde plus d'attention à l'optimisation de la recherche, il est recommandé de donner la priorité à l'utilisation du navigateur. composant pour passer d'une page à l'autre [Recommandations d'apprentissage associées : petit tutoriel de développement de programme】

Pour plus de détails, veuillez vous référer au document "Guide d'optimisation de la recherche de mini-programmes"

https://developers.weixin.qq.com/miniprogram /dev/framework/search/seo.html

entre les pages Pour sauter, utiliser this.pageRouter.navigateTo au lieu de wx.navigateTo est un meilleur choix

// index/index.js

Page({
  wxNavigate: function () {
    wx.navigateTo({
      url: './new-page'
    })
  },
  routerNavigate: function () {
    this.pageRouter.navigateTo({
      url: './new-page'
    })
  }
})

Supposons que le code js de l'index/index de la page soit le même montré ci-dessus. Si vous avez accédé à un nouveau pack/index de page à ce moment-là, puis appelé la méthode wxNavigate ci-dessus, le nouveau chemin de page à parcourir sera pack/new-page et si la méthode routerNavigate est appelée, la nouvelle page à parcourir ; vers Le chemin est toujours index/nouvelle page.

En d'autres termes, l'objet routeur obtenu par this.pageRouter a une meilleure stabilité du chemin de base. (Un exemple courant est que lorsque les utilisateurs cliquent sur un bouton pour passer à la page suivante, une page peut parfois être ouverte à plusieurs reprises en raison d'un décalage et de clics continus. L'utilisation de l'appel d'objet routeur de page peut éviter cette situation.)

Pour plus de détails, voir " Page Router Object》

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Router.html

Composant de longue liste de mini-programme

Quand on parle d'optimisation des performances, il sera toujours être mentionné Comment optimiser le rendu des données de contenu de longue liste. L'idée principale de la solution est de restituer uniquement les données affichées à l'écran. L'implémentation de base est d'écouter l'événement de défilement et de recalculer les données qui doivent être affichées. rendu. Laissez un div vide pour les données qui n’ont pas besoin d’être restituées.

Le mini-programme fournit officiellement un composant étendu spécifiquement pour le rendu de scénarios de données de longue liste. Pour plus de détails, voir « recycle-view » :

https://developers.weixin.qq.com/miniprogram/dev/extended/component. -plus/recycle-view.html

Animation basée sur le défilement

Changer continuellement la progression de l'animation en fonction de la position du défilement est un scénario relativement courant. Ce type d'animation peut donner aux gens l'impression que l'interaction de l'interface est très cohérente. et naturel, et l'expérience est meilleure, comme indiqué ci-dessous :

L'applet WeChat ajoute spécifiquement des paramètres ScrollTimeline à l'API d'animation pour ce type de scène d'animation. Pour plus de détails, voir : "ScrollTimeline":

https://. Developers.weixin.qq .com/miniprogram/dev/framework/view/animation.html

N'écoutez plus les événements défilants manuellement

De plus, le document ci-dessus mentionné que si vous en avez besoin implémenter davantage Les animations avancées peuvent être encapsulées sous la forme de composants personnalisés, car les composants personnalisés peuvent implémenter une actualisation partielle sans affecter les performances globales de la page.

Initialiser le cache de rendu

L'initialisation de la page de l'applet est divisée en deux parties : l'initialisation de la couche logique et l'initialisation de la couche de vue. L'activation du cache de rendu initial permet à la couche d'affichage d'afficher directement à l'avance le résultat du rendu des données initiales de la page à l'utilisateur sans attendre l'initialisation de la couche logique. Cela peut rendre la page visible à l'utilisateur beaucoup plus tôt (réduire le blanc). temps de chargement de l'écran)

Grâce au cache de rendu initial, vous pouvez :

• Afficher rapidement les parties de la page qui ne changeront jamais, comme la barre de navigation

• Pré-afficher une page squelette pour améliorer l'utilisateur ; expérience ;

• Affichez des conseils de chargement personnalisés 

•  Affichez des annonces à l'avance, et bien plus encore.

Voir le document "Cache d'initialisation" pour plus de détails

https://developers.weixin.qq.com/miniprogram/dev/framework/view/initial-rendering-cache.html

Pour plus de programmation- connaissances connexes, veuillez visiter :

Vidéos de programmation ! !

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!