Explication détaillée du développement du mini-programme WeChat

Cette série est une explication détaillée de l'auteur depuis le début. Elle convient aux débutants pour regarder et apprendre étape par étape selon la série

1 : Le cycle de vie de la page

Ajouté dans la page initiale : index.js Le code affiché dans la figure 1

Figure 1

Après avoir cliqué sur "Compiler", exécutez ceci petit programme : le journal est illustré dans la figure 2 : le démarrage de l'index de la page initiale .js démarrera à partir de l'appel de la méthode du cycle de vie dans l'application, js : onLaunch---onShow, puis commencera à appeler la méthode du cycle de vie dans la page index.js. : onLoad---onShow---onReady, lorsque "Background" est cliqué Lorsque la page index.js entre en arrière-plan, la méthode de cycle de vie onHide est rappelée, comme le montre la figure 3. Si vous cliquez à nouveau sur "Foreground", la page revient au premier plan et la méthode du cycle de vie de la page : onShow est rappelé (notez qu'à ce moment-là, plus de rappel onLoad) Comme le montre la figure 4

Figure 2

Figure 3

Figure 4

2 : Saut de page

Écrivez le code index.wxml comme indiqué dans la figure 5. Comme indiqué, on peut voir que le composant texte est lié à un événement : itemClick Les détails d'implémentation de la méthode itemClick. sont illustrés dans la figure 1 :

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

Parmi eux : wx.navigateTo représente le saut de la page index.js à la page pages/logs/logs, remarque : naviguerTo signifie qu'après avoir sauté à la page des journaux, le La page d'index n'est pas détruite. Sous la page des journaux, vous pouvez revenir à la page d'index via le bouton de retour dans le coin supérieur gauche de la page des journaux, et s'il s'agit de wx.redirectTo, la page d'index La page est détruite et ne peut pas être détruite. renvoyé de la page des journaux à la page d'index. Ici, nous prenons uniquement wx.navigateTo comme exemple

Figure 5

Si vous cliquez dans le simulateur Après le composant texte de l'article 2, accédez au journal de l'interface des journaux correspondant comme indiqué dans la figure 6. Le code js correspondant de la page des journaux est illustré dans la figure 7. En comparant la figure 6 et la figure 7, nous pouvons voir qu'en sautant de la page d'index vers les journaux Dans le processus de la page, la méthode du cycle de vie de l'index onHide doit être appelée en premier (s'il s'agit d'un saut wx.redirectTo, la méthode du cycle de vie de l'index onUnload doit également être appelée), puis la méthode du cycle de vie de la page des journaux doit être appelée dans l'ordre : onLoad---onShow--- onReady

Figure 6

Figure 7

3 : Transfert de paramètres entre les pages

Modifier la figure 1, code index.js en :

wx.navigateTo({

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

C'est-à-dire : lors du passage de la page d'index à la page des journaux, deux paramètres sont transmis : id=1 et title=title abc

Regardons-le à nouveau. Le code de la page des journaux est illustré dans la figure 7. Dans onLoad, les paramètres passés : id et title sont obtenus en passant les paramètres : options In. le code, ces deux paramètres sont définis sur les deux variables liées à logs.wxml : articleId , pageTitle, les résultats d'affichage et le code logs.wxml sont présentés dans la figure 8 :

Figure 8

Les résultats du simulateur de la figure 8 peuvent être Voir, la page des journaux affiche les deux paramètres transmis depuis la page d'index : id=1 et title=title abc

Remarque : le saut de page peut également être effectué dans la configuration .wxml, comme le montre le code de la figure 5, le composant texte correspondant à l'article 1 peut être sauté via la configuration de code suivante :

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

Pour des explications plus détaillées sur le développement de l'applet WeChat et des articles connexes, veuillez faire attention au site Web PHP chinois !