Das WeChat Mini-Programm ist offiziell gestartet und an vielen Orten wird über den Bildschirm gewischt. Wir können sehen, dass viele Leute das WeChat Mini-Programm verwenden, aber viele Benutzer wissen nicht, wie man das WeChat Mini-Programm entwickelt. Im Folgenden finden Sie ein praktisches Tutorial zur WeChat-Miniprogrammentwicklung, das Ihnen Schritt für Schritt zeigt, wie Sie ein laufendes WeChat-Miniprogramm entwickeln. Lassen Sie uns gemeinsam etwas darüber lernen.
1. Vorbereitungsarbeiten
1 klein Um ein Programmkonto zu registrieren, müssen Sie eine E-Mail-Adresse verwenden, die nicht für ein öffentliches Konto registriert wurde.
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
Bearbeitungsseite für Entwicklungstools
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 auf der vorherigen Seite festgelegte AppId 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: Mini-Programmlogik , Lebenszyklus, globale Variablen
app.json: Öffentliche Einstellungen des Miniprogramms, Farbe der Navigationsleiste usw. können nicht mit Anmerkungen versehen werden
app.wxss: Öffentlicher Stil des Miniprogramms, CSS-ähnlich.
Zusammensetzung der Miniprogrammseite:
Seitenzusammenstellung
Jede Miniprogrammseite wird aus demselben Pfad erstellt Die Zusammensetzung aus vier verschiedenen Suffixdateien mit demselben Namen, 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
Unter iOS läuft der Javascript-Code des Miniprogramms in JavaScriptCore
Auf Android wird der Javascript-Code des Miniprogramms durch den X5-Kernel geparst
Auf dem Entwicklungstool läuft der Javascript-Code des Miniprogramms in nwjs (Chrome-Kernel). Daher unterscheiden sich die Auswirkungen auf die Entwicklungstools von den tatsächlichen Auswirkungen.
2. Komponenten
WeChat bietet viele Komponenten, hauptsächlich unterteilt in acht Typen:
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.
Die Komponente gehört hauptsächlich zur Ansichtsebene und verwendet WXML für das Strukturlayout, ä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 nutzen zu können, müssen Sie sich zunächst beim Mini-Programmkonto auf der öffentlichen Plattform anmelden. Legen Sie auf der Einstellungsseite den zulässigen Domainnamen fest Zu den Netzwerkanfragen gehören normale HTTP-Anfragen und Support-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(
{
type: 'wgs84',
success: function(res)
{
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
}
}
)Nach dem Login kopieren
Sie können zur offiziellen Dokumentations-API gehen, um die Verwendung von zu sehen andere APIs.
4. Kompilieren und ausführen
1. Sie können den Effekt auf dem Simulator sehen, und das ist er auch bis zum Laufen Die unterste Ebene ist anders und der Effekt ist etwas anders als beim Laufen auf einem Mobiltelefon
Echte Maschine
Wählen Sie in der Optionsleiste links „Projekt“ aus und klicken Sie dann auf „Vorschau“. Scannen Sie ihn mit der WeChat-ID des Administrators und Sie können den tatsächlichen Effekt auf einer echten Maschine sehen
Übung – Applet ausführen. 
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 des kleinen Einfügens verwendet Rote Punkte auf der Karte zeigen den ungefähren Laufweg an, der relativ 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 mehr in der Zukunft Optimierte Updates. Jetzt ist es nur noch eine Lerndemo, jeder kommuniziert und lernt, und die eigentliche Anwendung muss noch weiter optimiert werden.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
WeChat-Miniprogramm
Analyse des Amap SDK
Das obige ist der detaillierte Inhalt vonEntwicklung des WeChat Mini-Programms: Ausführen des WeChat Mini-Programms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
