Implémentation de la communication de paramètres sur plusieurs pages dans l'applet WeChat

Je suis nouveau dans le mini programme WeChat et je ne connais pas grand-chose à la syntaxe et aux attributs qu'il contient. J'étudie actuellement dur L'article suivant vous présente principalement le paramètre multi-pages. en passant dans le mini programme WeChat. Les informations pertinentes sur la communication sont un résumé de ce que j'ai étudié récemment. Les amis qui en ont besoin peuvent s'y référer.

Avant-propos

Les mini-programmes WeChat deviennent de plus en plus populaires et de nombreuses entreprises convertissent les codes natifs en codes de mini-programmes WeChat . Pendant le processus de développement, comme la méthode de l'applet WeChat wx.navigateBack ne prend pas en charge le retour des paramètres, certaines pages, en particulier lors du passage de la page de liste à la page de détails, l'utilisateur a modifié le statut sur la page de détails. Après le retour, qu'il s'agisse d'actualiser ou non la page, l'expérience n'est pas très bonne. Dans android, nous utilisons généralement la méthode setresult pour renvoyer les paramètres, ou utilisons directement le framework rxjava ou le framework eventbus pour résoudre de tels problèmes.

Analyse commerciale

Ce type d'exigence signifie probablement : une page entre dans la page B, la page B revient et passe La valeur est donnée à A.

Route de la découverte

Au début, je voulais adopter une approche paresseuse et utiliser wx.setStorage Le cache de WeChat est stocké dans la page B, retourne à la page A et appelle onshow dans la méthode wx.getStorage pour lire le cache afin d'implémenter cette fonction. Cependant, si vous pensez que la solution est trop opportuniste, elle entraînera également de nombreux dangers cachés pour la maintenance future.
Ensuite, j'ai trouvé un moyen d'obtenir le page précédent sur Internet, qui peut également réaliser cette fonction. Une partie du code est la suivante :

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

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

Après y avoir bien réfléchi, le. le code n'est pas très sûr, car il peut y avoir plusieurs entrées vers la page B, ce qui provoquera des erreurs dans la page obtenue.

J'étais à bout de nerfs, mais tout à coup j'ai pensé que l'applet WeChat supportait js, puis j'ai trouvé une bibliothèque js légère, et c'est le mode observateur, qui est le type que je veux . Alors, le plaisir commence

introduction de onfire.js

onfire.js est un événement très simple Bibliothèque Javascript distribuée (seulement 0,9ko), simple et pratique.

peut être utilisé pour :

• Diffusion d'événements simples ; > Dans

  react
/vue.js/angular pour une implémentation légère entre les composants

• abonnement et publication d'événements

•  ;
  

Pratique

Les pensées sont les suivantes :

Page Un premier s'abonne à un événement et définit la méthode de traitement.

• Lorsque la page B revient,

  envoyez un message
.

• Se désinscrire lorsque la page A est désinstallée.

• 
  

  Un code de page :

Appelez directement la méthode pour vous abonner à un message nommé clé, et il n'y a pas de paramètres de transfert. Si vous devez transmettre des paramètres, ajoutez simplement des paramètres directement dans

var onfire = require("../utils/onfire.js");
var that;
var eventObj = onfire.on('key', function () {
 //做具体的事
});

Page({
 data: {
 },
 onLoad: function(options) {
 // Do some initialize when page load.
 },
 onReady: function() {
 // Do something when page ready.
 },
 onUnload: function (e) {
 onfire.un('key');
 onfire.un(eventObj2);
 }
})

onfire.onfunctionvar eventObj = onfire.on('key', function (data)... Remarque :

doit se désinscrire des messages de dans et se dissocier de . onUnloadkeyeventObjDans la page B, ajoutez le code dans le lieu de rappel

 onfire.fire('key');//key为上文中订阅的消息
 //有参数时
 onfire.fire('key','test');

Il ressort du code que la méthode est en fait appelée lors de l'abonnement à la méthode

 function _bind(eventName, callback, is_one, context) {
 if (typeof eventName !== string_str || typeof callback !== function_str) {
  throw new Error('args: '+string_str+', '+function_str+'');
 }
 if (! hasOwnKey(onfireEvents, eventName)) {
  onfireEvents[eventName] = {};
 }
 onfireEvents[eventName][++cnt] = [callback, is_one, context];

 return [eventName, cnt];
 }

pour. stocker l'onObjet_bind abonné. La méthode d'envoi de message appelle essentiellement la méthode

 function _fire_func(eventName, args) {
 if (hasOwnKey(onfireEvents, eventName)) {
  _each(onfireEvents[eventName], function(key, item) {
  item[0].apply(item[2], args); //执行订阅时的方法
  if (item[1]) delete onfireEvents[eventName][key]; // 当类型为只订阅一次时，通知后即移除自己。
  });
 }
 }

fire_fire_funcÉtant donné que la désinstallation prend en charge la désinstallation par key, objet et méthode, vous devez d'abord déterminer le type, puis dissocier selon les règles respectives.

 function un(event) {
 var eventName, key, r = false, type = typeof event;
 if (type === string_str) {
  // 如果存在key值，则移除数组
  if (hasOwnKey(onfireEvents, event)) {
  delete onfireEvents[event];
  return true;
  }
  return false;
 }
 else if (type === 'object') {
  eventName = event[0];
  key = event[1];
  //如果找到这个对象则卸载
  if (hasOwnKey(onfireEvents, eventName) && hasOwnKey(onfireEvents[eventName], key)) {
  delete onfireEvents[eventName][key];
  return true;
  }
  //否则返回false
  return false;
 }
 else if (type === function_str) {
  //两层循环来判断是否是方法名
  _each(onfireEvents, function(key_1, item_1) {
  _each(item_1, function(key_2, item_2) {
   if (item_2[0] === event) {
   delete onfireEvents[key_1][key_2];
   r = true;
   }
  });
  });
  return r;
 }
 return true;
 }

keyRésumé

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!