Verstehen Sie die verborgenen Geheimnisse von Miniprogrammen

HeuteTutorial zur Entwicklung von WeChat-Miniprogrammen stellt Ihnen die spurlosen Einbettungspunkte von Miniprogrammen vor.

Hintergrund

Seit der Veröffentlichung des WeChat-Miniprogramms hat es sich von einer kleinen und sofort einsatzbereiten Positionierung zu einer mobilen Anwendung mit komplexen Funktionen und vollständigen Diensten gewandelt. 🔜 finanzielle Verluste.

Um Benutzerforschung durchführen zu können, müssen wir außerdem verstehen, wie Benutzer unser Miniprogramm verwenden, z. B. Routing-Timing, Click-Stream usw.

Für alle oben genannten Punkte sind vollständige und verfügbare Protokolle erforderlich, um Produktionsprobleme zu erkennen und zu lokalisieren und das Benutzerverhalten zu verfolgen.

Protokolltypen

Beim Durchsehen der API-Dokumentation gibt es drei Möglichkeiten, Protokolle im Miniprogramm zu drucken:

Konsolenprotokoll (Konsole): Wird zum Debuggen während der Entwicklung und beim Testen verwendet Phase
Echtzeitprotokoll (wx.getRealtimeLogManager): Der Beamte bietet eine gute Filterung und kann bestimmte Protokolle genau lokalisieren; mehrere Ausdrucke werden jedoch zu einem zusammengefasst Der Bericht kann bis zu 7 Tage lang aufbewahrt werden. Portal
Lokales Protokoll (wx.getLogManage): Benutzer können auf „Feedback und Beschwerden“ klicken oder auf die Feedback-Komponente auf der Seite klicken, um sie mit der Verwaltungskonsole zu synchronisieren. Portal
Erfassungsberichte und Datendesensibilisierung

Bei bestimmten Problemen müssen möglicherweise verschiedene Protokolle lokalisiert oder kombiniert werden, um das Verhalten des Benutzers gegenseitig zu bestätigen.

Wir müssen also mehrere Protokolle gleichzeitig melden, aber für einige geschäftskritische Daten ist es möglicherweise nicht geeignet, sie an ein externes System (WeChat-Server) zu melden oder sie lokal auf dem Client zu speichern Daten in der gekapselten Sammlungsberichtsfunktion.

Die Methode ist sehr einfach. Sie durchläuft das Protokollobjekt und kodiert die sensiblen Daten durch regelmäßigen Abgleich.

Das Echtzeitprotokoll nach der Desensibilisierung sieht wie folgt aus:

Sie können sich auf unser gekapseltes Protokoll-Plug-in @wxa/log beziehen

Unsichtbarer Vergrabungspunkt

Ereigniserfassung

Im Allgemeinen Front-End-Protokolle Dazu gehören mindestens: Routing-Switching-Informationen, Skriptfehlerprotokoll, Schnittstellenanforderungsdaten, Benutzerinteraktionsinformationen

Im Miniprogramm können die drei besten über die offizielle Abhörschnittstelle und die Kapselungsfunktion erfasst und gemeldet werden.

Nur Benutzerinteraktionsinformationen. Aufgrund der Dual-Thread-Architektur des Miniprogramms ist es unmöglich, Benutzerereignisse wie h5 direkt im Dokumentobjekt zu erfassen. Ereignisse können nur an die äußerste Ebene jeder WXML-Vorlage gebunden werden, um das Benutzerverhalten zu überwachen.

Aber es gibt immer noch keine Möglichkeit, Nicht-Bubble-Ereignisse (wie Catchtap) und Komponentenereignisse (wie Getuserinfo) zu erfassen.

Darüber hinaus gibt es keine Möglichkeit, alle Ereignisse zu erfassen, Komponentenereignisse werden nicht in die Luft sprudeln.

Ereignisse kapern

Können Sie auf andere Weise alle Ereignisfunktionen im Miniprogramm kapern, um eine Ereigniserfassung zu erreichen? Dürfen.

Normale Ereignisse und Komponentenereignisse in WeChat-Miniprogrammen sind beide bind

$eventoder\text{c}at\mathrm{oder}ca$h

Sie können den Komponentennamen, die ID, die Klasse und andere Informationen der Komponente kombinieren, um eine ID für die Komponente zu erstellen. Das Format lautet:

eventName*tagName#id.class(data)复制代码

Zum Beispiel:

<button id="btn" class="confirm" bindtap="submit">确认</button>复制代码

Nachdem das Ereignis gekapert und Identifikationsinformationen hinzugefügt wurden, wird die tatsächliche ID erstellt Der Ausgabecode lautet:

<button id="btn" class="confirm" 
    bindtap="beforeTag" 
    data-wxa-hijack="sumbit" 
    mark:eleId="tap*button#btn.confirm(确认)">确认</button>复制代码

Dann können Sie im Ereignisobjekt die Komponentenkennung über e.mark.eleId abrufen

Implementieren Sie die Abfangfunktion

import BindHijackPlugin from "@wxa/plugin-bind-hijack/runtime";

wxa.use(BindHijackPlugin, {
    beforeTap: function(e){
        $log('tap event', e);
    },
    afterTap: function(e){
        console.log('afterTap', e);
    },
    before: function(e){ //所有事件拦截
        console.log('before', e);
    },
    after: function(e){
        console.log('after', e);
    },
});复制代码

Automatische Ereignisse

Es ist zu beachten, dass einige Ereignisse im Miniprogramm vorhanden sind B. wenn der Komponenten-Swiper auf „Autoplay“ eingestellt ist. Nachdem dies der Fall ist, wird das Änderungsereignis automatisch im angegebenen Intervall ausgeführt. Sie müssen die Quelle beurteilen, um Nichtbenutzerverhalten auszuschließen, andernfalls wird die Hook-Funktion immer ausgeführt ausgelöst.

Implementierung

Basierend auf dem WXA-Framework implementieren wir das Abfangen aller Ereignisse in Form von Plug-Ins.

Das WXA-Applet-Framework bezieht sich auf das von Webpack basierende Plug-In-System zur Kompilierungszeit, das auf dem abgreifbaren Ereignisstrom basiert und dessen Funktionen problemlos erweitert werden kann. In Kombination mit dem wxa-Compilation-Completion-Hook und der htmlprase-Bibliothek wird die Ereignisfunktion der wxml-Datei manipuliert und die Element-ID generiert. Weitere Informationen finden Sie direkt im Quellcode unter @wxa/plugin-bind-hijack Einfache Eingabe und schnelle Entwicklung von Miniprogrammen, Lösung der Probleme bei der Entwicklung und Wiederverwendung von Code, Verbesserung der Entwicklungseffizienz und Verbesserung der Entwicklungserfahrung.

Verwandte kostenlose Lernempfehlungen:

WeChat Mini-Programmentwicklungs-Tutorial

Das obige ist der detaillierte Inhalt vonVerstehen Sie die verborgenen Geheimnisse von Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!