Eine kurze Diskussion über verschiedene Methoden der seitenübergreifenden Kommunikation zwischen Miniprogrammen

In diesem Artikel werden einige gängige seitenübergreifende Kommunikationsmethoden für kleine Programme vorgestellt. Sie können bei Bedarf darauf zurückgreifen.

Das Applet besteht aus Seiten [A,B], der Wert von A->B kann natürlich sein Die Weitergabe von Daten erfolgt Schicht für Schicht, die Weitergabe von B->A erfordert jedoch zusätzliche Hilfsmethoden. [Verwandte Lernempfehlungen: Mini-Tutorial zur Programmentwicklung[A,B]，A->B传值自然可以一层层传递，但是B->A传递数据就需要额外的辅助方式，以下讨论几种常见的方式。【相关学习推荐：小程序开发教程】

1、localStorage + onShow

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

优点：简单操作，易理解

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

应用示例：

// 以A->B示例

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

// B 页面
Page({
    someActions(){
        wx.setStorageSync('$datas','11111')
    },
})

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 = '11111';
    },
})

3、小程序本身提供的 EventChannel

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

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

缺点：仅限制在navigateTo]

1. Anwendungsszenarien: A->B/B->A kann verwendet werden.

Vorteile: einfache Bedienung, leicht zu verstehen die ursprüngliche Logik und sollte rechtzeitig gelöscht werden

Anwendungsbeispiele:

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


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

2, globalData + onShow

Anwendungsszenarien: A->B/B->A sind verfügbar

Vorteile: einfache Bedienung, einfach zu verstehen; direktes Betreiben des globalData-Objekts im Vergleich zu Es ist effizienter, es im Speicher auszuführen

Nachteile: Nach dem Festlegen kann während des Lebenszyklus des Miniprogramms darauf zugegriffen werden, was die ursprüngliche Logik verunreinigen kann und gelöscht werden sollte Zeit

Anwendungsbeispiel:

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

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

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

3. target="_blank" ref="nofollow noopener noreferrer">

EventChannel

Anwendungsszenarien: Hauptsächlich B->A

Vorteile: Das Miniprogramm wird nativ bereitgestellt und kann jederzeit zerstört werden

Nachteile: Nur beschränkt auf navigateTo und die Basisbibliotheksversion muss mindestens 2.7.3 sein

Anwendungsbeispiel:

// 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;);
        }
    },
})

4, Custom EventBus

Anwendungsszenarien: A->B /B->A sind verfügbar.

Vorteile: Benutzerdefinierte Implementierung, erweiterbar Anwendungsbeispiel: rrreee

🎜5. Holen Sie sich die Seitenstapelinstanz getCurrentPages🎜🎜🎜Anwendungsszenarien: Hauptsächlich B-> A🎜🎜Vorteile: Das Miniprogramm wird nativ bereitgestellt und die Verarbeitungslogik befindet sich grundsätzlich auf der B-Seite🎜🎜 Nachteile: Es müssen entsprechende Regeln für den Seitenabgleich hinzugefügt werden, und es gibt mindestens zwei Seiten im Routing-Stack ist grundsätzlich machbar; 🎜🎜Das entsprechende Prinzip kann sich auf die Kombination von Datendiebstahl und Abonnementbenachrichtigungen von Vue3 beziehen; 🎜🎜Weitere programmbezogene Kenntnisse finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über verschiedene Methoden der seitenübergreifenden Kommunikation zwischen Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!