Les fonctions et méthodes d'interaction inter-pages entre les mini-programmes

À la fin de l'année dernière, la taille des sous-packages des mini-programmes WeChat a atteint 12 millions. D'une part, cela montre que les mini-programmes ont progressivement libéré des autorisations plus importantes pour les développeurs. montre également que pour certains mini programmes, la taille 8M n'est plus suffisante. Je développe également une application de mini-programme A à B cette année. Voici quelques scénarios d’interaction entre pages.

Pour les besoins métier des applications côté B, la complexité du développement de petits programmes est relativement plus compliquée que celle du développement Web. L’un est le problème du mécanisme de traitement à double thread, et l’autre est le problème de l’interaction entre les piles de pages.

Remarque : l'auteur n'a actuellement besoin que de développer l'applet WeChat. Afin d'utiliser de nouvelles fonctions telles que les propriétés des observateurs de comportements dans la page de l'applet, le constructeur Component a été utilisé pour construire la page. Pour plus de détails, veuillez vous référer au constructeur de composants de l'applet WeChat. Si vous n'avez pas besoin d'un développement multi-terminal, il est recommandé de l'essayer et d'acquérir une bonne expérience.

Catégorie d'optimisation des performances

---

Pour les petits programmes, cliquez sur la page pour déclencher wx.navigateTo pour accéder à d'autres pages. période d'espace vide au milieu. La période de chargement (pour les pages sous-traitées, la période vierge sera plus longue), mais c'est le mécanisme interne du mini programme et il n'y a aucun moyen de l'optimiser. Nous ne pouvons qu’attendre que cette période sans intérêt passe.

Si l'on considère que la première chose après avoir sauté sur la page est la logique de récupération des nombres, pouvons-nous l'optimiser ? La réponse est oui. Nous n'avons aucun moyen d'obtenir directement les données sur la page actuelle puis d'effectuer l'opération de saut (cette opération est encore pire), mais nous pouvons utiliser le cache de la requête en cours. Pour plus de détails, veuillez vous référer à mon article de blog précédent - 3. merveilleuses utilisations des objets Promise.

Le code est le suivant :

const promiseCache = new Map()

export function setCachePromise(key, promise) {
  promiseCache.set(key, promise)
}

export function getCachePromise(key) {
  // 根据key获取当前的数据  
  const promise = promiseCache.get(key)
  // 用完删除，目前只做中转用途，也可以添加其他用途
  promiseCache.delete(key)
  return promise  
}

Créez une carte globale, puis utilisez la carte pour mettre en cache l'objet promis. Avant de sauter, le code est :

// 导入 setCachePromise 函数

Component({
  methods: {
    getBookData(id) {
      const promise = // promise 请求
        setCachePromise(`xxx:${id}`, promise)      
    },  
    handleBookDetailShow(e) {
      const id = e.detail
      this.getBookData(id)
       wx.navigateTo({url: `xx/xx/x?id=${id}`})
    }
  }
})

<.> et jump Le code suivant est également le suivant :

// 导入 getCachePromise 函数

Component({
    properties: {
      id: Number  
    },
    lifetimes: {
      attached () {
        const id = this.data.id  
        // 取得全局缓存的promise
        const bookPromise = getCachePromise(`xxx:${id}`)
        bookPromise.then((res) => {
          // 业务处理
        }).catch(error => {
          // 错误处理  
        })
      }
    },
    methods: {
      getBook() {
        // 获取数据，以便于 错误处理 上拉刷新 等操作  
      }  
    }
})

De cette façon, la logique de récupération et de chargement de la page peut être traitée en même temps. Bien sûr, cela est couplé à la page et ne l'est pas. propice à la suppression et à la modification ultérieures. Mais considérez que s’il n’est ajouté qu’entre les sauts de sous-traitance, cela peut avoir un bon effet.

Si vous souhaitez être non intrusif, vous pouvez étudier plus en détail les conseils pour améliorer la vitesse d'application des mini-programmes WeChat et le cadre wxpage en même temps, en considérant que les utilisateurs de la ToC et de la ToC peuvent avoir. problèmes d'environnement matériel et réseau, cette optimisation est toujours très intéressante.

Bien sûr, afin de réduire le temps de démarrage à froid, l'applet WeChat fournit une fonction de prélecture des données de mise à jour périodique.

Remarque : Le promiseCache ci-dessus n'est utilisé que pour le transfert, pas pour la mise en cache. Si vous envisagez d'ajouter un cache, vous pouvez vous référer à mon article de blog précédent - Solution de mise en cache des requêtes API frontales.

Classe de notification

---

Si interaction côté PC, CRUD des données. Par exemple, si vous modifiez ou supprimez des données sur la page de détails, lorsque vous revenez à la liste, vous pouvez directement appeler les conditions de requête de liste précédemment stockées et interroger à nouveau. Cependant, pour la conception de défilement déroulant du terminal mobile, il existe. aucun moyen d'appeler directement les conditions de requête précédentes pour rechercher.

Si vous entrez dans la page de détails depuis la page de liste, seules les opérations d'ajout ou de modification seront effectuées sur la page de détails. Revenez ensuite à la page de liste. A ce moment, l'utilisateur peut être informé que les données ont été modifiées, et l'utilisateur peut décider s'il souhaite actualiser les données.

Si les données sont modifiées sur la page d'édition :

const app = getApp()

component({
  methods: {
    async handleSave() {
      //...
      app.globalData.xxxChanged = true
      //...  
    }
  }
})

Interface de liste :

const app = getApp()

component({
  pageLifetimes: {
    show() {
      this.confirmThenRefresh()
    }    
  },
  methods: {
    confirmThenRefresh() {
      // 检查 globalData，如果当前没有进行修改，直接返回 
      if(!app.globalData.xxxChanged) return
      wx.showModal({
        // ...
        complete: () => {
          // 无论确认刷新与否，都把数据置为 false 
          app.globalData.xxxChanged = false  
        }  
      })  
    }
  }  
})

Bien sûr, on peut aussi utiliser wx.setStorage ou getCurrentPage pour obtenir la page précédente setData pour effectuer une notification de données afin que les utilisateurs puissent actualiser la page.

Classe de publication par abonnement

---

S'il s'agit uniquement de modifier des données, nous pouvons choisir de laisser l'utilisateur effectuer une opération d'actualisation, mais s'il s'agit d'une opération de suppression Par exemple, si l'utilisateur choisit de ne pas actualiser, puis clique accidentellement sur les données supprimées, une erreur se produira. Par conséquent, s'il est nécessaire de supprimer, il est préférable de modifier la liste avant de revenir à la page de liste pour éviter les erreurs.

mitt

Il existe de nombreuses bibliothèques open source pub/sub sur github S'il n'y a pas d'exigences spécifiques, celle avec le plus petit montant. du code est un gant L'auteur de cette bibliothèque est un développeur qui aime développer des micro-bibliothèques. Le célèbre préacte a également été créé par ce type. Je ne vais pas trop faire d’introduction ici, c’est très simple. Tout le monde pourra peut-être comprendre que le code est le suivant (hors vérification de l'outil de flux) :

export default function mitt(all) {
  all = all || Object.create(null);

  return {
    on(type, handler) {
      (all[type] || (all[type] = [])).push(handler);
    },

    off(type, handler) {
      if (all[type]) {
        all[type].splice(all[type].indexOf(handler) >>> 0, 1);
      }
    },
    emit(type, evt) {
      (all[type] || []).slice().map((handler) => { handler(evt); });
      (all['*'] || []).slice().map((handler) => { handler(type, evt); });
    }
  };
}

Il n'y a que 3 méthodes, on émet et off.

Importez simplement les objets générés par la fonction mitt() générée dans plusieurs pages (ou placez-les directement dans app.globalData).

Component({
  lifetimes: {
    attached: function() {
      // 页面创建时执行
      const changeData = (type, data) => {
        // 处理传递过来的类型与数据
      }
      this._changed = changeData
      bus.on('xxxchanged', this._changed)
    },
    detached: function() {
      // 页面销毁时执行
      bus.off('xxxchanged', this._changed)
    }
  }
})

这里mitt可以有多个页面进行绑定事件，如果需求仅仅只涉及到两个页面之间，我们就可以使用 wx.navigateTo 中的 EventChannel (页面间事件信息通道)。可以参考微信小程序wx.navigateTo方法里的events参数使用详情及场景,该方案的利好在于，传递到下一个页面的参数也可以通过 EventChannel 来通知，以便于解决 properties 传递数据不宜过大的问题。

注: 一个页面展示很多信息的时候，会造成小程序页面的卡顿以及白屏。小程序官方也有长列表组件 recycle-view。有需求的情况下可以自行研究，这个不在这里详述。

鼓励一下

如果你觉得这篇文章不错，希望可以给与我一些鼓励，在我的 github 博客下帮忙 star 一下。
博客地址

推荐教程：《微信小程序》

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!