微信小程序 -- 页面间通信

前言

今天我们来说下微信小程序的页面间通信：

1. 通过url传参实现页面间单向通信
2. 通过getCurrentPages()页面栈实现页面间单向通信
3. 通过EventChannel实现页面间双向通信

1、url传参

我们知道页面之间的跳转可以通过路由组件来实现，其中组件的属性url就是要跳转到页面的路径。
我们可以通过在路径中添加需要传递的数据来实现页面间数据通信

//数据传递
wx.navigateTo({
	url: '../../followUp/index?aa=1256&bb=jkkk'
})
//数据接收
onLoad: function (options) {
	const {info} = options;
},
1
2
3
4
5
6
7
8

2、getCurrentPages()

获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面。
通过获取到相应的页面栈对象，然后根据业务需求，执行具体操作。

//数据传递
let curPages = getCurrentPages();//获取当前页面栈列表
var prevPage = curPages[curPages.length - 2];//上一页面栈对象
prevPage.setData({
	aa:'111111',
	bb:'2222222',
});
prevPage.updateInfo();
1
2
3
4
5
6
7
8

2、EventChannel

如果一个页面(B)由另一个页面(A)通过 wx.navigateTo 打开，这两个页面间将建立一条数据通道：
被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象；
wx.navigateTo 的 success 回调中也包含一个 EventChannel 对象。
这两个 EventChannel 对象间可以使用 emit 和 on 方法相互发送、监听事件。

//--------------------------页面A--------------------------
wx.navigateTo({
  url: '../../followUp/index',
  events: {
  	//接收页面B传递的数据
    two: function (data) {
      console.log(data)
    },
  },
  success:function(res){
  	//向页面B传递数据
    res.eventChannel.emit('one', { data: 'data one' })
  },
})
// --------------------------页面B--------------------------
//接收数据
const eventChannel = this.getOpenerEventChannel()
eventChannel.on('one', function (data) {
  console.log(data)
})
//发送数据
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('two', { data: 'data two'});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23