ミニ プログラム間のクロスページ通信のいくつかの方法に関する簡単な説明

この記事では、小さなプログラム間のクロスページ通信の一般的な方法をいくつか紹介します。必要に応じて参照してください。

アプレットはページで構成されており、ルーティング スタックがある場合は [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 オブジェクトを直接操作できる、ストレージよりも実行効率が高い

欠点: 設定後、途中でアクセスできます。ミニ プログラムのライフ サイクルが変更され、元のロジックが汚染される可能性があります。

アプリケーション サンプルを時間内に削除してください:

// 以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 にのみ限定され、基本ライブラリのバージョンが 2.7.3

以上である必要があります アプリケーション例:

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

4. カスタム EventBus

アプリケーション シナリオ: A->B/B- >A が可能

利点: カスタム実装、拡張可能

欠点: カスタム変数を wx に拡張します。同じeventNameがリスニングイベントに繰り返しバインドされる可能性があります

EventBus: このEventBus実装

アプリケーション例:

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

5を参照してください。ページ スタック インスタンス getCurrentPages

アプリケーション シナリオ : 主に B->A

利点 : ミニ プログラムがネイティブに提供され、処理ロジックは基本的に B ページにあります

欠点: ページを照合するために対応するルールを追加する必要があり、少なくとも 2 つのルーティング スタックが存在します。 ページの存在

アプリケーション例:

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

6、globalData プロキシ

#この方法はまだテストされていませんが、原理的には実行可能です。

対応する原理については、Vue3 のデータ ハイジャックとサブスクリプション通知の組み合わせを参照してください。

プログラミング関連の知識について詳しくは、

プログラミング入門をご覧ください。 ！

以上がミニ プログラム間のクロスページ通信のいくつかの方法に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。