When doing the small application project, using navigateTo page after the jump, click on the upper left corner or use navigateBack to return to, always according to the previous page to enter order to display the page, then the problem comes, they jump rule is what kind of? How to use it flexibly in the actual business?

What is a page stack?

First of all to understand the micro channel small programRuntime environment: The running environment of the small program is divided into the rendering layer and the logical layer, in which WXML template and WXSS style work in the rendering layer, JS script work in the logical layer. The rendering layer and logic layer of the small program are managed by two threads respectively: the interface of the rendering layer uses WebView to render; The logic layer uses JsCore thread to run JS script. A small program has multiple interfaces, so there are multiple WebView threads in the rendering layer. The communication of the two threads will be transferred through the wechat client, and the network request sent by the logical layer will also be forwarded through the Native. The communication model of the small program is shown in the following figure.

We can see that a page is rendered using a WebView thread. If 10 pages are opened, 10 WebView threads are opened, and the 10 WebView threads in memory are called page stacks. Of course, applets will also limit this memory, the current page stack limit is no more than ten. The page routing in the applet is controlled by the applet framework itself. We don’t want to manage it manually. The applet framework manages all interfaces through a page stack design.

For example: get the page stack in the parent page first:

const page = getCurrentPages(); / / the parent page
console.log('Parent page', page); / / the parent page
Copy the code

NavigateTo wx. NavigateTo wx. NavigateTo wx. NavigateTo

const page = getCurrentPages(); / / child pages
console.log('Child pages', page); / / child pages
Copy the code

Output:

As you can see from the above example, we can use getCurrentPages() to get the current Page stack in the Page, and get an array where each item is the Page object for each Page (i.e. this object in the Page).

Page stack representation on route hops?

When route switchover occurs, the page stack behaves as follows: Images of | | | page stack performance corresponding routing hop API | | : – : | : – : | : – : | : – : | : – : | : – : | | small program initializes the new page into the stack | | | | to open the new page | | new page into the stack Wx. NavigateTo or using the component | | page redirects | current page out of the stack, the new page into the stack | wx. RedirectTo or using the component | | page back | page constantly out of the stack, Until the target page | wx. NavigateBack or using the component or user click the upper left corner to return to a button | | Tab to switch | all pages out of the stack, Leaving only the new Tab page | wx. SwitchTab or switching components or the user Tab | | heavy load | all pages out of the stack, leaving only the new page | wx. | reLaunch or use components

When we do the project, the clever use of routing and page stack will save a lot of code, and the user experience will be improved accordingly. Therefore, before starting the project, it is very important to determine the page jump rules.

Practical application of page stack analysis

Next, we analyze the process of page stack change. From the analysis, we need to understand an important question is that when the customer presses the back button, it will jump to which interface. This is the significance of our analysis of page stack change. First we call navigateTo twice in the page, and the page stack looks like this

The screen displayed is pageC, and if the customer returns at this point everything will be fine. The first screen to fall back is pageB, then pageA. If you call wx.redirectTo({URL :’pageD’}) from the pageC interface, this is not the case. Let’s see how the page stack looks when we jump to pageD.

Based on the stack, we can figure out. If you use wx.redirectTo to jump to the pageD page, you will not be able to go back to pageC again. Instead, you will go back to pageB. Through the analysis of the page stack above, we can see that the change of the stack will affect the order of the customer to return the page, so it is very important to use different jump methods reasonably according to their own needs. If not used properly, it will lead to confusion and confusion. The following analysis is a case of turning over repeated pages:

As shown in the figure, there are two identical pageB interfaces in the stack. At this time, if the user presses the exit key, a page will appear twice, and the data in one interface is also old data. NavigateBack ({delta:1}); wx.navigateBack({delta:1}); Roll back the page. Data refresh is done in the onShow function of the page.

Scenario: Confirm order page The user clicks on the upper left corner to return

Scenario: The user directly clicks “Buy now” on the product details page to place an order and enter the page for confirming the order. After the payment is successful, the user jumps to the page for confirming the payment. At this point, the user clicks the arrow in the upper left corner to return to the product. NavigateTo navigateTo wx. RedirectTo navigateTo wx. RedirectTo navigateTo wx

Scenario: Confirm order page user selects existing consignee

NavigateTo navigateTo wx. NavigateTo navigateTo wx. NavigateTo navigateTo wx. NavigateTo navigateTo wx. NavigateTo navigateTo navigateTo navigateTo wx. NavigateTo: wx. NavigateTo: wx. NavigateTo: wx. NavigateTo: wx. NavigateTo: wx. NavigateTo: wx.

const page = getCurrentPages()
if (page.length > 1) {
  page[page.length - 2].setData({consignee: details of a selected consignee//[object]
  })
  wx.navigateBack({
    delta: 1})}Copy the code

As mentioned in the example above, we can use the getCurrentPages() method to get the current Page stack and get an array, where each item is the Page object of each Page. Then we can use the setData method to directly change the data displayed on the previous Page. And go straight back to the previous page.

Official reminder:

Although this method is simple, it is also warned that the page stack data can be modified by itself, but! Be careful; otherwise, page status errors will occur.

Summary: Always think something is missing, but can’t remember… There will always be some new discoveries. In addition, there are thousands of methods. Choose one randomly and choose the appropriate method according to your own business logic.