Une brève discussion sur plusieurs méthodes de communication entre pages entre les mini-programmes-Développement de mini-programmes-php.cn

Une brève discussion sur plusieurs méthodes de communication entre pages entre les mini-programmes

青灯夜游

Libérer： 2021-09-14 10:15:26

avant

4116 Les gens l'ont consulté

Cet article partagera avec vous plusieurs méthodes courantes de communication cross-page entre petits programmes. Vous pouvez vous y référer si nécessaire.

Une brève discussion sur plusieurs méthodes de communication entre pages entre les mini-programmes

L'applet est composée de pages S'il existe une pile de routage de [A,B], la valeur de A->B peut naturellement être. transmis une par une. Passer couche par couche, mais la transmission de données B->A nécessite des méthodes auxiliaires supplémentaires. Plusieurs méthodes courantes sont décrites ci-dessous. [Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes[A,B]，A->B传值自然可以一层层传递，但是B->A传递数据就需要额外的辅助方式，以下讨论几种常见的方式。【相关学习推荐：小程序开发教程】

1、localStorage + onShow

应用场景：A->B/B->A 都可

优点：简单操作，易理解

缺点：调用到storage，有可能设置失败；且设置后是持久缓存，可能污染原逻辑，应及时删除

应用示例：

// 以A->B示例

// A 页面
Page({
    onShow(){
        if(wx.getStorageSync(&#39;$datas&#39;)){
            console.log(wx.getStorageSync(&#39;$datas&#39;))  // 11111
        }
    },
})

// B 页面
Page({
    someActions(){
        wx.setStorageSync(&#39;$datas&#39;,&#39;11111&#39;)
    },
})

Copier après la connexion

2、globalData + onShow

应用场景：A->B/B->A 都可

优点：简单操作，易理解；直接操作globalData对象，相比于storage执行效率更高

缺点：设置后是小程序生命周期内都可访问，可能污染原逻辑，应及时删除

应用示例：

// 以A->B示例

// A 页面
const app = getApp();
Page({
    onShow(){
        if(app.globalData.$datas){
            console.log(app.globalData.$datas)  // 11111
        }
    },
})

// B 页面
const app = getApp();
Page({
    someActions(){
        app.globalData.$datas = &#39;11111&#39;;
    },
})

Copier après la connexion

3、小程序本身提供的 EventChannel

应用场景：主要是 B->A

优点：小程序原生提供，可随时销毁

缺点：仅限制在navigateTo]

1. A->B/B->A peut être utilisé

Avantages : opération simple, facile à comprendre

Inconvénients : lors de l'appel du stockage, le paramétrage peut échouer et après paramétrage, c'est un cache persistant, ce qui peut polluer ; la logique d'origine et doit être supprimée à temps

Exemples d'application :

// A页面
wx.navigateTo({
  url: &#39;B?id=1&#39;,
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit(&#39;acceptDataFromOpenerPage&#39;, { data: &#39;test&#39; })
  }
})


// B页面
Page({
  onLoad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit(&#39;acceptDataFromOpenedPage&#39;, {data: &#39;test&#39;});
    eventChannel.emit(&#39;someEvent&#39;, {data: &#39;test&#39;});
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on(&#39;acceptDataFromOpenerPage&#39;, function(data) {
      console.log(data)
    })
  }
})

Copier après la connexion

2, globalData + onShow

Scénarios d'application : A->B/B->A sont disponibles

Avantages : opération simple, facile pour comprendre ; faire fonctionner directement l'objet globalData, par rapport à Il est plus efficace de l'exécuter en stockage

Inconvénients : Après paramétrage, il est accessible pendant le cycle de vie du mini programme, ce qui peut polluer la logique d'origine et doit être supprimé dans time

Exemple d'application :

// app.js
const EventBus = require(&#39;./utils/eventBus.js&#39;);
App({
    onLaunch(){
        // 将eventBus初始到wx上
        wx[&#39;$uhomesBus&#39;] = (function () {
            if (wx[&#39;$uhomesBus&#39;]) return wx[&#39;$uhomesBus&#39;];
            return new EventBus();
        })();
    }
})

// A页面
Page({
    someActions(){
        wx.$uhomesBus.$on(&#39;$datas&#39;,(data)=>{
            console.log(data); // 11111
        })
    },
})

// B页面
Page({
    emitActions(){
        wx.$uhomesBus.$emit(&#39;$datas&#39;, &#39;11111&#39;);
    },
})

Copier après la connexion

EventChannel

Scénarios d'application : principalement B->A

Avantages : le mini programme est fourni nativement et peut être détruit à tout momentInconvénients : uniquement limité à `navigateTo`, et la version de base de la bibliothèque doit être au moins 2.7.3

Exemple d'application :

// A页面
Page({
    someActions(datas){
        console.log(datas); // 11111
    },
})


// B页面
Page({
    someActions(){
        const pages = getCurrentPages();
        if (pages.length < 2) return;
        
        // 如果页面层级较多，可用循环去匹配到A页面；
        // 此处仅做2个页面的示例
        const prevPage = pages[pages.length - 1];
        
        // 路由匹配到A
        if (prevPage.route === &#39;A&#39;) {
            prevPage.someActions(&#39;11111&#39;);
        }
    },
})

Copier après la connexion

4, Custom EventBus

Scénarios d'application : A->B /B->A sont disponibles

🎜Avantages : Implémentation personnalisée, extensible🎜🎜Inconvénients : Personnalisation étendue des variables wx, le même nom d'événement peut être lié à plusieurs reprises aux événements d'écoute🎜🎜EventBus : reportez-vous à cet article🎜Implémentation d'EventBus🎜🎜🎜 Exemple d'application : 🎜rrreee🎜🎜5. Obtenez l'instance de pile de pages getCurrentPages🎜🎜🎜Scénarios d'application : principalement B->Avantages : le mini-programme est fourni de manière native et la logique de traitement est essentiellement sur la page B🎜🎜. Inconvénients : Il est nécessaire d'ajouter des règles correspondantes pour faire correspondre les pages, et il y a au moins deux pages dans la pile de routage🎜🎜Exemples d'application : 🎜rrreee🎜🎜6, globalData proxy🎜🎜🎜Cette méthode n'a pas encore été testée, mais elle est réalisable en principe ; 🎜🎜Le principe correspondant peut faire référence à la combinaison du piratage de données et des notifications d'abonnement de Vue3 🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

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!