Wie entwickeln Einsteiger ihr erstes WeChat-Miniprogramm?

Scannen Sie nach der Installation des „WeChat Web Developer Tools“ den QR-Code auf dem WeChat des Entwicklers, um einzutreten, wie im Bild gezeigt.

Klicken Sie auf „Projekt hinzufügen“, geben Sie die zuvor erhaltene AppID ein (keine AppID kann ignoriert werden), geben Sie den Projektnamen „Hallo WXapplet“ ein. Wählen Sie Der lokale Ordner dient als Projektverzeichnis.

Nachdem Sie „Schnellstartprojekt im aktuellen Verzeichnis erstellen“ aktiviert haben, klicken Sie auf die Schaltfläche „Projekt hinzufügen“ und unser erstes WeChat-Applet-Projekt – Hallo WXapplet – wurde erfolgreich erstellt.

Bedienung und Nutzung von Entwicklertools

Die Entwicklertool-Oberfläche ist grundsätzlich in vier Hauptbereiche unterteilt : Bereich 1 „Top-Menü“, Bereich 2 „Navigationsmenü“, Bereich 3 „VerzeichnisdateiWie entwickeln Einsteiger ihr erstes WeChat-Miniprogramm?Simulationslauf“, Bereich 4 „Entwicklung bearbeitenWie entwickeln Einsteiger ihr erstes WeChat-Miniprogramm?Debuggen“, Bereich 1 und Bereich 2 sind behoben. Die Bereiche 3 und 4 unterscheiden sich je nach den verschiedenen Funktionen oder Modi, die im Navigationsmenübereich ausgewählt wurden.

Bereich 1 „Hauptmenü“, „Einstellungen“ dient zur Konfiguration, wie die Entwicklungsmaschine beim Ausführen des Programms eine Verbindung zum Netzwerk herstellt. „Aktion“ bezieht sich auf Vorgänge wie „Aktualisieren“, „Zurück“ und „Vorwärts“, die hauptsächlich beim Debuggen von Webseiten oder Schnittstellen verwendet werden. „Hilfe“ sind Informationen wie die Version und die Urheberrechtserklärung der Webentwicklertools. Erleben Sie es selbstWeChat Mini-Programm, Bewerten Sie das WeChat Mini-Programm.

Bereich 2 „Navigationsmenü“ ist ein Funktionsbereich, der häufig von Entwicklern verwendet wird. Insbesondere die Funktionen „Bearbeiten“ und „Debuggen“ werden die wichtigsten Funktionen sein, die von Entwicklern genutzt werden.

Bearbeitungsfunktion

Klicken Sie auf die Schaltfläche „Bearbeiten“ und die im Bild gezeigte Benutzeroberfläche wird angezeigt.

Die ursprünglichen 4 Bereiche werden zum Dateilistenbereich des Projekts und zum Codebearbeitungsbereich für die entsprechenden Dateien, den wir auch Code-Editor nennen.

Der Code-Editor unterstützt jetzt die Bearbeitung von 4 Dateitypen: WXML-, WXSS-, JS- und JSON-Dateien. Der Code-Editor bietet außerdem eine relativ vollständige automatische Vervollständigungsfunktion, was Entwicklern erheblich erleichtert.

Der Code-Editor unterstützt auch Tastenkombinationen. Einige häufig verwendete Tastenkombinationen sind wie folgt:

Strg+Ende: Verschieben zum Ende der Datei Strg+Pos1: Zum Anfang der Datei wechseln Strg+i: Aktuelle Zeile auswählen Umschalt+Ende: Zum Zeilenende wechseln Umschalt+Pos1: Zum Zeilenanfang wechseln Strg+Umschalt+L: Alles auswählen Übereinstimmungen Strg+D: Übereinstimmungen auswählen Strg+U: Cursor-Rollback Umschalt+Alt+F: Codeformatierung Alt+Hoch,Alt+Runter: Eine Zeile nach oben und unten verschieben Umschalt+Alt+Hoch, Umschalt+Alt+Runter: Eine Zeile nach oben und unten kopieren Strg+Umschalt+Eingabetaste: Über der aktuellen Zeile eine Zeile einfügen

Debugging-Funktion

Das Debuggen Die Funktion ist das Kernwerkzeug für Entwickler, um die Implementierung von Codeergebnissen zu erkennen und Probleme zu beheben, wie in der Abbildung dargestellt.

Bereich 4 wird nun zum Debugging-Tool und Ausgabebereich. Der Simulator simuliert die Logik und Betriebsleistung des WeChat-Applet-Projekts auf dem Client originalgetreu und die meisten Funktionen und API-Aufrufe können auf dem Simulator korrekt gerendert werden.

Oben im Debugging-Tools- und Ausgabebereich befindet sich eine Reihe von Menüs, nämlich: Konsole, Quellen, Netzwerk, Speicher, AppData, Wxml, Senser. Der erweiterte Menüpunkt ganz rechts dient der Anpassung und Steuerung Entwicklungstool-Schaltfläche „┆“ .

Konsolenseite: Konsoleninformationsseite, die zwei Funktionen hat:

1) Entwickler können hier direkt Code eingeben und debuggen.

2) Zeigt die Fehlerausgabe des Applets an.

Quellenseite: Informationsseite zum Debuggen von Quelldateien, auf der die Skriptdateien des aktuellen Projekts angezeigt werden.

Hinweis: Da das Miniprogramm-Framework Skriptdateien kompiliert, handelt es sich bei den Dateien, die wir auf der Quelldateiseite sehen, tatsächlich um die Skriptdatei danach Verarbeitung. Der Code, den wir schreiben, ist also in der Definitionsfunktion enthalten. Für den Seitencode schließt die Anforderungsfunktion am Ende der Verpackungsskriptdatei die aktive Aufrufaktion ab. Netzwerkseite: Netzwerk-Debugging-Informationsseite, die zum Beobachten und Anzeigen netzwerkbezogener Details wie den Anforderungsinformationen und dem Socket-Status jedes Elements verwendet wird.

Speicherseite: Datenspeicher-Informationsseite, die zum Anzeigen der von verwendeten Speicher-API-Schnittstelle (wx.setStorage oder wx.setStorageSync) verwendet wird das aktuelle Projekt der Datenspeicherung. Geben Sie beispielsweise wx.setStorage({key:name,data:King}) in die Konsole ein, und Sie können auf der Seite „Speicher“ sehen, dass wir Schlüsselwertdaten gespeichert haben.

Speicherseite: Datenspeicher-Informationsseite, die zur Anzeige des Datenspeicherstatus des aktuellen Projekts mithilfe der Speicher-API-Schnittstelle (wx.setStorage oder wx.setStorageSync) verwendet wird. Geben Sie beispielsweise wx.setStorage({key:name,data:King}) in die Konsole ein, und Sie können auf der Seite „Speicher“ sehen, dass wir Schlüsselwertdaten gespeichert haben.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Wie man mit dem Problem des globalen Variablen-Cachings in der WeChat-Applet-Entwicklung umgeht

Wie man damit umgeht mit der Entwicklung des WeChat-Applets WeChat-Zahlung implementieren

Das obige ist der detaillierte Inhalt vonWie entwickeln Einsteiger ihr erstes WeChat-Miniprogramm?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!