So bewerben Sie sich für das WeChat Mini-Programm. Tutorial zum Erstellen eines WeChat Mini-Programms von Grund auf

Nach fast einem Jahr des Wartens wurde das WeChat-Miniprogramm endlich offiziell veröffentlicht. Für Entwickler können Sie sich in Zukunft für die Erstellung Ihres eigenen Miniprogramms bewerben. Wie bewerbe ich mich für das WeChat-Miniprogramm? Im Folgenden wird der Herausgeber von „Computer Pepsi Network“ ausführlich ein praktisches Entwicklungs-Tutorial zum Erstellen eines WeChat-Applets von Grund auf vorstellen. Ich hoffe, dass die Schritte für frühe Entwickler hilfreich sind.

Vorbereitung vor der Bewerbung für das WeChat Mini-Programm:

Zuerst müssen Sie ein Mini-Programm-Konto registrieren. Sie müssen sich mit einer E-Mail-Adresse registrieren, die nicht für ein öffentliches Konto registriert ist. Der Registrierungsprozess erfordert viele Zertifizierungen, was ziemlich umständlich ist. Wenn Sie das Wasser vorerst nur testen und keine Veröffentlichungspläne haben, müssen Sie nur die grundlegenden Informationen angeben und müssen keine WeChat-Authentifizierung durchführen.

Danach können Sie sich mit dem registrierten Konto auf der öffentlichen Plattform anmelden.

Klicken Sie dann in der Liste auf der linken Seite der Hauptseite auf „Einstellungen“ und wählen Sie dann auf der Einstellungsseite „Entwicklungseinstellungen“ aus. Daraufhin wird die AppID angezeigt. Mit der AppID können Sie sich im Entwicklungstool registrieren und die erweiterten Funktionen des Entwicklungstools nutzen. Sie können Entwicklungstools von der offiziellen Website herunterladen.

Projekt starten:

Öffnen Sie die Entwicklertools, wählen Sie die Option „Miniprogramm“ und klicken Sie dann direkt auf die Schaltfläche „Projekt hinzufügen“. In diesem Schritt können wir die AppID eingeben, die wir gerade bei der Registrierung verwendet haben.

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 hat den allgemeinen Rahmen eines kompletten Miniprogramms.

1. Framework

Werfen wir zunächst einen Blick auf die Verzeichnisse, die in der offiziell bereitgestellten Demo enthalten sind:

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

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

app.wxss: Miniprogramm im öffentlichen Stil, ähnlich wie CSS.

Die Struktur der Miniprogrammseite ähnelt dieser:

Jede Miniprogrammseite besteht aus vier verschiedenen Suffixdateien mit demselben Namen im selben Pfad, wie zum Beispiel: index.js, index .wxml, index .wxss, index.json

Der Pfad und der Seitendateiname jeder Seite im WeChat-Applet müssen in die Seiten von app.json geschrieben werden, und die erste Seite im Seitenarray ist die Applet-Startseite.

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

Konfiguration: JSON-Datei

Logische Ebene: JS-Datei

Ansichtsebene: wxss.wxml-Datei

Unter iOS läuft der Logikcode des Applets in JavaScriptCore, während diese Aufgabe unter Android vom X5-Kernel erledigt wird.

Auf den Entwicklungstools läuft der JavaScript-Code des Miniprogramms in NW.js (Chrome-Kernel). Dies führt auch zu Unterschieden zwischen den Auswirkungen auf Entwicklungstools und den tatsächlichen Auswirkungen.

2. Komponenten

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

Dazu gehören häufig verwendete Komponenten wie Ansicht, Scroll-Ansicht, Schaltfläche, Formular usw. Die Komponente stellt auch eine Karte bereit. Die Komponente „mapcanvas“ gehört hauptsächlich zur Ansichtsebene und verwendet WXML für das strukturelle Layout, ähnlich wie HTML. Stile werden über WXSS definiert und geändert und ihre Syntax und Verwendung ähneln CSS.

Beispiel für die Komponentenverwendungssyntax:

<><>

3. Netzwerk

Medien

Daten

Standort

Gerät

Schnittstelle

Entwicklungsschnittstelle

Die Netzwerkanforderungsschnittstelle enthält normale HTTPS-Anfragen und unterstützt Hochladen, Herunterladen und Socket, die im Wesentlichen die Netzwerkanforderungen erfüllen, die wir in der Entwicklung benötigen.

Diese APIs gehören zur Logikschicht und sind in JS-Logikdateien geschrieben.

Verwendungsbeispiel:

wx.getLocation({ type: 'wgs84', success: function(res) { var width = res.latitude var longitude = res.longitude var speed = res. speed var precision = res.accuracy } })

Sie können zur offiziellen Dokumentation – API gehen, um zu sehen, wie Sie andere APIs verwenden.

Kompilieren und ausführen

1. Simulator-Debugging

Wir können den Simulator verwenden, um die Wirkung des Miniprogramms in den von WeChat bereitgestellten Entwicklertools anzuzeigen.

Wir haben bereits erwähnt, dass das zugrunde liegende Betriebssystem des Miniprogramms ein anderes ist, was auch dazu führt, dass die Wirkung auf dem Simulator etwas anders ist als auf dem Mobiltelefon.

2. Echtes Maschinen-Debugging

Wählen Sie in der Optionsleiste links das Element aus und klicken Sie dann auf Vorschau. Ein QR-Code wird mit dem WeChat-Konto generiert Sie können es auf der realen Maschine debuggen. Sehen Sie sich die tatsächliche Auswirkung auf der Maschine an.

Eigentlicher Kampf: laufendes Applet

Realer Maschinenlauf-Screenshot (läuft auf iPhone 7, WeChat-Version: 6.3.30):

Zuerst einen Timer für die Zeitmessung implementieren und bestehen wx.getLocation ruft die Koordinaten ab, speichert die erhaltenen Koordinaten in einem Array, ermittelt den Kilometerstand durch die Koordinaten in Intervallen, akkumuliert den Gesamtkilometerstand und verbindet auch die Koordinatenpunkte. Probleme:

Da es derzeit keine Möglichkeit gibt, eine Verbindungslinie auf der Karte zu zeichnen, habe ich die Methode übernommen, einen kleinen roten Punkt in die Karte einzufügen, um den ungefähren Laufweg anzuzeigen, der relativ grob ist 🎜>

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

Ich habe den gesamten Code auf GitHub gestellt. Sie können ihn herunterladen, um ihn sich anzusehen, 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 optimiert werden.

Weitere Artikel darüber, wie Sie sich für ein WeChat-Miniprogramm bewerben und wie Sie ein WeChat-Miniprogramm von Grund auf erstellen, finden Sie auf der chinesischen PHP-Website!