Vollständiger Entwicklungsentwurf des WeChat-Miniprogramms

Die von WeChat verwendete Entwicklungssprache und Dateien sind etwas ganz „Besonderes“.

MiniprogrammDie verwendeten Programmdateitypen sind grob in die folgenden Kategorien unterteilt:

①WXML (WeiXin Mark Language, WeChat Markup Language)

②WXSS (WeiXin Style Sheet, WeChat Style Sheet )

③JS (Java, der Hauptteil der Miniprogramme)

In Bezug auf die Sprache scheinen Miniprogramme eine Reihe von Standards neu definiert zu haben. Tatsächlich unterscheiden sie sich jedoch nicht wesentlich vom „Front-End-Dreierset“ – HTML, CSS und Java. 🔜

HTML und WXML: Es gibt einen großen Unterschied zwischen den beiden. Wenn Sie noch nie mit der Android-Entwicklung vertraut waren, verspüren Sie möglicherweise ein wenig Kopfschmerzen. Tatsächlich ähnelt WXML eher einer Schnittstellen-XML-Beschreibungsdatei in der Android-Entwicklung, die sich für die Erstellung von Programmschnittstellen eignet, während HTML eher für die Anzeige von Artikeln (dies hängt mit der Geschichte von HTML zusammen) und für die Erstellung von Internetseiten geeignet ist. WXSS und CSS: Es gibt fast keinen sprachlichen Unterschied zwischen den beiden und sie können direkt verwendet werden.

JS-Datei: Die JS-Datei des Miniprogramms ist fast die gleiche wie die JS, die in der Front-End-Entwicklung verwendet wird, mit der Ausnahme, dass die JS des Miniprogramms einige API-Schnittstellen von WeChat hinzufügt und einige unnötige Funktionen entfernt (z. B DOM).

In Bezug auf die Sprache sind Miniprogramme vollständig auf die Front-End-Entwicklung mit den niedrigsten Lernkosten ausgerichtet. Dies bedeutet jedoch nicht, dass alle Front-End-Entwickler nahtlos migrieren können.

Wenn Sie von der Frontend-Entwicklung auf kleine Programme umsteigen, müssen Sie auf diese beiden Punkte achten:

Die Konstruktionsideen von HTML- und WXML-Dateien sind recht unterschiedlich. Wenn Sie die Entwicklung vorher beenden, wird die Anpassung einige Zeit in Anspruch nehmen.

Obwohl das Miniprogramm Front-End-Sprache verwendet, bedeutet dies nicht, dass es weiterhin mithilfe von Front-End-Entwicklungsideen weiterentwickelt werden kann. Die Anforderungen an die Front-End-Entwicklung kleiner Programme wurden von „Erstellen von Schnittstellen“ auf „Entwickeln vollständiger Anwendungen“ erhöht. Die Front-End-Entwicklung erfordert einen Bewusstseinswandel.

Schnittstellenkonstruktion

1. Grundlegende Logik

WXML- und WXSS-Dateien sind Mini-Programmschnittstellen-Elementdeklarations- und Stilbeschreibungsdateien.

Das größte Merkmal von WXML besteht darin, dass es Schnittstellenelemente in Form von Ansichten verbindet und Informationsaktualisierungen in Echtzeit über Programmlogik (AppService) an die Ansichtsebene überträgt.

view ähnelt dem p-Element in HTML. Beim Erstellen können Ansichten auf mehreren Ebenen verschachtelt werden und beliebige visuelle Elemente können innerhalb der Ansicht platziert werden.

Es ist zu beachten, dass der Benutzer es nicht mehr sehen kann, sobald das Element über den Bildschirm hinausgeht, was sich deutlich von HTML unterscheidet.

Zum Beispiel stellen wir uns den Handybildschirm als Bühne vor und Schauspieler außerhalb der Bühne sind für das Publikum nicht zu sehen.

Das Applet verfügt über eine spezielle Ansicht zum Scrollen.

Wenn Sie möchten, dass die Benutzeroberfläche frei scrollbar ist (z. B. eine Liste usw.), können Sie die Scroll-Ansicht verwenden, ihre Größe an den gesamten Bildschirm in WXSS anpassen und Scroll-y festlegen ( nach oben und unten scrollen) oder scroll-x (nach links und rechts scrollen) ist wahr.

Applet kann DOM nicht direkt zur Steuerung von WXML-Elementen verwenden. Wenn Sie Daten aktualisieren müssen, müssen Sie die von WXML bereitgestellten Datenbindungs- und Element-Rendering-Methoden verwenden.

Zu beachten ist außerdem, dass das Rastersatzsystem des Miniprogramms das Flex-Layout verwendet, einen vom W3C im Jahr 2009 vorgeschlagenen Satzstandard.

2. Daten binden

Für ein einzelnes Feld können Entwickler die Datenbindungsmethode verwenden, um Informationen zu aktualisieren.

Zusätzlich zur Aktualisierung beim Laden können die gebundenen Daten auch in Form von Funktionen im JS-Hauptprogramm aktualisiert werden. Die Aktualisierungen können sich auch in den gebundenen Daten auf der Schnittstelle widerspiegeln.

3. Bedingtes Rendern und Listen-(Schleifen-)Rendering

Bedingtes Rendern eignet sich für Seiten mit unerwarteten Eingabeaufforderungen (z. B. Eingabeaufforderungen, wenn Listen oder Details nicht geladen werden können usw.).

Für das Rendern gelten Triggerbedingungen. Das heißt, die Seite wird gerendert, wenn die Bedingungen erfüllt sind. Andernfalls wird sie ignoriert oder ein anderer Code wird gerendert.

Die in den beiden geschweiften Klammern enthaltenen Variablen in der Beurteilungsbedingung werden in Daten im JS-Code des Hauptprogramms deklariert.

Wenn Sie eine Liste in der Schnittstelle erstellen müssen, können Sie das Loop-Rendering in WXML verwenden, um die Rendering-Codes desselben Elements zusammenzustellen. Die Schleifendaten können für den WXML-Zugriff in Daten in Form eines Arrays geschrieben werden.

Nachdem das Rendern abgeschlossen ist, können sich Änderungen in den Rendering-Beurteilungsbedingungen auf Schnittstellenänderungen auswirken.

4. Vorlagen und Referenzen

WXML unterstützt die Verwendung von Vorlagen und Referenzen, um die Codegröße zu reduzieren.

Vorlagen sind eine Möglichkeit, denselben Code im WXML-Code wiederzuverwenden.

Sie können mehrere Vorlagen in dieselbe Datei schreiben und den Import verwenden, um sie in anderen Dateien zu referenzieren.

Wenn Sie auf die gesamte Seite verweisen müssen, müssen Sie include verwenden.

5. Stil

Über WXSS-Stylesheets können Entwickler den Stil von Elementen in WXML definieren.

WXSS Genau wie CSS-Code können Sie Selektoren direkt zum Auswählen von Elementen verwenden. In WXML können Sie die ID und Klasse von Elementen auch direkt definieren, um die Stildefinition in WXSS-Dateien zu erleichtern.

6. Benutzerbedienung und Ereignisreaktion

Da WeChat kein HTML verwendet, kann es Benutzerklickereignisse nicht durch Hinzufügen von Hyperlinks (a-Elementen) überwachen.

Für Elemente, die auf Klickereignisse warten müssen, sollten sie mithilfe des bindtap-Attributs oder des Catchtap-Attributs in WXML gebunden werden.

Zusätzlich zu einem Klick bietet WeChat auch Ereignisreaktionen wie Drücken und Halten, Berühren beginnen und Loslassen.

Nachdem ein Ereignis in WXML gebunden wurde, kann es im Hauptprogramm JS verwendet werden.

Es gibt auch weitere entsprechende Ereignisse in anderen APIs. Diese Ereignisse finden Sie in der offiziellen Dokumentation des WeChat-Applets.

Wenn Sie zwischen den Seiten des Miniprogramms wechseln müssen, sollten Sie die Methode wx.navigateTo() verwenden.

Es ist zu beachten, dass WeChat bei Seitenebenensprüngen die Ebenensprünge auf fünf Ebenen begrenzt. Bei der Entwicklung muss darauf geachtet werden, ob die entsprechenden Grenzwerte überschritten werden.

Netzwerkzugriff

Das Applet unterstützt drei Anforderungsmethoden.

Eine davon ist eine direkte HTTP-Verbindungsanforderung. Das Ergebnis wird direkt nach der Anforderung zurückgegeben und die Verbindung hergestellt. Die andere ist die Socket-Persistent-Verbindung. Wenn eine Partei die Verbindung aktiv schließt, wird die Verbindung beendet.

Zusätzlich zu den beiden oben genannten Verbindungsmethoden zum Senden und Empfangen von Klartext bietet WeChat auch eine Schnittstelle zum Senden und Empfangen von Dateien. Die im Miniprogramm aufgenommenen Stimmen und die ausgewählten Fotos müssen auf diesem Weg hochgeladen werden.

Der Zugriff auf das Netzwerk über das Miniprogramm erfordert, dass der Server eine sichere HTTPS-Verbindung unterstützt und die Portnummer 443 sein muss.

Gleichzeitig kann das Miniprogramm nur auf die Serveradresse zugreifen, die der Entwickler bei der Registrierung des Miniprogramms festgelegt hat.

Multimedia und Speicherung

Wenn Sie Multimedia (einschließlich Audio und Video) abspielen oder Daten in einem Miniprogramm speichern müssen, können Sie die in HTML 5 bereitgestellten Standards nicht verwenden. Sie müssen die Multimedia-Wiedergabesteuerung des Miniprogramms verwenden von WeChat bereitgestellte Schnittstelle und Speicherschnittstellen usw.

Bezüglich der Soundschnittstelle gibt es zwei Arten: Audiowiedergabe und Musikwiedergabe.

Die Audiowiedergabe bietet drei Schnittstellen: Wiedergabe, Pause und Stopp der Wiedergabe. Sie bietet weder die Funktion, zu einem bestimmten Wiedergabezeitpunkt zu springen, noch können Sie den aktuellen Wiedergabefortschritt abrufen.

Die Musikwiedergabeschnittstelle bietet zusätzlich zu den oben genannten grundlegenden Wiedergabesteuerungen Funktionen wie die Überprüfung und Überwachung des Musikstatus.

Das Applet bietet eine Schnittstelle zum Austausch von Foto- und Videodaten. Über diese Schnittstelle kann das Applet auf vom Benutzer ausgewählte oder aufgenommene Fotos und Videos zugreifen.

Die über die Audioaufzeichnungs- und Videofotoschnittstelle erhaltenen Multimediainformationen sind temporär und die Dateien müssen dauerhaft über die Mini-Programmspeicherdateischnittstelle gespeichert werden.

Für Textdaten bietet das Miniprogramm auch eine Schnittstelle zum Speichern dieser Art von Daten. Entwickler, die von Android oder anderen App-Plattformen wechseln, müssen beachten, dass Miniprogramme keine lokale Datenspeicherform im Datenbankstil bereitstellen, sondern diese in einer Eins-zu-eins-Form von „Feldwerten“ speichern.

Hardwarebezogen

Das Miniprogramm basiert auf WeChat und bietet viele hardwarebezogene APIs.

Das Applet kann die folgenden Daten über die API abrufen:

Systembezogene Informationen (einschließlich Netzwerkstatus, Gerätemodell, Fenstergröße usw.)

Schwerkrafterfassungsdaten

Kompassdaten

Über die obige API sollte es einfach sein, interaktive Seiten wie „Shake“ zu schreiben.

Bitte beachten Sie jedoch: Diese Daten können nur aktiv und nicht in Echtzeit durch Rückrufe dieser numerischen Änderungen ermittelt werden.

Push-Dienst

Das Miniprogramm bietet einen Push-Dienst und kann jederzeit notwendige Benachrichtigungen an Benutzer senden. Bitte beachten Sie jedoch, dass der Push-Dienst nur für Benachrichtigungserinnerungen und nicht für den Massenversand genutzt werden kann.

Im Miniprogramm heißt der Push-Dienst „Vorlagennachricht“ (Entwickler, die zuvor Dienstkonten entwickelt haben, sollten damit vertraut sein). Entwickler müssen neue Vorlagen-Push-Nachrichten (z. B. Kauferfolgsbenachrichtigungen usw.) im Hintergrund des WeChat-Miniprogramms registrieren und diese genehmigen, bevor sie den Vorlagennachrichten-Push-Dienst im Miniprogramm verwenden können. Es wird empfohlen, für spezifische Prüfstandards auf die entsprechenden Dokumente zu verweisen.

Nachdem die Vorlagennachricht genehmigt wurde, muss der Entwickler zuerst das Zugriffstoken vom WeChat-Server abrufen und dann den Wert, die Vorlagennummer und die dynamischen Variablen in der Vorlage (z. B. Bestellnummer, Preis usw.) übermitteln. an WeChat, das es dann an WeChat-Benutzer-Push-Benachrichtigungen weiterleitet.

Benutzerinformationen und WeChat-Zahlung

Das Miniprogramm kann die Benutzerinformationen mit der Zustimmung des Benutzers abrufen.

Zuallererst muss das Miniprogramm es Benutzern ermöglichen, die Anmeldung über die WeChat-Anmeldeschnittstelle zu autorisieren. Danach kann das Applet Benutzerinformationen anzeigen und verwenden.

Beachten Sie beim Anmelden über WeChat bitte, dass die Nachricht signiert werden muss, um ihre Integrität zu bestätigen und sicherzustellen, dass die Daten nicht manipuliert wurden.

WeChat-Zahlung kann auch im Miniprogramm verwendet werden. Es ist zu beachten, dass beim Senden einer Zahlungsanforderung der gesendeten Nachricht eine Signatur hinzugefügt werden muss, um die Integrität der Nachricht zu bestätigen.

Verwandte Lernempfehlungen: WeChat Mini-Programm-Tutorial

Das obige ist der detaillierte Inhalt vonVollständiger Entwicklungsentwurf des WeChat-Miniprogramms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!