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

一、功能描述:

在 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”。

原文地址:https://www.cnblogs.com/pinkpinkc/p/13666555.html