Detailed description of page Jump and data transmission instances of WeChat applets, applets and Data

Detailed explanations of page Jump and data transmission instances of applets, applets and Data

Page Jump and data transmission of applets

1. Pilot

In Android, both our Activity and Fragment have the concept of stack, and the concept of Stack also exists on the applet page. There are four ways to jump to a applet page:

1. wx. navigateTo (OBJECT );
2. wx. redirectTo (OBJECT );
3. wx. switchTab (OBJECT );
4. wx. navigateBack (OBJECT)
5. Use the corresponding jump function;

Analysis:

1. NavigateTo saves the original page in the page stack. When you jump to the next page, the target page also goes to the stack, you can only click the return button on your phone to go to the previous page;
2. Both redirectTo and switchTab first clear the original page in the stack, and then the target page is added to the stack. Neither of the two jump methods can return to the previous page through the system's return key, instead, exit the applet directly;
3. RedirectTo must be used with tabBar or the jump button in the page. Otherwise, the previous page cannot be returned;
4. The page to which switchTab is redirected must be the page declared in tabBar;
5. The fields defined in tabBar cannot exceed five pages, and the page stack hierarchy of the applet cannot exceed five layers.
6. NavigateBack can only return to the specified page in the page stack. It is generally used with navigateTo.
7. Wx. navigateTo and wx. redirectTo are not allowed to jump to the tabbar page. Only wx. switchTab can be used to jump to the tabbar page.
   

2. Specific page Jump operations

(1) wx. navigateTo (OBJECT)

Retain the current page and jump to a page in the application. You can use wx. navigateBack to return to the original page.

Parameters	Type	Required	Description
Url	String	Yes	The path of the non-tabBar page in the application to be redirected. The path can contain parameters. Between Parameters and paths? Separated, parameter keys and parameter values are connected with =, and different parameters are separated with &; for example, 'path? Key = value & key2 = value2'
Success	Function	No	Callback Function for successful API call
Fail	Function	No	Callback Function for interface call failure
Complete	Function	No	The callback function after the interface call ends. (The callback function is executed if the call succeeds or fails)

Sample Code:

Wx. navigateTo ({url: 'test? Id = 1' // The actual path must be fully written })

//test.jsPage({ onLoad: function(option){ console.log(option.query)  }})

Note: in order not to disturb users when using small programs, we stipulate that the page path can only be five layers. Please try to avoid multi-layer interaction.

(2) wx. redirectTo (OBJECT)

Close the current page to jump to a page in the application.

Parameters	Type	Required	Description
Url	String	Yes	The path of the non-tabBar page in the application to be redirected. The path can contain parameters. Between Parameters and paths? Separated, parameter keys and parameter values are connected with =, and different parameters are separated with &; for example, 'path? Key = value & key2 = value2'
Success	Function	No	Callback Function for successful API call
Fail	Function	No	Callback Function for interface call failure
Complete	Function	No	The callback function after the interface call ends. (The callback function is executed if the call succeeds or fails)

Sample Code:

wx.redirectTo({ url: 'test?id=1'})

(3) wx. switchTab (OBJECT)

Go to the tabBar page and close all other non-tabBar pages.

OBJECT parameter description:

Parameters	Type	Required	Description
Url	String	Yes	The path of the tabBar page to be redirected (the page defined by the tabBar field in app. json is required). The path cannot contain parameters.
Success	Function	No	Callback Function for successful API call
Fail	Function	No	Callback Function for interface call failure
Complete	Function	No	The callback function after the interface call ends. (The callback function is executed if the call succeeds or fails)

Sample Code:

{"TabBar": {"list": [{"pagePath": "index", "text": "Homepage" },{ "pagePath": "other ", "text": "other"}]}

wx.switchTab({ url: '/index'})

(4) wx. navigateBack (OBJECT)

Close the current page and return to the previous page or multi-level page. You can use getCurrentPages () to obtain the current page stack and determine the number of layers to be returned.

OBJECT parameter description:

Parameters	Type	Required	Description
Delta	Number	1	Number of returned pages. If delta is greater than the number of existing pages, return to the home page.

Sample Code:

// Note: When navigateTo is called, the page that calls this method will be added to the stack, but the redirectTo method will not. See the sample code below // here is wx. navigateTo ({url: 'B? Id = 1 '})

// The wx. navigateTo ({url: 'C? Id = 1 '})

// NavigateBack on Page C will return wx. navigateBack ({delta: 2}) on page })

(5) use the <navigator/> label to redirect pages

Navigator

Page Link.

Parameters	Type	Required	Description
Url	String		Jump link in the Application
Redirect	Boolean	False	The method of opening is page redirection, corresponding to wx. redirectTo (will be deprecated, open-type is recommended)
Open-type	String	Navigate	Optional values: 'navigate', 'redirect', and 'switchtab', which correspond to wx. navigateTo, wx. redirectTo, and wx. switchTab.
Hover-class	String	Navigator-hover	Specifies the style class when you click. When hover-class = "none", no click effect is displayed.
Hover-start-time	Number	50	How long will the click State appear after the press and hold, in milliseconds
Hover-stay-time	Number	600	Click-state retention time after the finger is released, in milliseconds

Sample Code:

<Navigator url = "navigate? Title = navigate "hover-class =" navigator-hover "> jump to a new page </navigator> <navigator url =" redirect? Title = redirect "open-type =" redirect "hover-class =" other-navigator-hover "> open on the current page </navigator> <navigator url =" index "open- type = "switchTab" hover-class = "other-navigator-hover"> switch the Tab </navigator>

3. Page routing and lifecycle

(1) page Routing

All the routes on all pages in the Applet are managed by the framework. The routing trigger mode and page lifecycle functions are as follows:

Routing Method	Trigger time	Post-route page	Pre-route page
Initialization	The first page opened by the Applet	OnLoad, onShow
Open New Page	Call API wx. navigateTo or use components	OnLoad, onShow	OnHide
Page redirection	Call API wx. redirectTo or use components	OnLoad, onShow	OnUnload
Page return	Call API wx. navigateBack or press the return button in the upper left corner.	OnShow	OnUnload)
Tab Switch	Call API wx. switchTab or use a component or switch the Tab	For more information, see the following table.

Tab switches the corresponding Life Cycle (take page A and page B as the Tabbar page, Page C is the page opened from page A, and page D is the page opened from Page C as an example ):

Current page	Post-route page	Triggered lifecycle (in order)
A	A	Nothing happend
A	B	A. onHide (), B. onLoad (), B. onShow ()
A	B (open again)	A. onHide (), B. onShow ()
C	A	C. onUnload (), A. onShow ()
C	B	C. onUnload (), B. onLoad (), B. onShow ()
D	B	D. onUnload (), C. onUnload (), B. onLoad (), B. onShow ()
D (enter from share)	A	D. onUnload (), A. onLoad (), A. onShow ()
D (enter from share)	B	D. onUnload (), B. onLoad (), B. onShow ()

4. parameter transfer

(1) passing parameters through paths

The path passing parameters are the same in wx. navigateTo (OBJECT), wx. redirectTo (OBJECT), and <navigator/>.
Sample Code: represented by wx. navigateTo

'''Wx. navigateTo ({url: 'test? Id = 1' // The actual path must be fully written })

//test.jsPage({ onLoad: function(option){ console.log(option.id)  }})

Between Parameters and paths? Separated. The parameter keys and parameter values are connected with =, and different parameters are separated;

Test? In id = 1, id is the parameter key, and 1 is the parameter value.

In the onLoad () method on the target page, the option object is a parameter object. You can use the parameter key to retrieve the parameter value.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!