【小程序】---- 页面间通信接口，跳转页面携带参数

一、功能描述：

在 2019 年 7 月 2 日的小程序基础库版本更新 v2.7.3 中，小程序新增了一个页面间通讯的接口，帮助我们的小程序完成不同页面间数据同步的功能。

 

二、实现方式：

假设页面 A 打开详情页面 B

1. A 向 B 传递数据

// A页面

wx.navigateTo({
  url: 'search?type=1' 
  success: function(res) { 
  // 通过eventChannel向被打开页面传送数据 
    res.eventChannel.emit('searchComplete', { searchName: 'cc' }) 
  }
})

// B页面

onLoad: function(option){
  // 监听searchComplete事件，获取上一页面通过eventChannel传送到当前页面的数据
  let eventChannel = this.getOpenerEventChannel();
  eventChannel.on('searchComplete', function(data) { 
　　 console.log(data)
  }) 
}

 

2.B 向 A 传递数据

// A页面

wx.navigateTo({
  url: 'search?type=1', 
  events: { 
     filterComplete: function(data) { 
       console.log(data) 
     }
  }
})

// B页面

onLoad: function(option){ 
   const eventChannel = this.getOpenerEventChannel();
   eventChannel.emit('filterComplete', {filterName: 'cc'}); 
　　// wx.navigateBack()； 返回上一页
}

 

三、注意要点
1. 该功能从基础库 2.7.3 开始支持，低版本需做兼容处理。
2. json配置文件的 usingComponents 不能删除，否则会报错：“this.getOpenerEventChannel is not a function”。