Detailed explanation of the data transfer process when the WeChat applet returns from the child page to the parent page

We know that in the WeChat applet, when going from one page to another, you can generally carry parameters through the url when navigating or redirecting, and then obtain these url parameters in the onLoad function parameters of the target page. For example:

// 源页面A相关代码
wx.navigateTo({
  url: "/pages/mypage/mypage?a=1&b=2"
})

// 目标页面B相关代码
Page({
  onLoad: function (options) {
    var a = options.a; // 值：1
    var b = options.b; // 值：2
  }
})

However, this method is only effective when the target page has not been created yet. Because the onLoad method of a page is only executed once during the life cycle of the page.

Let’s consider the following scenario:

1. 在【页面A】中调用wx.navigateTo方法跳转到【页面B】
2. 然后从【页面B】返回【页面A】, 并将【页面B】中的一些数据传回【页面A】

For a more practical example, as shown in the figure below, I fill in the data in this form page A:

A page

Then on this page, there is a search button. Clicking the button will jump to another securities code search page B:

Page B

When I select a security code in this search list, I will return to the previous form page and continue my unfinished business. Completed form filling and submission operations.

This scenario is very reasonable and common.

But let’s think about it, how can we return the security code selected in page B to page A when exiting page B and returning to page A? How to use url to carry parameters in navigateTo()?

Based on the Page life cycle, our answer is: No!

So what can be done?

Method 1: Use global data storage

• Store the data to be transferred on the App object (such as the globalData attribute).

• Store the data to be transferred in the local data cache (Storage) of the mini program.

For example, when we are about to exit page B, we make the following call:

//=== 1. 存储到app对象上的方式 ========
var app = getApp()
app.globalData.mydata = {a:1, b:2};  //存储数据到app对象上
wx.navigateBack();  //返回上一个页面

//=== 2.存储到数据缓存的方式 =========
wx.setStorage({
  key: "mydata",
  data: {a:1, b:2},
  success: function () {
    wx.navigateBack();   //返回上一个页面
  }
})

In this way, when returning to the previous page, we can read Take these global storage areas to get the data we need.

However, this method also has obvious shortcomings. Since it is a global data store, when you store that data, you must carefully manage the global data (when it is destroyed), otherwise side effects will occur if you are not careful.

Method 2: Directly obtain and operate the target Page object from the page routing stack

This method is to obtain the current page routing stack by calling the API of the applet: getCurrentPages() Information, the corresponding Page object is stored in this routing stack according to the routing order of the page. We can easily obtain the complete Page object of the previous page, making it possible to directly call the properties and methods of the Page object.

As shown below:

var pages = getCurrentPages();
var currPage = pages[pages.length - 1];   //当前页面
var prevPage = pages[pages.length - 2];  //上一个页面

//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
prevPage.setData({
  mydata: {a:1, b:2}
})

Compared with the global data storage method, this method is much clearer in logic, and there is no additional management work for data destruction.

In short, at present, if you encounter such a scenario, I recommend you to use method 2 to design your code. I also hope that the mini program framework can introduce a better and more elegant way to solve this data return problem.

The above is the detailed content of Detailed explanation of the data transfer process when the WeChat applet returns from the child page to the parent page. For more information, please follow other related articles on the PHP Chinese website!