Maison > Article > Applet WeChat > Une brève discussion sur plusieurs méthodes de communication entre pages entre les mini-programmes
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.
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
传递数据就需要额外的辅助方式,以下讨论几种常见的方式。【相关学习推荐:小程序开发教程】
应用场景: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对象,相比于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'; }, })
应用场景:主要是 B->A
优点:小程序原生提供,可随时销毁
缺点:仅限制在navigateTo
]
// 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
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 stockageInconvé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// 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.
EventChannel
Scénarios d'application : principalement B->A
navigateTo
, et la version de base de la bibliothèque doit être au moins 2.7.3Exemple 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 === 'A') { prevPage.someActions('11111'); } }, })4, Custom EventBus🎜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!