Comment transférer des données entre les mini pages du programme

J'ai récemment travaillé sur un projet de mini-programme et j'ai découvert que certaines données doivent souvent être transmises entre les pages du mini-programme. Sur la base de ma propre compréhension et de ma familiarité, j'ai conclu qu'il existe plusieurs méthodes de transmission de données différentes pour différentes exigences en matière de données. Voici une brève introduction et un résumé.

Le premier type : passer par l'url lorsque la page saute

Lors de l'utilisation de wx.navigateTo et wx.redirectTo, vous pouvez mettre une partie des données dans l'url et l'ajouter au nouveau page onLoad Obtenu et initialisé quand.

//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
    });
  }
})

Problèmes à noter :

1. Lors de l'utilisation de wx.navigateTo et wx.redirectTo, il n'est pas permis de sauter à la page contenue dans l'onglet
2. ; onLoadExécutée une seule fois ;

Applicable :
Cette méthode convient généralement à une petite quantité de transfert de données entre quelques pages, comme la page B nécessitant 1 à 2 données de la page A. , etc.

Deuxième : utilisez des variables globales pour transmettre

Définissez des variables globales globalData dans le fichier app.js. L'ancienne page y stockera les données à transmettre, et la nouvelle page le fera. appelle la variable globale. Obtenez la valeur des données transmises.

// app.js

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

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


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

Choses à noter : lorsque vous utilisez

1. , utilisez getApp() directement pour obtenir les informations stockées.

Applicable :
Cette méthode convient généralement à plusieurs pages ou toutes les pages doivent obtenir et utiliser les mêmes données, telles que les informations utilisateur obtenues dès que vous entrez sur la page d'accueil

 ;

Troisième méthode : Utiliser le cache local

Utiliser le cache local dans le mini programmeStorage L'ancienne page stockera les données transférées dans le cache, et la nouvelle page obtiendra les données en appelant l'API. pour récupérer le cache.

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


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

Choses à noter :

1. Le stockage écrasera le contenu original correspondant à la clé à chaque fois qu'elle sera enregistrée.
2. Si l'utilisateur supprime activement le mini-programme ou est effacé par le système en raison de problèmes d'espace de stockage, les données du stockage seront effacées.
3. La longueur maximale des données pouvant être stockées dans une seule clé est de 1 Mo et la limite supérieure de tout le stockage de données est de 10 Mo.

Applicable :
Cette méthode convient généralement aux données qui doivent être conservées même si l'applet quitte puis rentre, de la même manière que la conservation du statut de connexion, etc.

Tutoriel recommandé : "Programme WeChat Mini"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!