ホームページ > 記事 > WeChat アプレット > ミニ プログラム間のクロスページ通信のいくつかの方法に関する簡単な説明
この記事では、小さなプログラム間のクロスページ通信の一般的な方法をいくつか紹介します。必要に応じて参照してください。
アプレットはページで構成されており、ルーティング スタックがある場合は [A,B]
, A-> となります。 B
値は当然レイヤーごとに渡すことができますが、B->A
データを渡すには追加の補助メソッドが必要です。いくつかの一般的なメソッドについては以下で説明します。 [関連する学習の推奨事項: 小さなプログラム開発チュートリアル ]
アプリケーション シナリオ: 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') }, })
アプリケーション シナリオ: 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'; }, })
ミニ プログラム自体によって提供される アプリケーション シナリオ: 主に 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) }) } })
アプリケーション シナリオ: 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'); }, })
アプリケーション シナリオ : 主に 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'); } }, })
プログラミング入門をご覧ください。 !
以上がミニ プログラム間のクロスページ通信のいくつかの方法に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。