Home > Article > WeChat Applet > 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:
Which situations will trigger page jumps
How to jump Page
Page parameters
Page stack
Start the small program and initialize the first page
Open a new page, call API wx.navigateTo or use the component 57a737e6177310cdb6fcd032ddad3df4
Page redirection, call API wx.redirectTo or use the component 57a737e6177310cdb6fcd032ddad3df4
To return to the page, call API wx.navigateBack or the user presses the return button in the upper left corner
tarbar switch
All pages must be registered in app.json, for example:
{ "pages": [ "pages/index/index", "pages/logs/index" ] }
Use wx.navigateTo interface Jump, original page remains .
wx.navigateTo({ //目的页面地址 url: 'pages/logs/index', success: function(res){}, ... })
使用wx.redirectTo接口跳转,关闭原页面,不能返回。
wx.redirectTo({ //目的页面地址 url: 'pages/logs/index', success: function(res){}, ... })
3.使用组件57a737e6177310cdb6fcd032ddad3df4跳转。
<navigator url="pages/logs/index" hover-class="navigator-hover">跳转</navigator>
当该组件添加redirect属性时,等同于wx.redirectTo接口;默认redirect属性为false,等同于wx.navigateTo接口。
用户点击左上角返回按钮,或调用wx.navigateBack接口返回上一页。
wx.navigateBack({ delta: 1 })
delta为1时表示返回上一页,为2时表示上上一页,以此类推;如果dalta大于已打开的页面总数,则返回到首页。返回后,元界面会销毁。
其实这个很简单,形如:
url?key=value&key1=value1
经过测试,传递的参数没有被URIEncode,传递中文没有乱码。参数长度未测试。
官方规定小程序最多只能有五个页面同时存在,意思是在不关闭页面的情况,最多新开五个页面,页面深度为5。
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
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.
For some introductory and other uncommon pages wx.redirectTo or wx.navigatrBack
For similar nine-square grid and list items, use 57a737e6177310cdb6fcd032ddad3df4Jump
Do not use wx.redirectTo on the homepage, as this will cause the application to be unable to return to the homepage
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"
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.
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
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.
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!