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

古口古2023-10-09 22:12

前言

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

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

1、url传参

我们知道页面之间的跳转可以通过路由组件来实现，其中组件的属性url就是要跳转到页面的路径。

我们可以通过在路径中添加需要传递的数据来实现页面间数据通信

js 复制代码

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

2、getCurrentPages()

获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面。

通过获取到相应的页面栈对象，然后根据业务需求，执行具体操作。

js 复制代码

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

2、EventChannel

如果一个页面(B)由另一个页面(A)通过 wx.navigateTo 打开，这两个页面间将建立一条数据通道：

被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象；

wx.navigateTo 的 success 回调中也包含一个 EventChannel 对象。

这两个 EventChannel 对象间可以使用 emit 和 on 方法相互发送、监听事件。

js 复制代码

//--------------------------页面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'});