Detaillierte Erläuterung des Lebenszyklus der Seite in der WeChat Mini Program Development Series (4)

Dieser Artikel stellt eine ausführliche Erklärung des Lebenszyklus der WeChat-Miniprogrammentwicklungsserie (4) Seiten vor

Diese Serie ist eine ausführliche Erklärung des Autors von Anfang an und eignet sich für Anfänger und lernen Sie Schritt für Schritt gemäß der Serie;

1: Der Lebenszyklus der Seite

Fügen Sie den in Abbildung 1 gezeigten Code zur Startseite hinzu: index.js

Abbildung 1

Nachdem Sie auf „Kompilieren“ geklickt haben, führen Sie dieses kleine Programm aus: Das Protokoll ist in Abbildung 2 dargestellt: Der erste Start der Seite index.js beginnt im Lebenszyklus Methodenaufruf in app,js: onLaunch---onShow, und dann mit dem Aufruf von index.js beginnen Die Lebenszyklusmethode auf der Seite: onLoad---onShow---onReady Wenn Sie auf „Hintergrund“ klicken, wird die Seite index.js aufgerufen tritt in den Hintergrund ein. Zu diesem Zeitpunkt wird die Lebenszyklusmethode onHide zurückgerufen, wie in Abbildung 3 dargestellt. Wenn Sie erneut auf „Vordergrund“ klicken, wird die Seite wieder in den Vordergrund gebracht und dann die Seitenlebenszyklusmethode zurückgerufen: onShow (beachten Sie, dass onLoad zu diesem Zeitpunkt nicht mehr aufgerufen wird), wie in Abbildung 4 gezeigt

Abbildung 2

Abbildung 3

Abbildung 4

2: Seitensprung

Schreiben Sie die index.wxml-Code, wie in Abbildung 5 dargestellt. Es ist ersichtlich, dass die Textkomponente an ein Ereignis gebunden ist: itemClick. Die Implementierung der itemClick-Methode ist in Abbildung 1 detailliert dargestellt:

itemClick: function (){
     console.log("---index page itemClick---");
    wx.navigateTo({
      url: '../logs/logs'
    })

Unter ihnen: wx.navigateTo stellt das Springen von der Seite „index.js“ zur Seite „pages/logs/logs“ dar. Hinweis: „navigateTo“ stellt das Springen zur Seite „logs“ dar. Übergeben Sie unter der Seite „logs“ die Schaltfläche „Zurück“. Ecke der Protokollseite kann zur Indexseite zurückkehren. Wenn es sich um wx.redirectTo handelt, wird die Indexseite zerstört und kann nicht von der Protokollseite zur Indexseite zurückgegeben werden. Hier nehmen wir nur wx.navigateTo als Beispiel

Abbildung 5

Wenn Sie im Simulator auf die Textkomponente von Artikel 2 klicken, gelangen Sie zu den entsprechenden Protokollen Schnittstellenprotokoll, wie in Abbildung 6 dargestellt. Der JS-Code, der der Protokollseite entspricht, ist in Abbildung 7 dargestellt. Durch den Vergleich von Abbildung 6 und Abbildung 7 ist ersichtlich, dass beim Springen von der Indexseite zur Protokollseite der Indexlebenszyklus abläuft Methode onHide muss zuerst aufgerufen werden (wenn es wx.redirectTo ist. Der Methodensprung ruft auch die Indexlebenszyklusmethode onUnload auf) und ruft dann die Lebenszyklusmethode der Protokollseite nacheinander auf: onLoad---onShow---onReady

Abbildung 6

Abbildung 7

3: Parameterübertragung zwischen Seiten

Ändern Sie Abbildung 1, index.js-Code in:

wx.navigateTo({

url: "../logs/logs?id=1&title=title abc"
})

Das heißt: vom Index Wenn die Seite zur Protokollseite springt, werden zwei Parameter übergeben: id=1 und title=title abc

Schauen wir uns die Protokolle an Seitencode wie in Abbildung 7 dargestellt, der durch Übergabe der Parameter in onLoad: Optionen erhalten wird. Was die übergebenen Parameter id und title betrifft, setzt der Code diese beiden Parameter auf die beiden an logs.wxml gebundenen Variablen: ArticleId, pageTitle. Die Anzeigeergebnisse und der logs.wxml-Code sind in Abbildung 8 dargestellt:

Abbildung 8

Wie Sie den Ergebnissen des Simulators entnehmen können In Abbildung 8 zeigt die Protokollseite die beiden von der Indexseite übergebenen Parameter an: id= 1 und title=title abc

Hinweis: Der Seitensprung kann auch in konfiguriert werden. wxml, wie im Code in Abbildung 5 gezeigt, kann die Textkomponente entsprechend Artikel 1 übergeben werden. Der folgende Code konfiguriert den Sprung:

<navigator url="../logs/logs?id=100&title=标题" >

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Lebenszyklus der Seite in der WeChat Mini Program Development Series (4). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!