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

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

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

アプレットはページで構成されており、ルーティングスタックがある場合は[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 === 'A') { prevPage.someActions('11111'); } }, })

ログイン後にコピー