Explication détaillée du processus de transfert de données lorsque l'applet WeChat revient de la page enfant vers la page parent

On sait que dans l'applet WeChat, lorsqu'on passe d'une page à une autre, on peut généralement transporter des paramètres via l'url lors d'une navigation ou d'une redirection, puis obtenir ces paramètres d'url dans les paramètres de la fonction onLoad de la page cible. Par exemple :

// 源页面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
  }
})

Cependant, cette méthode n'est efficace que lorsque la page cible n'a pas encore été créée. Car la méthode onLoad d’une page n’est exécutée qu’une seule fois au cours du cycle de vie de la page.

Considérons le scénario suivant :

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

Pour un exemple plus pratique, comme le montre la figure ci-dessous, je remplis les données dans la page A de ce formulaire :

Page A

Ensuite, sur cette page, il y a un bouton de recherche. En cliquant sur le bouton, vous passerez à une autre page de recherche de code de sécurité B :

Page B

Lorsque je sélectionne un code de sécurité dans cette liste de recherche, je reviendrai à la page du formulaire précédent, continuez mon inachevé opérations de remplissage et de soumission de formulaires.

Ce scénario est très raisonnable et courant.

Mais réfléchissons-y, comment renvoyer le code de sécurité sélectionné dans la page B à la page A en quittant la page B et en revenant à la page A ? Comment utiliser l'URL pour transporter des paramètres dansnavigaTo() ?

Sur la base du cycle de vie de la page, notre réponse est : Non !

Alors que peut-on faire ?

Méthode 1 : Utiliser le stockage global des données

• Stockez les données à transmettre sur l'objet App (comme l'attribut globalData).

• Les données à transférer sont stockées dans le cache de données local (Storage) du mini programme.

Par exemple, lorsque l'on s'apprête à quitter la page B, on effectue l'appel suivant :

//=== 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();   //返回上一个页面
  }
})

De cette façon, en revenant à la page précédente, nous pouvons En lisant ces zones de stockage globales, nous pouvons obtenir les données dont nous avons besoin.

Cependant, cette méthode présente également des inconvénients évidents. Puisqu'il s'agit d'un magasin de données global, lorsque vous stockez ces données, vous devez gérer soigneusement les données globales (lorsqu'elles sont détruites), sinon des effets secondaires se produiront si vous ne faites pas attention.

Méthode 2 : obtenir et exploiter directement l'objet Page cible à partir de la pile de routage de page

Cette méthode obtient la pile de routage de page actuelle en appelant l'API du mini programme : getCurrentPages() Information, l'information correspondante L'objet Page est stocké dans cette pile de routage selon l'ordre de routage de la page. On peut facilement obtenir l'objet Page complet de la page précédente, permettant d'appeler directement les propriétés et méthodes de l'objet Page.

Comme indiqué ci-dessous :

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

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

Par rapport à la méthode de stockage globale des données, cette méthode est beaucoup plus claire en termes de logique et il n'y a pas de travail de gestion supplémentaire pour la destruction des données.

Bref, à l'heure actuelle, si vous rencontrez un tel scénario, je vous recommande d'utiliser la méthode 2 pour concevoir votre code. J'espère également que le cadre du mini-programme pourra introduire une manière meilleure et plus élégante de résoudre ce problème de retour de données.

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!