The use of WeChat mini program development routing

We usually understand routing as the process of determining the network range of the end-to-end path when packets are sent from source to destination;

Borrowing the above definition, we can understand Mini program page routing, rules for jumping from one page to another page according to routing rules (path).

Through this article, you can learn:

1. Which situations will trigger page jumps

2. How to jump Page

3. Page parameters

4. Page stack

》》》Which situations will trigger page jump

1. Start the small program and initialize the first page

2. Open a new page, call API wx.navigateTo or use the component

3. Page redirection, call API wx.redirectTo or use the component

4. To return to the page, call API wx.navigateBack or the user presses the return button in the upper left corner

5. tarbar switch

All pages must be registered in app.json, for example:

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

How to jump to the page

1. Use wx.navigateTo interface Jump, original page remains .

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

1. 使用wx.redirectTo接口跳转，关闭原页面,不能返回。

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

1. 3.使用组件跳转。

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

1. 当该组件添加redirect属性时，等同于wx.redirectTo接口；默认redirect属性为false，等同于wx.navigateTo接口。

2. 用户点击左上角返回按钮，或调用wx.navigateBack接口返回上一页。

wx.navigateBack({
delta: 1
})

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

页面跳转传值

其实这个很简单,形如：

url?key=value&key1=value1

经过测试，传递的参数没有被URIEncode,传递中文没有乱码。参数长度未测试。

如何正确使用页面跳转

官方规定小程序最多只能有五个页面同时存在，意思是在不关闭页面的情况，最多新开五个页面，页面深度为5。

1. For reversible operations, use wx.navigateTo, such as jumping from the homepage to the secondary page, and returning from the secondary page without re-rendering the homepage

2. For irreversible operations, use wx.redirectTo. For example, after the user successfully logs in, the login page is closed and cannot return to the login interface.

3. For some introductory and other uncommon pages wx.redirectTo or wx.navigatrBack

4. For similar nine-square grid and list items, use Jump

5. Do not use wx.redirectTo on the homepage, as this will cause the application to be unable to return to the homepage

6. Simplify requirements and processes; Completing the core functions on two or three pages is the embodiment of Zhang Xiaolong's pursuit of "small but beautiful"

##Page stack

Page stack is stacked ( The relationship between pages is maintained in the form of first in, last out);

The applet provides the getCurrentPages() function to obtain the page stack,
The first element is the home page, and the last element is the current page.

1. Every time wx.navigateTo is used to open a new page, the page stack size increases by 1 until the page stack size reaches 5;

   
   

2. Use wx.navigateTo to repeatedly open the interface

   
   In the above figure, if wx.navigateTo is used to jump from the fourth-level page to the second-level page, it will be on the top of the page stack. Add an interface that is the same as the initial state of the secondary page, but the two page states are
   independent. The page stack size will be increased by 1. If the page stack size is 5, wx.navigateTo will be invalid

3. Use wx.redirectTo to redirect
   
   In the above figure, if wx.redirectTo is used to redirect from the fourth-level page to the second-level page, the fourth-level page will be closed. level page, and use the second level page to replace the fourth level page, but the status of the two pages is independent. The page stack size at this time remains unchanged. Please note the difference from using wx.navigateTo.

4. Use wx.navigateBack to return
   
   In the above picture, if the current page is a five-level page, use wx.navigateBack:

• When delta is 1, the fifth-level page is closed, the current page is a fourth-level page, and the page stack size is reduced by 1;

• When delta is 2, close the fifth-level page and the fourth-level page in sequence. The current page is a third-level page, and the page stack size is reduced by 2;

• and so on, until the bottom of the stack, that is front page.

The above use of wx.navigateTo, wx.redirectTo, wx.navigateBack page in and out operations affects the page stack. It may not be used in daily life, but it is still necessary to understand the principles behind it. .

By learning the page stack, you can at least know:

• When the mini program is running, you can obtain the properties and methods of the initialized page

• Dynamicly obtain the current page path

• The page automatically jumps

• You can pass getCurrentPages () Get the page object and execute methods in non-current page js

Summary

• wx.navigateTo will increase the page stack size until the page stack size is 5

• wx .redirectTo will not increase the page stack size

• wx.navigateBack will reduce the page stack size until the page stack size is 1

I believe I read it You have mastered the method in the case of this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to operate js to find the longest palindrome string in a string

WeChat applet development How to use switchTab

The above is the detailed content of The use of WeChat mini program development routing. For more information, please follow other related articles on the PHP Chinese website!