Bringen Sie Ihnen Schritt für Schritt bei, wie Sie ein laufendes WeChat-Miniprogramm entwickeln.

1. Vorbereitung

1. Um ein Mini-Programmkonto zu registrieren, müssen Sie eine E-Mail-Adresse verwenden, die kein öffentliches Konto registriert hat.

2. Der Registrierungsprozess erfordert viele Zertifizierungen, die relativ umständlich sind. Wenn Sie vorerst nur entwickeln und testen, müssen Sie sie nur ausfüllen Die Geschäftslizenznummer Es ist nicht erforderlich, die WeChat-Zertifizierung abzuschließen.

3. Melden Sie sich nach der Registrierung des Kontos an, klicken Sie in der Liste links auf der Hauptseite auf „Einstellungen“ und wählen Sie dann auf der Einstellungsseite „Entwicklungseinstellungen“ aus, um die App-ID anzuzeigen, die für die Anmeldung verwendet wird das Entwicklungstool.

Hauptseite

Einstellungsseite

2. Entwicklungstools

Sie können Entwicklungstools von der offiziellen Website herunterladen

Entwicklungstool-Bearbeitungsseite

3 Starten Sie das Projekt

Öffnen Sie die Entwicklertools, wählen Sie die Option „Miniprogramm“ und gelangen Sie zur Seite „Projekt hinzufügen“

Zu diesem Zeitpunkt wird die AppId auf der vorherigen Einstellungsseite verwendet .

Wenn es sich bei der Datei im Projektverzeichnis um einen leeren Ordner handelt, werden Sie gefragt, ob Sie ein Schnellstartprojekt erstellen möchten.

Wählen Sie „Ja“. Die Entwicklertools helfen uns dabei, eine einfache Demo im Entwicklungsverzeichnis zu erstellen.

Diese Demo enthält einen vollständigen allgemeinen Rahmen des Miniprogramms.

1. Framework

Schauen Sie sich zuerst das nächste Verzeichnis an:

app.js: Applet-Logik, Lebenszyklus, globale Variablen

app.json: öffentliche Einstellungen des Miniprogramms, Farbe der Navigationsleiste usw., können nicht kommentiert werden

app.wxss: öffentlicher Stil des Miniprogramms, CSS-ähnlich.

Zusammensetzung der Miniprogrammseite:

Seitenzusammensetzung

Jede Miniprogrammseite besteht aus vier verschiedenen Suffixen mit demselben Namen unter dem Gleicher Pfad Die Zusammensetzung von Dateien, wie zum Beispiel: index.js, index.wxml, index.wxss, index.json.

Der [Pfad + Seitenname] jeder Seite im WeChat-Applet muss in Seiten von app.json geschrieben werden, und die erste Seite in Seiten ist die Startseite des Miniprogramms.

Pfad

Diese vier Dateien können entsprechend ihrer Funktion in drei Teile unterteilt werden:

Konfiguration: JSON-Datei

Logikebene: js-Datei

Ansichtsebene: wxss.wxml-Datei

Auf iOS läuft der Javascript-Code des Miniprogramms in JavaScriptCore

Auf Android die Mini Programm Der Javascript-Code wird durch den X5-Kernel analysiert

Auf dem Entwicklungstool wird der Javascript-Code des Miniprogramms in nwjs (Chrome-Kernel) ausgeführt. Daher unterscheiden sich die Auswirkungen auf die Entwicklungstools von den tatsächlichen Auswirkungen.

2. Komponenten

WeChat bietet viele Komponenten, die hauptsächlich in acht Typen unterteilt sind:

Container anzeigen,

Grundlegender Inhalt,

Formularkomponente,

Bedienungsfeedback,

Navigation,

Medienkomponente,

Karte,

Leinwand

Enthält häufig verwendete Komponenten wie Ansicht, Bildlaufansicht, Schaltfläche, Formular usw. Außerdem werden Karte und Leinwand bereitgestellt.

Komponenten gehören hauptsächlich zur Ansichtsebene und werden strukturell über WXML angeordnet, ähnlich wie HTML. Ändern Sie Stile über WXSS, ähnlich wie CSS.

Beispiel für die Komponentenverwendungssyntax:

Dies ist eine durch einen normalen Ansichtsstil modifizierte Ansicht. Weitere Komponenten und zugehörige Verwendungsmethoden finden Sie in der offiziellen Dokumentation – Komponenten

3. API

Netzwerk

Medien

Daten

Standort

Gerät

Schnittstelle

Entwicklungsschnittstelle

Um Netzwerkanfragen zu verwenden, müssen Sie sich zunächst beim Miniprogrammkonto auf der öffentlichen Plattform anmelden. Legen Sie auf der Einstellungsseite den Domänennamen fest, auf den zugegriffen werden darf. Netzwerkanfragen umfassen normales http Anfragen, unterstützende Uploads, Downloads und Sockets. Erfüllt grundsätzlich die Netzwerkanforderungen, die wir in der Entwicklung benötigen.

Diese APIs gehören zur logischen Ebene und sind in js-Dateien geschrieben

Verwendungsbeispiele:

wx.getLocation({ Typ: 'wgs84', Erfolg: Funktion(. res) { var width = res.latitude var longitude = res.longitude var speed = res.speed var precision = res.accuracy }}) Sie können zur offiziellen Dokumentations-API gehen, um die Verwendung anderer APIs anzuzeigen.

4. Kompilieren und ausführen

Sie können den Effekt auf dem Simulator sehen, aber er unterscheidet sich von der untersten Ebene des Vorgangs etwas anders als auf einem Mobiltelefon

2. Echte Maschine

Wählen Sie in der Optionsleiste links das Element aus und klicken Sie auf Vorschau Der Code wird generiert. Scannen Sie ihn einfach mit dem WeChat-Konto und Sie können den tatsächlichen Effekt auf der realen Maschine sehen.

Übung – Ausführen des Applets.

Screenshot einer echten Maschine (läuft auf iPhone7, WeChat-Version: 6.3.30):

home.jpeg

run.jpeg

Funktion: Kann Kilometerstand und Zeit berechnen , Erhalten Sie den Laufpfad in Echtzeit (etwas grob)

Idee: Hauptsächlich unter Verwendung der Standort-API wx.getLocation() des WeChat-Applets und der Kartenkomponente Karte.

Implementieren Sie zunächst einen Timer für die Zeitmessung, erhalten Sie die Koordinaten über wx.getLocation(), speichern Sie die erhaltenen Koordinaten in einem Array, ermitteln Sie den Kilometerstand über die Koordinaten in regelmäßigen Abständen und akkumulieren Sie ihn, um den Gesamtkilometerstand zu erhalten. Gleichzeitig gibt es Probleme beim Verbinden von Linien durch Koordinatenpunkte:

1 Da es derzeit keine Möglichkeit gibt, eine Linie auf der Karte zu zeichnen, habe ich die Methode übernommen, einen kleinen roten Punkt in die Karte einzufügen. Die Methode zeigt den ungefähren Laufweg an, der grob ist.

2. Obwohl in der API der Marskoordinatentyp gcj02 verwendet wird, ähneln die erhaltenen Koordinaten den internationalen Koordinaten und es gibt immer noch Abweichungen.

Kerncode:

Ich habe den gesamten Code auf github-weChatApp-Run gestellt. Sie können ihn herunterladen, um einen Blick darauf zu werfen, oder ihn zuerst markieren. Ich werde in Zukunft einige Optimierungsupdates vornehmen. Jetzt ist es nur noch eine Lerndemo, jeder kommuniziert und lernt, und die eigentliche Anwendung muss noch weiter optimiert werden.

WXML-Dateilayoutcode und JS-Dateilogikcode

Für eine praktischere WeChat-Applet-Entwicklung zeigen wir Ihnen Schritt für Schritt, wie Sie laufende WeChat-Applets entwickeln. Beachten Sie bitte die folgenden Artikel die chinesische PHP-Website!