Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to achieve page jump and data transfer in WeChat Mini Programs". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought. Let's study and learn "how to achieve page jump and data transfer in WeChat Mini Programs"!

WeChat Mini Programs's page jump and data transmission

1. Pioneer

In Android, we Activity and Fragment both have the concept of stack, and WeChat Mini Programs pages also have the concept of stack. There are four ways for WeChat Mini Programs's page to jump:

1.wx.navigateTo (OBJECT)

2.wx.redirectTo (OBJECT)

3.wx.switchTab (OBJECT)

4.wx.navigateBack (OBJECT)

5. Use to implement the corresponding jump function

Analysis:

NavigateTo saves the original page in the page stack, and the target page also enters the stack when you jump to the next page. Only in this case can you jump to the previous page by clicking the phone's back button.

Both redirectTo and switchTab first clear the original page in the stack, and then the target page goes into the stack. Using these two jump methods, you can't return to the previous page through the return key of the system, but directly exit Mini Program.

When using redirectTo, be sure to cooperate with tabBar or jump button again in the page, otherwise you can't go back to the previous page.

The page that switchTab jumps to must be a page declared in tabBar

The fields defined in tabBar cannot exceed 5 pages, and the page stack hierarchy of Mini Program cannot exceed 5 layers.

NavigateBack can only be returned to a specified page in the page stack, which is usually used with navigateTo.

Wx.navigateTo and wx.redirectTo do not allow you to jump to tabbar pages, you can only use wx.switchTab to jump to tabbar pages

two。 Specific operation of page jump

(1) wx.navigateTo (OBJECT)

Keep the current page, jump to a page within the application, and use wx.navigateBack to return to the original page.

Required parameter type indicates that urlString is the path of non-tabBar pages in the application to be redirected, which can be followed by parameters. Use between parameters and paths? Separate, parameter keys and parameter values are connected by =, and different parameters are separated by &. For example, 'path?key=value&key2=value2'successFunction No API calls successful callback function failFunction No API calls failed callback function completeFunction No API calls end callback function (both successful and failed calls will be executed)

Sample code:

Wx.navigateTo ({url: 'test?id=1'// actual path to write full}) / / test.jsPage ({onLoad: function (option) {console.log (option.query)}})

Note: in order not to cause trouble for users when using Mini Program, we stipulate that the page path can only be five layers, please try to avoid multi-level interaction.

(2) wx.redirectTo (OBJECT)

Close the current page and jump to a page within the application.

Required parameter type indicates that urlString is the path of non-tabBar pages in the application to be redirected, which can be followed by parameters. Use between parameters and paths? Separate, parameter keys and parameter values are connected by =, and different parameters are separated by &. For example, 'path?key=value&key2=value2'successFunction No API calls successful callback function failFunction No API calls failed callback function completeFunction No API calls end callback function (both successful and failed calls will be executed)

Sample code:

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

(3) wx.switchTab (OBJECT)

Jump to the tabBar page and close all other non-tabBar pages

OBJECT parameter description:

Parameter type is required indicating that urlString is the path of the tabBar page that needs to be redirected (you need to define it in the tabBar field of app.json). After the path, you cannot call successful callback function failFunction No API call failed callback function failFunction No API call failed callback function completeFunction No API call end callback function (both successful and failed call will be executed)

Sample code:

{"tabBar": {"list": [{"pagePath": "index", "text": "Home"}, {"pagePath": "other", "text": "other"]}} wx.switchTab ({url:'/ index'})

(4) wx.navigateBack (OBJECT)

Close the current page and return to the previous or multi-level page. You can get the current page stack through getCurrentPages () and decide how many layers you need to return.

OBJECT parameter description:

The required parameter type indicates the number of pages returned by deltaNumber1. If the delta is greater than the number of existing pages, return to the home page.

Sample code:

/ / Note: when a navigateTo jump 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 the A page wx.navigateTo ({url: 'Block1'}) / / here is the B page wx.navigateTo ({url:' Caterpillar 1'}) / / in the C page navigateBack, the A page wx.navigateBack ({delta: 2}) will be returned.

(5) use tags to realize page jump

Navigator

Link to the page.

Required description of parameter type urlString

The redirect link redirectBooleanfalse in the application is opened for page redirection, corresponding to wx.redirectTo (will be discarded, it is recommended to use open-type) open-typeStringnavigate optional values' navigate', 'redirect',' switchTab', correspond to the function hover-classStringnavigator-hover of wx.navigateTo, wx.redirectTo, and wx.switchTab to specify the style class when clicked. When hover-class= "none", there is no click state effect how long after hover-start-timeNumber50 is held down Click-state retention time after release of finger hover-stay-timeNumber600 in milliseconds

Sample code:

Jump to a new page to open and switch Tab on the current page

3. Routing and lifecycle of the page

(1) routing of pages

In Mini Program, the routing of all pages is managed by the framework. The trigger method and page lifecycle function of the route are as follows:

The routing method triggers the timing of routing after the page is routed before the page initializes the first page opened by Mini Program onLoad,onShow

Open a new page to call API wx.navigateTo or use component onLoad,onShowonHide page redirection to call API wx.redirectTo or use component onLoad,onShowonUnload page return to call API wx.navigateBack or the user to press the upper left corner return button onShowonUnload (multi-tier pages return each page will trigger onUnload sequentially) Tab switch call API wx.switchTab or use component or user switch Tab for various cases, please refer to the following table

Tab switch the corresponding lifecycle (An and B pages are Tabbar pages, C is a page opened from A page, and D page is a page opened from C page as an example):

Life cycle triggered by the current page after routing (in order) AANothing happendABA.onHide (), B.onLoad (), B.onShow () AB (re-open) A.onHide (), B.onShow () CAC.onUnload (), A.onShow () CBC.onUnload (), B.onLoad (), B.onShow () DBD.onUnload (), C.onUnload (), B.onLoad (), B.onShow () D (enter from sharing) AD.onUnload (), A.onLoad () A.onShow () D (enter from sharing) BD.onUnload (), B.onLoad (), B.onShow ()

4. Parameter transfer

(1) pass parameters through the path

Passing parameters through a path uses the same method in wx.navigateTo (OBJECT), wx.redirectTo (OBJECT), and

Sample code: represented by wx.navigateTo

```wx.navigateTo ({url: 'test?id=1'// actual path to write full}) / / test.jsPage ({onLoad: function (option) {console.log (option.id)}}))

Use between parameters and paths? Separate, parameter keys and parameter values are connected by =, and different parameters are separated by &

Id is the parameter key and 1 is the parameter value in test?id=1

In the destination page, the option object is the parameter object in the onLoad () method, and the parameter value can be extracted through the parameter key.

Thank you for your reading, the above is the content of "how to achieve page jump and data transmission in WeChat Mini Programs". After the study of this article, I believe you have a deeper understanding of how to achieve page jump and data transmission in WeChat Mini Programs. The specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.