Bringen Sie Ihnen bei, wie Sie ein kleines Programmprojekt von Grund auf erstellen

IDE-Vorbereitung

Download-Adresse: mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

Wissensvorbereitung

Sie müssen noch einen Blick auf JavaScript werfen. Empfohlene Tutorials: JavaScript-Anfänger-Tutorial

Von vorne beginnen

Es gibt vier Arten von Dateien in WeChat-Miniprogrammen

js -- --- -----JavaScrip-Datei

json -------- Projektkonfigurationsdatei, verantwortlich für Fensterfarbe usw.

wxml ------- Ähnlich wie HTML-Dateien

wxss ------- Ähnlich wie CSS-Dateien

Die vier mit app benannten Dateitypen im Stammverzeichnis sind die Programmeintragsdateien.

app.json

Diese Datei muss vorhanden sein, meldet die IDE einen Fehler, da das WeChat-Framework diese als Konfigurationsdateieintrag verwendet 🎜>Sie müssen nur erstellen. In diese Datei schreiben Sie einfach geschweifte Klammern

Wir werden hier in Zukunft die globale Konfiguration des gesamten Applets konfigurieren. Die Seitenzusammensetzung wird aufgezeichnet, die Fensterhintergrundfarbe des Miniprogramms wird konfiguriert, der Navigationsleistenstil wird konfiguriert und der Standardtitel wird konfiguriert.

app.js

Diese Datei muss vorhanden sein, sonst wird ein Fehler gemeldet! Aber erstellen Sie einfach diese Datei. Sie müssen nichts schreiben

In Zukunft können wir die Lebenszyklusfunktionen des Miniprogramms überwachen und verarbeiten und globale Variablen in dieser Datei deklarieren.

app.wxss

Diese Datei ist nicht erforderlich. Da es sich lediglich um eine globale CSS-Stildatei

app.wxml

handelt, ist dies nicht erforderlich, und dies bezieht sich nicht auf die Hauptschnittstelle ~, da die Hauptseite des Miniprogramms darauf basiert die JSON-Datei Es hängt von der Konfiguration ab

Mit diesen beiden Dateien meldet die IDE beim Ausführen des Programms keinen Fehler, was auch bedeutet, dass dies das einfachste WeChat-Applet ist

Erstellen eine Programminstanz Hello World

Die Datei app.js verwaltet den Lebenszyklus des gesamten Programms. Fügen Sie daher den folgenden Code hinzu: (Sie werden beim Aufrufen der App-IDE dazu aufgefordert)

App ({ onLaunch: function () { console.log( 'App Launch') }, onShow: function () { console.log('App Show') }, onHide: function () { console.log('App Hide' ) }})

Spezifische API Die Erklärung lautet wie folgt

ActionBar verschönern

Die JSON-Datei ist für die Konfiguration der ActionBar-Farbe verantwortlich. Wir müssen nur den folgenden Code hinzufügen Darin sind die Parameter in der Abbildung unten erklärt!

Paste_Image.png

Paste_Image.png

{ "window":{ "navigationBarBackgroundColor": "#BBDEF8", "navigationBarTitleText": "Demo", "navigationBarTextStyle " :"white" }}

Paste_Image.png

Jetzt sehen Sie, ob die ActionBar so aussieht! Okay, schreiben wir weiter an unserer ersten Schnittstelle

Verschönern Sie die Seite

Um die Seite zu verschönern, verwenden wir WXML- und WXSS-Dateien

Um die Programmcodestruktur einfach zu halten

Wir müssen einen neuen Ordner im Verzeichnis mit einem zufälligen Namen erstellen. Wir nennen ihn Seiten

und erstellen dann einen neuen Ordner im Seitenordner mit einem zufälligen Namen

und dann erstellen wir die Datei index.wxml und schreiben den folgenden Code hinein

Hellotext>view>

Dann erstellen wir die Datei index.wxss und schreiben den folgenden Code darin

.window{ color=#4995fa;}

Dann erstellen wir die Datei index.js

Geben Sie den folgenden Code in die Datei ein (es erscheint eine Eingabeaufforderung bei Eingabe von Page IDE)

Die Funktion wird wie folgt erklärt:

Paste_Image.png

Konfigurieren der Homepage

Die Json-Datei ist für die Konfiguration zuständig der Seitenpfad

Also fügen wir den folgenden Code ein

wobei index ist. Die Bedeutung bezieht sich tatsächlich auf die Datei index.js

Hier muss erklärt werden, dass die Pfad in Seiten verweist tatsächlich auf die js-Datei

Wenn in einem Verzeichnis keine js-Datei mit diesem Namen vorhanden ist, wird ein Fehler gemeldet!

"pages":[ "pages/index/index"],

Fertig! Lassen Sie uns das Programm ausführen!

Super Hello World

Um die Ereignisbindung zu lernen und Daten auf der Seite zu aktualisieren

Lassen Sie uns eine Super Hello World erstellen, das heißt, wenn ich auf klicke Text, es wird

Es ändert seine Farbe!

Bindende Ereignisse

Wir öffnen index.wxml und ändern den darin enthaltenen Code so, dass er so aussieht

Hellotext>view>

Tatsächlich fügen wir Catchtap hinzu =" klicken"

Keine Sorge, ich werde sie einzeln erklären

Das Bild oben zeigt einige Attributnamen des Ereignisses Achten Sie auf den im roten Feld markierten Inhalt. Unterscheiden Sie zwischen sprudelnden Ereignissen und nicht sprudelnden Ereignissen. Tatsächlich müssen sprudelnde Ereignisse das Ereignis an den Container der oberen Ebene übergeben.

Nachdem wir uns dieses Bild angesehen haben, schauen wir uns die Bedeutung von „catchtap="click"“ an

catch stellt ein Nicht-Blasen-Ereignis dar

tap stellt ein Klickereignis dar

Auch zusammen handelt es sich also um Klickereignisse ohne Blase.

Was ist der Klick hinten?

Klick ist eigentlich nur ein Variablenname.

Das müssen wir verwenden Name zum Binden und Empfangen in index.js Ereignisfunktion

Wir öffnen index.js

und fügen die folgende Funktion hinzu

click:function(){ console.log(" Auf den Text geklickt"); },

Nach dem Hinzufügen sieht der Code so aus. Das rote Kästchen ist der hinzugefügte Code

Die Rückruffunktion des Klickereignisses ist also tatsächlich Catchtap ="click"

gefolgt von click :function() bestehend aus

Jetzt versuchen wir, das Programm auszuführen und auf den Text zu klicken

, um zu sehen, ob die Funktion click:function aufgerufen und das Protokoll gedruckt wird

Okay, dann schreiben wir die Logik der Änderung Farbe, wenn darauf geklickt wird

Wie lässt sich die Farbe eines Textes ändern? Natürlich ist es CSS

Also müssen wir einen Stil hinzufügen

.window-red{ color:#D23933 ;}

Dann geben wir die Datei index.js ein

Sie werden feststellen, dass der Code Daten enthält:{} Es handelt sich nicht um eine Seitenlebenszyklusfunktion

Tatsächlich handelt es sich um ein Array von Variablen. Alle angewendeten Variablen können in wxml verwendet werden

Wir beantragen hier eine Farbe

Der Wert der Farbe ist der Stilname in index.wxss

und geben Sie dann index.wxml ein. Das Ändern des Werts in der Klasse in {{color}}

bedeutet tatsächlich, den Wert der Variablenfarbe in der js-Datei hier zu verwenden

, das heißt, der Wert ist gleich dem Fenster

Dann kehren wir zur Datei index.js zurück

Bewerben Sie sich für eine Variablensteuerung, klicken Sie oben

und fügen Sie dann den folgenden Code in die Funktion click:function() ein

click:function (){ console.log("Clicked text"); if(flag){ color = "window-red" ; flag = false; }else{ color = "window"; flag = true } this.setData({ color },

Der geänderte Code ist wie in der Abbildung gezeigt

Tatsächlich geht es darum, den Wert der Farbvariablen zu ändern, nachdem Sie auf „Ja“ geklickt haben, und der ersetzte Wert ist tatsächlich der Name des Stils

Schnittstellendaten aktualisieren

Hier liegt ein Problem vor. Wir haben den Wert geändert, aber er wird nicht sofort in wxml wirksam.

Daher müssen wir die Methode

this.setData() aufrufen, um den Wert mit wxml zu synchronisieren, damit er wirksam wird sofort

Okay, lassen Sie uns das Programm ausführen und auf „Hallo“ klicken, um zu sehen, ob sich die Farbe mit einem Klick ändert!

Abschließend möchte ich hinzufügen, dass JSON-Dateien auch im Indexverzeichnis konfiguriert werden können

Das heißt, jede Seite kann ihre eigene einzigartige Aktionsleistenfarbe usw. konfigurieren.

Die Konfiguration hier wird die Konfiguration der app.json-Datei überschreiben

Quellcode-Github-Adresse https://github.com/pwh0996/WXDemo.git

Endlich eine Welle von Mini teilen Programm-Quellcode, 488 Mini-Programm-Demo-Quellcode-Downloads Spezialbereich:

p/36fc7213b5d0

Freunden, die Energie haben, wird empfohlen, es zu lesen.

---

Ich habe einen Live-Auftritt auf Zhihu abgehalten und werde Sie am Abend des 22. April (Samstag) um 8:30 Uhr auf Zhihu treffen: [0 Basic Weekend Study Tips Program Entwicklung] (https://www.zhihu.com/lives/832919740296101888), willkommen bei uns.

Drücken Sie lange auf den Mini-Programmcode, um die „Kultivierungskommune“ zu öffnen und sofort dem „WeChat Mini-Programm“ Mi Circle beizutreten

Dieser Artikel wurde zuerst auf meinem persönlichen öffentlichen WeChat-Konto Philosophy Li Lun veröffentlicht , das hauptsächlich Kunst-/Technologiebezogene Inhalte fördert, dreht sich alles um Freunde.

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen bei, wie Sie ein kleines Programmprojekt von Grund auf erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!