Einführung in die Verzeichnisstruktur der Entwicklung des WeChat-Miniprogramm-Einkaufszentrumssystems

In diesem Artikel wird hauptsächlich die Entwicklungsreihe des WeChat-Miniprogramms für das Einkaufszentrumssystem vorgestellt – eine Einführung in die Verzeichnisstruktur. Interessierte können mehr erfahren.

Im vorherigen Artikel haben wir kurz die WeChat Mini Program IDE (WeChat Mini Program Shopping Mall System Development Series – Tools) vorgestellt. Ich glaube, dass jeder bereits bereit ist, ein eigenes Miniprogramm zu erstellen, um ein unabhängiges Projekt abzuschließen Website des Einkaufszentrums.

Keine Sorge, gehen wir Schritt für Schritt vor. Versuchen Sie zunächst, eine eigene kleine Demo zu schreiben.

In diesem Artikel stellen wir hauptsächlich einige Verzeichnisstrukturen und die Syntax kleiner Programme vor . und ebnete später den Weg für unser WeChat Mini-Programm-Mall-System.

Lassen Sie uns zunächst die Verzeichnisstruktur des Miniprogramms verstehen.

Seiten Einige unserer neuen Seiten werden in diesem Ordner gespeichert. Jede Miniprogrammseite hat denselben Namen Pfad. Die Zusammensetzung von vier verschiedenen Suffixdateien, wie zum Beispiel: index.js, index.wxml, index.wxss, index.json. Dateien mit dem Suffix .js sind Skriptdateien, Dateien mit dem Suffix .json sind Konfigurationsdateien, Dateien mit dem Suffix .wxss sind Stylesheet-Dateien und Dateien mit dem Suffix .wxml sind Seitenstrukturdateien.

Dienstprogramme Einige von uns geschriebene öffentliche Tool-JS können darin platziert werden.

app.js ist der Skriptcode des Miniprogramms. Wir können die Lebenszyklusfunktionen des Applets überwachen und verarbeiten und in dieser Datei globale Variablen deklarieren. Rufen Sie die vom Framework bereitgestellte umfangreiche API auf, z. B. in diesem Beispiel die synchrone Speicherung und das synchrone Lesen lokaler Daten.
app.json ist die globale Konfiguration des gesamten Applets. In dieser Datei können wir konfigurieren, aus welchen Seiten das Miniprogramm besteht, die Fensterhintergrundfarbe des Miniprogramms konfigurieren, den Stil der Navigationsleiste konfigurieren und den Standardtitel konfigurieren.

{

 "pages":[

  "pages/index/index",

  "pages/logs/logs"

 ],

 "window":{

  "backgroundTextStyle":"light",

  "navigationBarBackgroundColor": "#fff",

  "navigationBarTitleText": "WeChat",

  "navigationBarTextStyle":"black"

 }

}

Hinweis: app.json enthält globale Einstellungen für das gesamte Miniprogramm. Natürlich hat jede Seite auch eine eigene JSON-Datei. Die JSON-Datei unter jeder Seite kann nur das Fenster festlegen, sodass Sie nur die Fensterkonfiguration unter der JSON-Datei der Seite

{

  "backgroundTextStyle":"light",

  "navigationBarBackgroundColor": "#fff",

  "navigationBarTitleText": "WeChat",

  "navigationBarTextStyle":"black"

 }

schreiben müssen. wxss ist das gemeinsame Stylesheet für das gesamte Applet. Wir können die in app.wxss deklarierten Stilregeln direkt für das Klassenattribut der Seitenkomponente verwenden.

Jede Seite kann auch ihr eigenes WXSS definieren. Wxss ist das von WeChat bereitgestellte CSS-Stylesheet. Die Schreibmethode ist fast die gleiche wie CSS. Es unterstützt jedoch relativ wenige Selektoren. Beim Schreiben kann grundsätzlich das CSS aus einigen unserer vorherigen Projekte verwendet werden. Wenn Sie jedoch zusätzlich zu den folgenden Selektoren verwenden, kann die gesamte Seite einen Fehler melden

Index. whtml Der Ordner mit dem Suffix wxml ist das Seitenstrukturdokument, das uns vom WeChat-Applet bereitgestellt wird. Es ähnelt dem HTML unserer vorherigen Webseite, hat jedoch einige eigene Tags angepasst.

Als nächstes erstellen wir eine neue Seite zum Ausprobieren

Erstellen Sie einen neuen Seitentest unter Seiten. Behalten Sie den gleichen Namen wie der unter der Seite definierte Testordner bei. Das WeChat-Applet liest diese Dateien automatisch und generiert Applet-Instanzen.
Zuerst müssen wir die neu erstellte Seite unter app.json konfigurieren

Hinweis: In der Reihenfolge der Seitenkonfiguration haben wir im tatsächlichen Betrieb festgestellt, dass die erste konfigurierte Seite die Startseite ist.

Nach der Konfiguration können wir unseren Seitencode schreiben.
Wie Sie sehen können, können wir einige Fensterattribute der aktuellen Seite direkt auf der app.json-Seite konfigurieren
In Wxml können wir einige Strukturen für die Anzeige unserer Seite schreiben, das heißt wir Wird zum Schreiben von HTML verwendet. Gleiches. In der Zwischenzeit haben wir das Tag 89c662c6f8b87e82add978948dc499d2 verwendet, das fast dem p entspricht, das wir zuvor verwendet haben.
Wxss Jeder sieht, dass es dem CSS ähnelt, das wir zuvor geschrieben haben. Hier ist die zuvor definierte .box plus ein Stil.

test.js ist die Skriptdatei der Seite. In dieser Datei können wir die Lebenszyklusfunktionen der Seite überwachen und verarbeiten, Miniprogramminstanzen abrufen, Daten deklarieren und verarbeiten sowie auf Seiteninteraktionsereignisse reagieren. usw.

Hier verwenden wir bintap, um ein Klickereignis an die Ansicht zu binden und dann ein Eingabeaufforderungsfeld anzuzeigen.

Hinweis: Die Schreibmethode von js ist hier genau die gleiche wie unsere vorherige Schreibmethode, mit der Ausnahme, dass hier keine Fensterobjekte und Dokumentobjekte verwendet werden können. Ebenso können jquery, zepto und andere Frameworks nicht verwendet werden, da diese Frameworks verwendet werden Fenster- und Dokumentobjekte.

Okay! Heute werde ich Ihnen nur eine kurze Einführung in die Verzeichnisstruktur und die einfache Verwendung des Miniprogramms geben. Im nächsten Abschnitt beginnen wir mit dem Schreiben unseres Mall-Systems.

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 LOL Einführung in die Entwicklung von Helden

Über die Schritte für die WeChat-Zahlung mit dem WeChat-Miniprogramm

Über die Entwicklung des Einkaufszentrums des WeChat-Miniprogramms (ecshop)

Das obige ist der detaillierte Inhalt vonEinführung in die Verzeichnisstruktur der Entwicklung des WeChat-Miniprogramm-Einkaufszentrumssystems. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!