Résumé des points de connaissances sur le routage des pages des mini-programmes WeChat

Cet article vous apporte des connaissances pertinentes sur le WeChat Mini Program, qui présente principalement le contenu pertinent sur le routage des pages fait référence à la plage réseau qui détermine le chemin de bout en bout lorsqu'un paquet est envoyé de la source à la destination. jetez un œil au processus ci-dessous, j’espère qu’il sera utile à tout le monde.

【Recommandations d'apprentissage associées : Tutoriel d'apprentissage du mini programme】

Qu'est-ce que le routage ?

Le routage fait référence au processus à l'échelle du réseau consistant à déterminer le chemin de bout en bout d'un paquet de la source à la destination. Nous pouvons comprendre le routage des pages de l'applet WeChat et les règles pour passer d'une page à une autre en fonction des règles de routage (chemins).

1. Qu'est-ce qui déclenchera le saut de page

1. Démarrez l'applet, initialisez la première page
2. Allez à la nouvelle page, appelez wx.navigateTo ou <navigator /&gt ;wx.navigateTo 或者 <navigator />
3. 页面重定向，调用wx.redirectTo 或者 <navigator />
4. 页面返回，调用wx.navigateBack ,页面左上角返回按钮
5. wx.switchTab实现tabBar页面切换

Tips: 所有页面都必须在app.json中注册,例如

{
    "pages": [
        "pages/index/index",
        "pages/classification/classification",
        "pages/start/start",
        "pages/detail/detail",  
    ]
}

---

二、微信小程序中实现页面路由的几种方式

1. wx.navigateTo，保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面

wx.navigateTo({
  url: 'pages/detail/detail',
  success: function(res) {},
  ...
})

2. wx.redirectTo,关闭当前页面，跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面

wx.redirectTo({
  url: 'pages/detail/detail',
  success:function(res){},
  ...
})

3. <navigator />组件跳转方式

<navigator url=pages/detail/detail">跳转</navigator>

4. wx.navigateBack返回上一页

wx.navigateBack({
	delta: 1,
})

Tips: delta为1时表示返回上一页，为2时表示上上一页，以此类推；如果dalta大于已打开的页面总数，则返回到首页。返回后，元界面会销毁

5. wx.switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
   app.json:

{
  "tabBar": {
    "list": [{
        "pagePath": "pages/index/index",
        "text": "首页",
    },
    {
        "pagePath": "pages/car/car",
        "text": "购物车",
      },
   ...
  }
}

index.js:

wx.switchTab({
  url: 'pages/car/car'
})

三、小程序路由实现原理

小程序路由是通过自己实现的一个栈(先进先出)来管理的。

当我们通过wx.navigateTo或者<navigator/>从A页面跳转到B页面时。路由栈的变化是这样的。

路由栈刚开始只存有页面A，当使用wx.navigateTo跳转后，页面B推入路由栈并展示到界面上，页面A隐藏。

当我们使用wx.navigateBack返回时

那么wx.redirectTo与wx.navigateTo有什么区别呢?

假如当前已经在二级页面B上，我们使用wx.redirectTo跳转到C页面，其过程是这样的。

如当前已经在二级页面B上，我们使用wx.redirectTo
Redirection de page, appelez wx.redirectTo ou <navigator />

retour de page, appelez wx.navigateBack code>, le bouton de retour dans le coin supérieur gauche de la page

wx.switchTab implémente le changement de page tabBar

Conseils : Toutes les pages doivent être enregistrées dans app.json, par exemple🎜🎜rrreee

---

🎜2 Plusieurs façons d'implémenter le routage des pages dans les mini-programmes WeChat🎜🎜🎜 wx. .navigateTo ,Conserver la page actuelle et accéder à une page de l'application, mais pas à la page à onglets🎜rrreee

🎜 wx.redirectTo,<strong>Fermez la page actuelle et accédez à une page de l'application, mais accéder à la page de la barre d'onglets n'est pas autorisé</strong>🎜

rrreee

🎜<navigator />Méthode de saut de composant🎜

rrreee

🎜wx.navigateBackRetour à la page précédente🎜rrreee 🎜🎜Conseils : Quand delta est à 1, cela signifie revenir à la page précédente, lorsqu'il est à 2, cela signifie aller à la page précédente, et ainsi de suite si delta ; est supérieur au nombre total de pages ouvertes, retournez à la page d'accueil . Après le retour, la méta-interface sera détruite🎜🎜
🎜wx.switchTabAllez à la page tabBar et fermez toutes les autres pages non-tabBar strong>🎜 app.json:🎜
rrreee🎜index.js:🎜rrreee🎜3. Principe de mise en œuvre du routage du mini programme🎜🎜Le routage du mini programme est géré via une pile (premier entré, premier sorti) implémentée. par vous-même. 🎜🎜Lorsque nous passons de la page A à la page B via wx.navigateTo ou <navigator/>. Les changements dans la pile de routage sont les suivants. 🎜🎜🎜La pile de routage ne contient que la page A au début . Lorsque vous utilisez wx.navigateTo pour sauter, la page B est poussée dans la pile de routage et affichée sur l'interface, tandis que la page A est masquée. 🎜🎜Lorsque nous utilisons wx.navigateBack pour renvoyer 🎜🎜🎜Alors quelle est la différence entre wx.redirectTo et wx.navigateTo ?🎜🎜Si nous sommes déjà sur la page secondaire B, nous utilisons wx.redirectTo Accédez à la page C Le processus est le suivant. 🎜🎜🎜Si vous êtes actuellement sur la page secondaire B, Nous utilisons wx.redirectTo pour accéder à la page C. Le processus est le suivant. 🎜 [Transfert d'image de lien externe...(img-mkPnbKug-1650431194878)]🎜🎜La page B apparaîtra, puis la page C sera poussée dans la pile. À ce stade, il n'y a encore que deux pages dans la pile. . 🎜🎜【Recommandations d'apprentissage associées : 🎜Tutoriel d'apprentissage du mini programme🎜】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!