How to transfer data between mini program pages

I have been working on a mini program project recently and found that some data often needs to be passed between the pages of the mini program. Based on my own understanding and familiarity, I have concluded that there are several different data transmission methods for different data requirements. Here is a brief introduction and summary.

The first type: pass through the url when the page jumps

When using wx.navigateTo and wx.redirectTo, some data can be Put it in the url, get it and initialize it when the new page is onLoad.

//pageA.js

// Navigate
wx.navigateTo({
  url: '../pageB/pageB?name=lin&gender=male',
})

// Redirect
wx.redirectTo({
  url: '../pageB/pageB?name=lin&gender=male',
})

// pageB.js
...
Page({
  onLoad: function(option){
    console.log(option.name + 'is' + option.gender);
    this.setData({
      option: option
    });
  }
})

Issues to note:

1. When using wx.navigateTo and wx.redirectTo, jumping to the tab is not allowed. Contained pages;
2. onLoad is only executed once;

Applicable:
This method is generally suitable for a small amount of data transfer between a few pages. For example, page B needs 1-2 data from page A, etc.

Second type: Use global variables to transfer

Define global variables in the app.js file globalData. The old page will store the data to be transferred in it, and the new page will store the data to be transferred in it. The page calls global variables to obtain the passed data value.

// app.js

App({
     // 全局变量
  globalData: {
    name: null
  }
})

//pageA.js
···
getApp().globalData.name = "lin";


//pageB.js
···
this.setData({
  userName: getApp().globalData.name
});

Issues to note:

1. When using, directly use getApp() to get the stored information.

Applicable:
This method is generally suitable for multiple pages or all pages that need to obtain and use the same data, such as user information obtained as soon as you enter the homepage;

Third method: Use local cache

Use local cache in mini programStorage. The old page will store the transferred data in the cache, and the new page will get it by calling the API to get the cache. data.

//pageA.js
···
wx.setStorageSync('sessionId', res.sessionId);


//pageB.js
···
var sessionId = wx.getStorageSync('sessionId');

Things to note:

1. Every time Storage is saved, the original content corresponding to the key will be overwritten.
2. If the user actively deletes the applet or is cleared by the system due to storage space issues, the data in Storage will be cleared.
3. The maximum data length allowed to be stored in a single key is 1MB, and the upper limit of all data storage is 10MB.

Applicable:
This method is generally suitable for data that needs to be retained even if the applet exits and then re-enters, similar to the retention of login status, etc.

Recommended tutorial: "WeChat Mini Program"

The above is the detailed content of How to transfer data between mini program pages. For more information, please follow other related articles on the PHP Chinese website!