WeChat 개발 시작하기(8) 페이지 라우팅

라우팅이란 무엇인가요?

우리가 일반적으로 라우팅이라고 이해하는 것은 소스에서 대상까지의 패킷 데이터 패킷의 종단 간 경로를 결정하는 네트워크 전체 프로세스를 의미합니다. 위의 정의를 통해

라우팅 규칙

이 기사를 통해 다음 내용을 알아볼 수 있습니다.

1. 페이지 점프 방법

2. 페이지 매개변수

3. 페이지 스택

4. 1. 페이지 이동을 유발하는 상황

애플릿을 시작하고 첫 번째 페이지를 초기화하려면

1. 새 페이지를 열고

   API
wx.navigateTo를 호출하거나 다음을 사용하세요.
2. 구성 요소

   <navigator />를 사용하여 페이지를 리디렉션하고 API wx.redirectTo를 호출하거나

   구성 요소

3. <navigator />를 사용하여 페이지를 반환합니다. API wx .navigateBack을 호출하거나 사용자가 왼쪽 상단의 반환 버튼

4. tarbar 스위치

5. 을 누릅니다. 모든 페이지는 다음에 등록되어야 합니다. app.json, 예:

   {
       "pages": [
           "pages/index/index",
           "pages/logs/index"
       ]
   }

   로그인 후 복사
2. 페이지로 이동하는 방법

wx.navigateTo

를 사용하여
1. 원본 페이지는 그대로 유지됩니다

   .

   wx.navigateTo({
       //目的页面地址
       url: 'pages/logs/index',
       success: function(res){},
       ...
   })

   로그인 후 복사
   wx.redirectTo 인터페이스를 사용하여 이동하세요.
   원본 페이지를 닫고
으로 돌아갈 수 없습니다.

2. wx.redirectTo({
       //目的页面地址
       url: 'pages/logs/index',
       success: function(res){},
       ...
   })

   로그인 후 복사

   3. 구성요소 사용

   <navigator url="pages/logs/index" hover-class="navigator-hover">跳转</navigator>

   로그인 후 복사
   redirect 속성이 구성요소에 추가되면 기본 리디렉션 속성은 false입니다. wx.navigateTo 인터페이스.

   사용자가 왼쪽 상단의 돌아가기 버튼을 클릭하거나, wx.navigateBack 인터페이스를 호출하여 이전 페이지로 돌아갑니다.

   wx.navigateBack({
   delta: 1
   })

   로그인 후 복사
delta가 1이면 이전 페이지로 돌아가는 것을 의미하고, 2이면 이전 페이지로 가는 것을 의미하며, delta가 열린 총 페이지 수보다 크면 반환됩니다. 홈 페이지로. 반환 후에는 메타 인터페이스가 삭제됩니다.

3. 》》》페이지 점프 값

사실 이는 다음과 같은 형식으로 매우 간단합니다.

url?key=value&key1=value1

테스트 후 전달된 매개변수는 URIEncoded가 아닌 경우 잘못된 문자 없이 중국어를 전송합니다. 매개변수 길이는 테스트되지 않습니다.

3. 페이지 점프를 올바르게 사용하는 방법

공식 규정에 따르면 미니 프로그램은 동시에 최대

만 존재할 수 있습니다. 페이지를 닫으면 최대 5개의 새 페이지가 열리고

입니다. 홈 페이지에서 보조 페이지로 점프하고 홈 페이지를 다시 렌더링하지 않고 보조 페이지에서 돌아가는 등의 되돌릴 수 있는 작업에는 wx.navigateTo를 사용하세요.

1. 되돌릴 수 없는 작업의 경우 wx.redirectTo를 사용합니다. 예를 들어 사용자가 성공적으로 로그인하면 로그인 페이지가 닫히고 로그인 인터페이스로 돌아갈 수 없습니다.

2. 일부 소개 페이지와 기타 일반적이지 않은 페이지의 경우 wx.redirectTo 또는 wx.navigatrBack

3. 유사한 9각형 그리드 및 목록 항목의 경우

4. 홈페이지에서 wx.redirectTo를 사용하지 마세요. 이렇게 하면 애플리케이션이 홈페이지로 돌아갈 수 없게 됩니다.

5. 요구사항을 단순화하고 핵심 기능은 2~3페이지로 완성됩니다. 장샤오룽의 '작지만 아름다운' 추구를 구현한 것입니다.

6. 페이지 스택

스택 형식(선입, 후출)으로 페이지 간의 관계를 유지합니다.

첫 번째 요소는 홈 페이지입니다. 마지막 요소는 현재 페이지입니다.

wx.navigateTo를 사용하여 새 페이지를 열 때마다 페이지 스택 크기가 5에 도달할 때까지 페이지 스택 크기가 1씩 증가합니다. 🎜>

1. wx.navigateTo를 사용하여 인터페이스를 반복적으로 엽니다

   
   

2. 위 그림에서 wx.navigateTo를 사용하는 경우 4단계 페이지에서 2단계 페이지로 점프하면 이때 보조 페이지의 초기 상태와 동일한 인터페이스가 페이지 스택의 맨 위에 추가되지만 두 페이지 상태는

   독립
   . 페이지 스택 크기가 1만큼 증가합니다

   . 페이지 스택 크기가 5이면 wx.navigateTo가 유효하지 않습니다.

wx.redirectTo를 사용하여 리디렉션하세요

1. 위 그림에서 wx.redirectTo를 사용하여 4레벨 페이지에서 2레벨 페이지로 리디렉션하면 4레벨 페이지가 닫히고 두 번째 수준 페이지는 네 번째 수준 페이지를 대체하는 데 사용됩니다. 그러나 두 페이지 상태는 독립적입니다.

   현재 페이지 스택의 크기는 변경되지 않습니다. wx.navigateTo 사용과의 차이점에 유의하세요.
   

1. 으로 돌아가려면 위 그림에서 현재 페이지가 5단계 페이지, wx.navigateBack 사용:

   
   

   delta가 1이면 5단계 페이지를 닫고 현재 페이지는 4단계 페이지이며 페이지 스택 크기 1만큼 감소합니다.

위에서는 wx.navigateTo, wx.redirectTo, wx.navigateBack을 사용하여 페이지 스택에서 페이지 스택 작업에 ​​영향을 줍니다. 일상생활에서는 사용되지 않을 수도 있지만 여전히 그렇습니다. 그 뒤에 있는 원리를 이해하는 것이 필요합니다.

페이지 스택을 학습하면 최소한 다음 사항을 알 수 있습니다.

• 미니 프로그램이 실행 중일 때 초기화된 속성과 메서드를 얻을 수 있습니다. 페이지

• 현재 페이지 경로를 동적으로 가져옵니다

• 페이지가 자동으로 이동합니다

• getCurrentPages()를 전달할 수 있습니다. 페이지 객체를 가져오고 현재가 아닌 페이지 js

요약

• wx.navigateTo가 증가합니다. 페이지 스택 크기가 5가 될 때까지 페이지 스택 크기

• wx.redirectTo는 페이지 스택 크기를 늘리지 않습니다.

• wx.navigateBack은 페이지 스택 크기를 줄입니다. 페이지 스택 크기는 1

[관련 권장 사항]

WeChat 공개 계정 플랫폼 소스 코드 다운로드

WeChat 투표 소스 코드

WeChat Lala Takeout 2.2.4 WeChat Rubik's Cube 소스 코드의 복호화된 오픈 소스 버전

위 내용은 WeChat 개발 시작하기(8) 페이지 라우팅의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!