Pratique du mini-programme : mise en œuvre d'une fonction simple de suivi du mini-programme

Cet article vous présente un petit programme en pratique et vous apprend étape par étape comment mettre en œuvre une fonction simple de suivi d'un petit programme. J'espère qu'il sera utile à tout le monde !

Avant cela, une fois que notre mini-programme signalait une erreur, tout reposait sur les commentaires des captures d'écran des utilisateurs, et les développeurs le reproduisaient petit à petit.

J'y penserai plus tard, existe-t-il quelque chose qui puisse enregistrer les comportement ? Si le programme signale une erreur, téléchargera-t-il automatiquement l'enregistrement d'opération de l'utilisateur sur le serveur et informera-t-il le développeur de la gérer ?

J'ai découvert plus tard que cela s'appelle la surveillance frontale.

Bien sûr, cet article parle des plus simples, car je ne sais pas comment faire et je n'ai pas encore participé au développement de vrais projets. .

Quelles sont les fonctions de ce petit programme de surveillance ?

1) Enregistrez l'heure à laquelle l'utilisateur entre et sort de la page
2) Surveillez tous les événements de clic
3) Enregistrez la trajectoire de fonctionnement approximative de l'utilisateur.
4) Si l'appel de la fonction cloud échoue, il sera automatiquement signalé à la base de données pour rappeler au développeur de le gérer.

Réaliser l'enregistrement des utilisateurs entrant et sortant de la page

Nous savons tous que le mini programme a plusieurs fonctions de cycle de vie Parmi elles, j'ai choisi d'enregistrer dans les trois cycles de vie de onShow, onHide et unload.

La manière la plus stupide est d'enregistrer directement l'affichage de la page et de masquer/décharger le temps dans la fonction de cycle de vie de chaque page, mais c'est trop répétitif,

On peut donc ajouter une autre couche à ces fonctions de cycle de vie (C'est ce qu'on appelle la motif décorateur dans le modèle de conception Javascript)

Une nouvelle question revient, comment ajouter une autre couche à tous les événements ?

Regardons d'abord le fichier index.js d'une page

En passant un objet à la méthode Page, Cet objet contient tous les événements (clic, slide, animation CSS3, etc.) et le cycle de vie.

Nous pouvons donc personnaliser une méthode pour remplacer la méthode Page, Dans cette méthode, récupérez l’objet transmis et modifiez-le. Enfin, n'oubliez pas d'exécuter à nouveau la Page(Obj) d'origine. Regardez la structure du code

Le code est en fait très simple. Une fois la fonction appelée, le cache est lu Si les données existent, les informations de la page actuelle sont ajoutées à l'élément du tableau. Si la longueur du tableau est supérieure à 10, supprimez le premier élément et conservez la longueur du tableau à 11.

La raison pour laquelle une minuterie est utilisée est que parfois les dernières données ne peuvent pas être lues sans ajouter une minuterie pendant le test. Récupérez les anciennes données, modifiez-les, attribuez-les et enfin réinitialisez le cache (car lorsque la fonction onshow est exécutée, la fonction onhide de la page précédente risque de ne pas être terminée, et cette fonction modifiera le cache, donc la fonction onshow get n'est pas le dernier cache, ce qui entraîne une perte d'informations). modèle de publication-abonnement. Allez-y, mais c'est trop gênant.

2) Ajoutez une autre couche à tous les événements de la page Lorsque l'événement est déclenché, il y aura un paramètre e, jugez simplement e.type.

Regardez le code

Enfin, renvoyez l'appel à la fonction d'origine, Ensuite, jetez un œil à la fonction replaceOld. Ce qu'elle implémente est d'envelopper l'événement d'origine (mode décorateur)

Exécutez la méthode replace pour chaque paire de fonctions dans la page.

A quoi ça sert ?

Nous pouvons voir que cette fonction enveloppe la méthode d'origine. La méthode spécifique d'empaquetage dépend de la fonction de remplacement transmise.

Cette fonction renvoie finalement l'exécution de la fonction d'origine, donc le contenu du package C'est le jugement au sein du corps de la fonction s'il s'agit d'un événement de clic. Si oui, enregistrez simplement les données.

Voir les résultats en cache :

Si l'appel de la fonction cloud échoue, il sera automatiquement signalé à la base de données pour rappeler au développeur de le gérer.

Utilisez Object.defineProperty() pour détourner l'appel de la fonction cloud, enveloppez une couche supplémentaire, puis renvoyez l'appel à la fonction cloud

Mais il y a un point à noter ici. Il existe deux façons d'appeler la fonction cloud,

.

1) Une fonction de rappel est transmise et le résultat est obtenu dans la fonction de rappel.

2) S'il n'y a pas de fonction de rappel transmise, wait est utilisé pour attendre le résultat de l'appel, et nous devons capturer l'erreur de l'appel de la fonction cloud,

nous obtenons donc le résultat directement pendant le détournement, puis revenons une promesse.

Il est en fait très simple de notifier automatiquement les développeurs et de le traiter en appelant le modèle de message fourni par WeChat dans la fonction cloud.

Regardez les résultats mis en cache

La structure est peut-être un peu brouillonne, après tout, c'est la première fois que je l'écris et elle n'a pas encore été appliquée.

【Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes】

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!