微信小程序-页面间通信_微信小程序 tabbar之间的通信-优快云博客

本文链接：https://blog.youkuaiyun.com/qq564280420/article/details/121520139

本文详细介绍了微信小程序中页面跳转的三种方式——reLaunch、redirectTo和navigateTo，并展示了如何在跳转时传递数据。同时，讲解了EventChannel事件通信机制，包括触发事件、监听事件的方法，以及在不同页面间的应用实例，如list页面到info页面和add页面到list页面的通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当前测试的基础库版本为 2.17.0

页面分类

tabBar 页面 - app.json中配置的 tabBar 页面

page 页面 - 其他的非tabBar 页面，后面称为 page 页面

跳转页面时进行数据传递

目标页面为 tabBar 页面

// 当前页面
wx.reLaunch({
  url: '/pages/tab1/index?id=123'
})

// tab1页面
Page({
  onLoad (option) {
    console.log('query', options); // { id: 123 }
  }
})

目标页面为 page 页面

// 当前页面 - 第一种
wx.reLaunch({
  url: '/pages/page1/index?id=123'
})
// 当前页面 - 第二种
wx.redirectTo({
  url: '/pages/page1/index?id=123'
})
// 当前页面 - 第三种
wx.navigateTo({
  url: '/pages/page1/index?id=123'
})
// 三种方法有所区别，使用的时候根据需要使用其中一个

// tab1页面
Page({
  onLoad (option) {
    console.log('query', options); // { id: 123 }
  }
})

触发事件进行通信

EventChannel - 页面间事件通信通道

const eventChannel = this.getOpenerEventChannel();

// 触发一个事件
eventChannel.emit(string eventName, any args)

// 持续监听一个事件
eventChannel.on(string eventName, EventCallback fn)

// 监听一个事件一次，触发后失效
eventChannel.once(string eventName, EventCallback fn)

// 取消监听一个事件。
// 给出第二个参数时，只取消给出的监听函数，否则取消所有监听函数
eventChannel.off(string eventName, EventCallback fn)

list页面跳转info页面触发事件监听

// list 页面
Page({
  goToInfo(){
    wx.navigateTo({
      url: '/pages/info/index',
      success(res){
        res.eventChannel.emit('eventName', { param1: 'value1' });
      }
    })
  }
})

// info 页面
Page({
  eventAction(params){
    console.log(params); // { param1: 'value1' }
  },
  onLoad: function (options) {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('eventName', this.eventAction);
  },
})

add页面新增完毕返回list页面触发事件监听

// list 页面
Page({
  goToAdd(){
    wx.navigateTo({
      url: '/pages/add/index',
      events: {
        backRefresh(params){
          console.log(params);// { status: 'ok' }
          // do something ...
          // refresh list data
        }
      },
      success(res){
        // success callback
      }
    })
  }
})

// add 页面
Page({
  saveItem(data){
    saveService.save(data, () => {
      // success save ...
      const eventChannel = this.getOpenerEventChannel();
      eventChannel.emit('backRefresh', { status: 'ok' });
    })
  },
})