Summary of knowledge points on page routing of WeChat mini programs

This article brings you relevant knowledge about WeChat Mini Program, which mainly introduces the relevant content about page routing. Routing refers to the determination of the destination when the packet is sent from the source to the destination. Let’s take a look at the network-wide processes of end paths. I hope it will be helpful to everyone.

[Related learning recommendations: 小program learning tutorial]

What is routing?

Routing refers to the network-wide process of determining the end-to-end path of a packet from source to destination. We can understand WeChat applet page routing and the rules for jumping from one page to another based on routing rules (paths).

1. What will trigger page jump

1. Start the small program and initialize the first page
2. Jump to the new page and call wx.navigateTo or <navigator />
3. page redirection, call wx.redirectTo or <navigator />
4. To return the page, call wx.navigateBack , the return button in the upper left corner of the page
5. wx.switchTabimplementationtabBar Page switching

Tips: All pages must be registered in app.json, such as

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

2. Several ways to implement page routing in WeChat mini programs

1. wx.navigateTo,Retain the current page and jump to a certain point in the application page, but cannot jump to the tabbar page

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

2. wx.redirectTo,Close the current page and jump to a page within the application , but it is not allowed to jump to the tabbar page

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

3. <navigator />Component jump method

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

4. wx.navigateBackReturn to the previous page

wx.navigateBack({
	delta: 1,
})

Tips: When delta is 1, it means returning to the previous page , when it is 2, it means going to the previous page, and so on; if dalta is greater than the total number of opened pages, it returns to the home page. After returning, the meta interface will be destroyed

5. wx.switchTabJump to the tabBar page and close all other non-tabBar pages
   app.json:

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

index.js:

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

3. Mini Program Routing Implementation Principle

Mini program routing is implemented by oneself It is managed by stack (first in, first out).

When we jump from page A to page B through wx.navigateTo or <navigator/>. The changes in the routing stack are as follows.

The routing stack initially only contains page A. When wx.navigateTo is used to jump, page B is pushed into the routing stack and displayed on the interface. A hidden.

When we use wx.navigateBack to return

then wx.redirectTo and wx.navigateToWhat is the difference?

If we are currently on the secondary page B, we use wx.redirectTo to jump to page C. The process is as follows.

If we are currently on secondary page B, we use wx.redirectTo to jump to page C. The process is as follows.
[External link image transfer...(img-mkPnbKug-1650431194878)]

Page B will be popped out, and then page C will be pushed into the stack. At this time, there are still only two pages in the stack.

[Related learning recommendations: 小program learning tutorial]

The above is the detailed content of Summary of knowledge points on page routing of WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!