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

hzc
Libérer: 2020-07-01 09:55:11
avant
2746 Les gens l'ont consulté

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
    });
  }
})
Copier après la connexion

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
});
Copier après la connexion

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');
Copier après la connexion

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!

Étiquettes associées:
source:jianshu.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal