Erläuterung der grundlegenden Verzeichnisstruktur des Miniprogramms zur praktischen Entwicklung von WeChat-Miniprogrammen

Zusammenfassung: Im vorherigen Artikel „Praktische Entwicklung von WeChat-Miniprogrammen“ (1): Einführung in WeChat-Miniprogramme haben wir etwas über die Funktionen von Miniprogrammen, Entwicklungstools und die Erstellung von Miniprogrammprojekten gelernt . Heute nehmen wir firstdemo als Beispiel, um die grundlegende Verzeichnisstruktur des Miniprogramms vorzustellen. Wenn wir ein WeChat Mini-Programm öffnen...

Im vorherigen Artikel Praktische Entwicklung des WeChat Mini-Programms (1): Einführung in das WeChat Mini-Programm haben wir bereits etwas darüber erfahren Das Miniprogramm Funktionen, Entwicklungstools und wie man Miniprogrammprojekte erstellt. Heute nehmen wir firstdemo als Beispiel, um die grundlegende Verzeichnisstruktur des Miniprogramms vorzustellen.
Wenn wir ein WeChat-Applet-Projekt öffnen und auf das Menü „Bearbeiten“ klicken, werden die folgenden 5 Dateien/Ordner angezeigt: Ordner „pages“, Ordner „utils“, globale Datei app.js, globale Datei app.json Datei, Bildbearbeitungsdatei-Tool app.wxss-Datei.

Die Gesamtstruktur der Applet-Verzeichnisstruktur ist wie folgt:



Stellen wir jede Datei und jeden Ordner im Applet-Verzeichnis vor Detailfunktionen und Vorsichtsmaßnahmen.
1.Einführung in das Seitenverzeichnis

Seiten:speichert hauptsächlich die Seitendateien des Miniprogramms, Jeder Ordner ist eine Seite und jede Seite enthält vier Dateien:

Index .js

.js ist die Logikdatei des Miniprogramms, auch bekannt als Ereignisinteraktionsdatei und Skriptdatei. Sie wird zur Verarbeitung von Funktionen wie Klick verwendet Ereignisse auf der Schnittstelle, wie das Festlegen der Anfangsdaten, das Definieren von Ereignissen, Dateninteraktionen, logische Operationen, die Deklaration von Variablen, Arrays, Objekten, Funktionen, Anmerkungsmethoden usw., ihre Syntax ist dieselbe wie bei JavaScript. Wir können den Code in index.js öffnen und genauer betrachten.

Zuerst können wir das Hallo-Wort im Motto in das Hallo-WeChat-Applet in den Daten ändern. Wie im Bild unten gezeigt:

Zweitens schauen wir uns die Funktion von bindViewTap: function() an, bei der es sich um einen Klick handelt, um zur Protokollseite zu springen. Wir können auf den Avatar klicken, um den Demonstrationseffekt zu sehen, wie unten gezeigt:
Schließlich werfen wir einen Blick auf die onLoad-Funktion, die die Aktion wann festlegt Die Seite beginnt. Wir können die Seite ändern, die beim Starten der Seite angezeigt werden soll, oder neue Funktionen hinzufügen, wie in der folgenden Abbildung gezeigt:



Die häufig verwendeten .js-Funktionen sind wie folgt:

Seite({

1. 
   

Daten:{

2. 
   

// Text: „Dies ist eine Seite“

3. 
   

},

4. 
   

onLoad:function(options){

5. 
   

// Seiteninitialisierungsoptionen sind die Parameter, die durch Seitensprung mitgebracht werden

6. 
   

console.log('App onLoad')

7. 
   

},

8. 
   

onReady:function() {

9. 
   

// Seitenrendering abgeschlossen

11. console.log('App onReady')
    

12. },
    

13. onShow:function(){
    

14. // Seitenanzeige
    

15. console.log('App onShow')
    

16. },
    

17. onHide:function(){
    

18. // Seite ausblenden
    

19. console.log('App onHide')
    

20. },
    

21. onUnload:function(){
    

22. // Seite schließt
    

23. console.log('App onUnload')
    

24. }
    

25. })

Code kopierenindex.json.json-Datei ist eine Konfigurationsdatei, die hauptsächlich im JSON-Datenformat gespeichert wird und zum Festlegen des Konfigurationseffekts verwendet wird des Programms. Wir können eine .json-Konfigurationsdatei im Indexverzeichnis erstellen, wie unten gezeigt:

Mit der Konfigurationsdatei index.json können nur Seitenkonfigurationsdateien in diesem Ebenenverzeichnis konfiguriert und nur Dateien im Zusammenhang mit der Navigationsleiste konfiguriert und geändert werden, z. B. das Ändern des Anzeigestils der Navigationsleiste, z. B. Navigationstext, Hintergrundfarbe und Textfarbe. Warten. Die Syntax ist dieselbe wie die JSON-Syntax. Ändern wir beispielsweise die Hintergrundfarbe der Navigationsleiste in Rot, wie in der Abbildung unten gezeigt:

Wir können sehen, dass sich die Hintergrundfarbe in Rot ändert . . (Diese Farbe ist wirklich entsetzlich!)

index.wxml

.wxml-Datei ist die Schnittstelle Datei, ist eine Seitenstrukturdatei, die zum Erstellen der Seite und zum Hinzufügen von Steuerelementen zur Seite verwendet wird. Der vollständige Name ist die Abkürzung für Weixin Markup Language, WeChat Markup Language. Wie bei anderen allgemeinen Auszeichnungssprachen sind Tags paarweise und Tag-Namen in Kleinbuchstaben geschrieben. Sie können das Erscheinungsbild durch Referenzieren von Klassen steuern, Sie können auch eine logische Verarbeitung durch Binden von Ereignissen durchführen und die von uns benötigte Liste durch Rendern vervollständigen. Es ist die Verbindung zwischen Benutzeroperationen und Back-End-Logik. Alle Elemente, die wir auf der Seite sehen, können hier bearbeitet werden. Zum Beispiel haben wir eine Schaltfläche auf der Seite platziert, wie unten gezeigt:

Wie kommentiere ich unnötigen Programmcode in .wxml? Wie folgt:

1. 
   

2. 
   

3. 
   

4. 
   

5. {{userInfo.nickName}}000
   

6. 
   

7. {{motto}}

   
   

8. 
   

9. 
   

10. 
    

11. 
    

12. Code kopieren

    
    

    Hinweis:

1 Diese spezifischen Tags in WeChat-Miniprogrammen werden Komponenten genannt.

index.wxss

.wxss ist eine Stylesheet-Datei, ähnlich wie CSS im Frontend, das für .wxml-Dateien ist und Seitendateien. Verschönerte Dateien machen die Darstellung der Benutzeroberfläche schöner. Legen Sie beispielsweise die Größe und Farbe von Text, die Breite und Höhe von Bildern sowie die Position und den Abstand von Komponenten in .wxml fest.

Hinweis:

1. Jede Seite des Miniprogramms muss .wxml- und .js-Dateien enthalten. Die anderen beiden Dateitypen sind nicht erforderlich.

2. Der Dateiname muss mit der Seite übereinstimmen. Die Ordner haben denselben Namen, z. B. der Indexordner. Die Dateien können nur index.wxml, index.wxss, index.js und index.json sein.

1.2 Utils

Diese Datei wird hauptsächlich zum Speichern einiger globaler und einiger allgemeiner .js-Dateien verwendet Verwendete Ereignisverarbeitungscodes. In diesem Ordner können Dateien für globale Aufrufe abgelegt werden. Zum Beispiel gängige Methoden: Bearbeitungszeit usw.

1. module.exports = {
   

2. formatTime: formatTime
   

3. }

Code kopieren
Für Methoden, die externe Aufrufe zulassen, verwenden Sie module.exports, um sie zu deklarieren, und verwenden Sie dann den folgenden Code, um sie in andere js-Dateien einzuführen

1. var util = require('../../utils/util.js')

Kopieren Code Dann können Sie die Methode aufrufen.

Beispiel: Wir definieren direkt eine Utils-Funktion, wie unten gezeigt:

1. function util(){
   

2. console.log("Modul wurde aufgerufen!!")
   

3. }
   

4. 
   

5. module.exports.util = util

Kopieren Sie den Code

Dann rufen Sie diese Util-Funktion in der Datei index.js wie folgt auf:

1. var common = require('../../utils/util.js')

Code kopieren

Nachdem wir ihn gespeichert haben, können wir im Hintergrund sehen, dass der von uns definierte Util-Inhalt aufgerufen wurde, wie unten gezeigt:

1.3 app.js, app.json, app.wxss

app.js : Die Systemmethode verarbeitet globale Dateien, d. h. die in der Datei angegebenen Funktionen und Daten können durch Verwendung dieser Methode für jede Frame-Seite und Datei im gesamten Applet abgerufen werden. Jedes Miniprogramm verfügt über eine app.js-Datei, und es gibt nur eine, die sich im Stammverzeichnis des Projekts befindet! Die Funktion von app.js besteht darin, das Miniprogramm anzuweisen, eine Instanz des Miniprogramms in Form einer App (Objekt) zu registrieren, um die Ereignisfunktionen zu implementieren, die das Miniprogramm in verschiedenen Phasen implementieren muss, z. B. onLoad, onshow, usw. Es gibt nur drei globale On-Ereignisse: , weniger als das On-Ereignis der Seite. Verwaltet hauptsächlich einige Methoden des Lebenszyklus des Programms, zum Beispiel: Ereignisverarbeitung, wenn das Programm gerade startet usw. app.js enthält eine app()-Methode, die entsprechende Ereignisdefinitionen bereitstellt, wie folgt: 🎜>

App({

onLaunch: Funktion () {

2. console.log('App Launch')
   

3. },
   

4. onShow: function () {
   

5. console.log('App Show')
   

6. },
   

7. onHide: function () {
   

8. console.log('App Hide')
   

9. }
   

10. })

Code kopierenApp( )-Funktion wird verwendet, um ein kleines Programm zu registrieren. Akzeptiert einen Objektparameter, der die Lebenszyklusfunktion des Applets usw. angibt.

app.json : Die globale Systemkonfigurationsdatei muss enthalten sein. Dazu gehören das Festlegen des Seitenpfads, das Festlegen des unteren Rands, des Netzwerks, des Debugging-Modus, das Festlegen der Farbe des Navigationskopfs, der Schriftgröße, ob unten Tabbars vorhanden sind und andere Funktionen. Die Konfiguration der spezifischen Seite wird separat in der JSON-Datei von geändert Die Seite muss in der App registriert werden. Wenn sie nicht in JSON hinzugefügt wird, kann die Seite nicht geöffnet werden.

1. "Seiten":[
   

2. „pages/index/index“,
   

3. „pages/logs/logs“
   

4. ],

Code kopieren

( im Frame Die JSON-Priorität ist höher als die globale JSON-Priorität ) .wxss : Globaler Code zur Verschönerung der Schnittstelle, nicht erforderlich. Auch seine Priorität ist nicht so hoch wie die von wxss im Framework.

Beispiel: Es gibt Randeinstellungen für den Avatar in index.wxss

.usermotto {

margin-top: 200px;

1. 
   

   }

2. 
   Code kopieren

   Definieren Sie außerdem eine globale Avatar-Randeinstellung von 400 Pixel in app.wxss. Mal sehen, welche verwendet wird.

.usermotto {

margin-top: 400px ;

1. 
   

   }

2. 
   Code kopieren

   Während des Neustartvorgangs können wir sehen, dass die globalen Parameter indiziert sind in .wxss werden abgedeckt.

Hinzufügen und Verarbeiten von Bildern im WeChat-Miniprogramm

Das Hinzufügen von Bildern im WeChat-Miniprogramm ist sehr mühsam und kann nur sein Durch Öffnen des Projektordners geöffnet, legen Sie einfach die Bilder in das Verzeichnis ab. Verweisen Sie einfach auf den relativen oder absoluten Pfad des Bildes im Code. Derzeit werden bei der Entwicklung von Miniprogrammen nur die Formate PNG und JPG unterstützt, Bilder in anderen Formaten können nicht geöffnet werden.

Das obige ist der detaillierte Inhalt vonErläuterung der grundlegenden Verzeichnisstruktur des Miniprogramms zur praktischen Entwicklung von WeChat-Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!