WeChat 미니 프로그램의 페이지 라우팅에 대한 지식 포인트 요약

이 글에서는 페이지 라우팅에 대한 관련 내용을 주로 소개하는 WeChat 미니 프로그램에 대한 관련 지식을 제공합니다. 라우팅은 패킷이 소스에서 대상으로 전송될 때 종단간 경로를 결정하는 네트워크 범위를 말합니다. 아래 과정을 살펴보시고 모든 분들께 도움이 되길 바랍니다.

【관련 학습 추천 : 미니 프로그램 학습 튜토리얼】

라우팅이란?

라우팅은 소스에서 대상까지의 패킷의 종단 간 경로를 결정하는 네트워크 전체 프로세스를 나타냅니다. WeChat 애플릿 페이지 라우팅과 라우팅 규칙(경로)을 기반으로 한 페이지에서 다른 페이지로 이동하는 규칙을 이해할 수 있습니다.

1. 페이지 점프를 유발하는 요소

1. 애플릿을 시작하고 첫 번째 페이지를 초기화합니다.
2. 새 페이지로 점프하고 wx.navigateTo 또는 <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
페이지 리디렉션, wx.redirectTo 호출 또는 <navigator />

페이지 반환, wx.navigateBack호출 > code>, 페이지 왼쪽 상단에 있는 돌아가기 버튼

wx.switchTab은 tabBar 페이지 전환

을 구현합니다.팁: 모든 페이지는 app.json에 등록되어야 합니다. 예를 들어🎜🎜rrreee

---

🎜2 WeChat 미니 프로그램에서 페이지 라우팅을 구현하는 여러 가지 방법🎜🎜🎜 wx .navigateTo ,현재 페이지를 유지하고 애플리케이션의 페이지로 이동하지만 탭바 페이지는 이동하지 않습니다.🎜rrreee

🎜 wx.redirectTo,현재 페이지를 닫고 애플리케이션 내 페이지로 점프하지만 탭바 페이지로 점프는 허용되지 않습니다.🎜

rrreee

🎜<navigator />컴포넌트 점프 방법🎜

rrreee

🎜wx.navigateBack이전 페이지로 돌아가기🎜rrreee 🎜🎜팁: delta가 1이면 이전 페이지로 돌아가는 것을 의미하고, 2이면 이전 페이지로 가는 것을 의미합니다. 열린 페이지의 총 개수보다 크면 홈페이지로 돌아갑니다. 반환 후에는 메타 인터페이스가 삭제됩니다.🎜🎜
🎜wx.switchTabtabBar 페이지로 이동하고 tabBar가 아닌 다른 모든 페이지를 닫습니다. Strong>🎜 app.json:🎜
rrreee🎜index.js:🎜rrreee🎜3. 미니 프로그램 라우팅의 구현 원리🎜🎜미니 프로그램 라우팅은 스택(선입선출)을 통해 관리됩니다. 자체적으로 구현됩니다. 🎜🎜 wx.navigateTo 또는 <navigator/>를 통해 페이지 A에서 페이지 B로 이동할 때. 라우팅 스택의 변경 사항은 다음과 같습니다. 🎜🎜🎜라우팅 스택은 처음에 페이지 A만 포함합니다. wx.navigateTo를 사용하여 점프하면 페이지 B가 라우팅 스택으로 푸시되어 인터페이스에 표시되고 페이지 A는 숨겨집니다. 🎜🎜wx.navigateBack을 사용하여 🎜🎜🎜그럼 wx.redirectTo와 wx.navigateTo의 차이점은 무엇인가요?🎜🎜이미 보조 페이지 B에 있는 경우 wx.redirectToC 페이지로 이동하는 과정은 다음과 같습니다. 🎜🎜🎜현재 보조 페이지 B에 계시다면, wx.redirectTo를 사용하여 C 페이지로 이동합니다. 과정은 다음과 같습니다. 🎜 [외부 링크 이미지 전송...(img-mkPnbKug-1650431194878)]🎜🎜페이지 B가 튀어나오고, 그 다음 페이지 C가 스택에 푸시됩니다. 이때 스택에는 아직 두 페이지만 있습니다. . 🎜🎜【관련 학습 추천: 🎜미니 프로그램 학습 튜토리얼🎜】🎜

위 내용은 WeChat 미니 프로그램의 페이지 라우팅에 대한 지식 포인트 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!