# Page routing

In Weixin Mini Program, all page creation, destruction, and state transitions are expressed and controlled by page routing. The following briefly describes the page routing logic of the Mini Program.

# The timing of routing

The route is represented as an event, which is sent from the WeChat client to the Weixin Mini Program base library, and the subsequent simultaneous processing of this single route event by the client and base respectively.The initiation of a routing event can be roughly divided into the following two categories:

1. It is initiated by a user's action, such as pressing the return button. When initiated this way, the routing event is executed directly from the client to the repository;

2. Initiated by the developer via an API (e.g.) wx.navigateToor a component (e.g.).When initiated this way, the repository initiates the routing request to the client first, and the client sends the routing event to the repository after confirming that the routing can be executed.In this case, if the routing is determined to be executed, thesuccesscallback function or component'ssuccess]]event will be triggered, otherwise it will triggerfail '.

When a route is determined to execute (the API or component notifiessuccess), there is no action to cancel the route.

When multiple routing events are initiated in a row, if the current routing event is not processed, subsequent routing events wait for the current routin to be processed and line up to execute until all pending routing is processed.

A simple example: the user clicks the back button triggersnavigateBack, Weixin Mini ProgramCall [[in onUnloadon the top page of the page stackwx.redirectTo， Instead of redirecting the page that is currently being destroyed to a new page, it completes the page return and then redirects the new stack top page to the new page after the page returns.

# Page stack

Currently, Weixin Mini Program pages are organized as a combination of a stack of pages and several overhanging pages that are not in the stack.Among them, the page stack stores the pages that are opened by the jump in order, and the tabBar pages that are currently created but not active are in Picture-in-Picture mode (such as video 、 live-player The page in (e.g.) will exist as a hung page.

The global interface getCurrentPages can be used to get the current page stack.

Weixin Mini Program After the cold boot is complete, at least one page will exist in the page stack for the entire duration of the Mini Program's survival (except for the middle state of a route halfway through execution).

The specific behavior of the page stack can be described in detail in the specific routing behavior below.

# Routing listening and response

# Page life periodic function

Each Weixin Mini Program page has several life-periodic functions, such as [[]]onLoad,onShow,onRouteDone,onHide,onUnloadWait. They can be defined when the page is registered and triggered at the appropriate time.All life periodic functions and their meaning and timing can be found in Page interface . The following section also explains how each route will trigger page life periodic functions.

# Page routing listening

Starting with the base library version {% version (3.5.5)%}, the base library provides a set of listening functions for routing events.They are more responsive to a particular route than page lifetime periodic functions.See page Routing Listening .

# Routing Type

Weixin Mini Program The current routing types can be roughly divided into the following seven types:

# 1. Weixin Mini Program Start

• openType:appLaunch

Weixin Mini Program Launch RouteappLaunchIndicates that a new Mini Program is launched and the first page is loaded.appLaunchappears and only once in each Mini Program instance, and the first routing event when each appletic instance starts must be [[]]appLaunch。

How to trigger it

ApLaunchcan only be triggered passively by Weixin Mini Program cold boot, not actively by the developer, and not by other user actions after startup.

Page stack and lifecycle processing

SinceappLaunchmust be the first route on startup, and no page exists before the route, the page stack must be empty.appLaunchcreates the page specified by the routing event and pushes it into the page stack as the only page in the stack.In the process, theonLoad,onShowTwo life cycles will be triggered in sequence.

# 2. Open a new page

• openType:navigateTo

Open New Page RoutingnavigateTomeans to open a new page and push it into the page stack.

How to trigger it

1. Call API [ wx.navigateTo ](<(wx.navigateTo) , Router.navigateTo`]((api/Router))
2. Using component ["] (< (navigator) >)
3. User clicks on a video window (e.g. video )

NavigateTomust target non-tabBar pages.

Page stack and lifecycle processing

NavigateToevent occurs, the current top page of the page stack will be hidden first, triggering theonHidelife cycle;The framework then creates the page specified by the routing event and pushes it into the page stack as the new stack top.In the process, this new page'sonLoad,onShowTwo life cycles will be triggered in sequence.

作为一种特殊情况，如果 navigateTo 事件发生时，页面栈当前的栈顶页面满足小窗模式逻辑，或事件由用户点击视频小窗发起，那么页面栈及生命周期的的处理会有所不同。

# 3. Page Redirect

• openType:redirectTo

Page redirection routingredirectTorepresents the replacement of the current top page of the page stack with a new page.

How to trigger it

1. 调用 API [wx.redirectTo](<(wx.redirectTo) >), Router.redirectTo
2. Using component ["] (< (navigator) >)

The target of redirectTomust be non-tabBar pages.

Page stack and lifecycle processing

When the redirectToevent occurs, the current top page of the page stack is first ejected and destroyed, during which theonUnloadlifecycle of this top page is triggered;The framework then creates the page specified by the routing event and pushes it into the page stack as the new stack top.In the process, this new page'sonLoad,onShowTwo life cycles will be triggered in sequence.

# 4. Page back

• openType:navigateBack

Page Return RoutenavigateBackindicates that several pages on the current top of the page stack are ejected and destroyed in turn.

How to trigger it

1. callAPI [wx.navigateBack](<(wx.navigateBack) >), Router.navigateBack
2. Using component ["] (< (navigator) >)
3. The user presses the return button in the upper left corner, or triggers a return action by the operating system (e.g. press the system return key, slide in the margin of the screen, etc.)
4. User clicks on a video window (e.g. video )

If there is currently only one page in the page stack, thenavigateBackcall request fails (regardless of thedeltaspecified);

If the current number of pages in the page stack is less than thedelta+ 1 (That is, the number of pages after the call will be less than one, andnavigateBackwill pop up to the page at the bottom of the current page stack (i.e., at least one page remains).

Page stack and lifecycle processing

When the navigateBackevent occurs, the current top page of the page stack is ejected and destroyed, triggering theonUnloadlifecycle of this page;The above will be repeated many times until the number of pages that pop up equals the number of specified pages or there is only one page left in the current page stack.After that, theonShowlife cycle of the new top page of the page stack will be triggered.

一种特殊情况是，如果 navigateBack 发生时，页面栈当前的栈顶页面满足小窗模式逻辑，或事件由用户点击视频小窗发起，那么页面栈及生命周期的的处理会有所不同。

# 5. Tab toggle

• openType:switchTab

Tab switch routingswitchTabIndicates switching to a specified tab page.

How to trigger it

1. callAPI [wx.switchTab](<(wx.switchTab) >), Router.switchTab
2. Using component ["] (< (navigator) >)
3. The user clicks the Tab button in the Tab Bar

The target of switchTabmust be tabBar pages.

Page stack and lifecycle processing

SincenavigateToAndredirectToYou cannot specify a tabBar page as a target, so when a tabbar page appears in the page stack, it must be the first page of the page block (that is, the bottom page);At the same time, the framework guarantees that a maximum of one page instance exists for any tabBar page in Weixin Mini Program.switchTabacts on these two points.

When the switchTabevent occurs, if more than one page exists in the current page stack, the current top page of the page stack is ejected and destroyed, triggering theonUnloadlifecycle of this page;The above operation will be repeated several times until there is only one page left in the page stack. Afterwards, different treatments are applied to the pages that remain in the page stack:

• 如果这个页面即为目标 tabBar 页面：
  • If more than one page exists in the page stack at the start of the routing event (i.e. the target tabBar page is not the top page of the stack), trigger the onShow lifecycle of the target tabbar page;
  • Otherwise (the target tabBar page at the beginning of the routing event is the top page of the stack), without triggering any life cycle, it ends directly;

否则（该页面不为目标 tabBar 页面时）：

1. Pop this page out of the page stack;

• 如果这个页面为其他 tabBar 页面，该页面成为悬垂页面，并：
  • If there is only one page in the page stack at the start of the routing event (that is, the tabBar page is the top page of the stack), trigger its onHide lifecycle;

Otherwise (the tabBar page is not at the top of the stack when the routing event starts), does not trigger any of its life cycles;

      <li style="list-style: disc">Otherwise (if this page is not tabBar), destroy the page, triggering the <code>onUnload</code> life cycle;</li>
    
  
   <li style="list-style: decimal"> 
     <ul> 
      <li style="list-style: disc">If the target tabBar page has been created before (now an overhanging page), push it into the page stack, triggering the <code>onShow</code> lifecycle;</li> </ul>  </li> 
      <li style="list-style: disc">Otherwise (there is no instance of the target tabBar page), create the target tabBar page and push it into the page stack, triggering <code>onLoad</code> , <code>onShow</code> life cycle.</li>

# 6. reload

• openType:reLaunch,autoReLaunch

Reloading the routereLaunchorautoReLaunchdestroys all current pages and loads a new page.

The difference between the two openTypes of reload routing is mainly whether it is triggered by the developer (or by the user), and the routing logic of the two openTypes is basically the same.

How to trigger it

1. (reLaunch) CallAPI [wx.reLaunch](<(wx.reLaunch) >), Router.reLaunch
2. (reLaunch) Use components [''] (< (navigator) >)
3. (autoReLaunch) Weixin Mini Program In the background, the user reenters the Mini Program from a scene such as scanning a code or sharing

ReLaunchcan specify any page as a destination page, whether it is the front page of Weixin Mini Program or a tabBar page.

Please note:reLaunchAndautoReLaunchrepresents only one route, does not equal Weixin Mini Program restart, and the Mini Program continues to run on the current AppService . Neither restart the AppService's JavaScript runtime environment, nor re-inject the Mini Program code or trigger theApageonLaunchlifecycle, nor are global variables or global states of various JS being reset.

Page stack and lifecycle processing

When the reLaunchorautoReLaunchevent occurs, all pages in the page stack are ejected from top to bottom and destroyed, triggering the onUnloadlifecycle;All the overhanging pages will then be destroyed one by one in an indeterminate order, triggering theonUnloadlife cycle.When all pages are destroyed, the target page is created and pushed into the page stack to become the only page in the stack, triggering two lifecycles,onLoadandonShow`in turn.

# 7. Close the small window page

• openType:dismissPip

关闭小窗页面路由 dismissPip 表示关闭一个正处于小窗模式的页面。

# Note appended

The logic of handling the switchTabevent is complex, and the following table provides a handy illustration of lifecycle triggers whenswitchTaboccurs under various circumstances.In this table, we assume:

• Taba,tabBfor tabBar pages
• Cis a non-tabBar page, and we will only open it from thetabapage
• Dis a non-tabBar page, and we will only open it from thetabBpage