https://juejin.cn/post/7433271555830431784
前言
在小程序或者app开发中，最常用到的就是页面跳转，上文中详细介绍了页面跳转4种方法的区别和使用，可以点击查看👉分析小程序页面导航与事件通讯[1]。 而页面跳转就经常会携带数据到下一个页面，常见的做法是通过 URL 参数将数据拼接在 navigateTo的 URL 后面。然而，这种方式在处理较大数据（如数组或对象）时会显得笨拙且有限。下面将讨论通过 URL 传递参数的局限性，以及使用 EventChannel进行数据传递的好处，并提供代码示例进行解析。
一、使用 URL 参数传递数据的局限性
在小程序中，我们通常使用 navigateTo 方法来跳转到另一个页面，并通过 URL 传递参数。例如：
// 使用 URL 参数进行页面跳转
wx.navigateTo({
url: '/pages/target/target?name=John&age=30'
});
1.1 问题
数据大小限制：URL 的长度限制通常在 2000 字符左右。如果需要传递一个较大的数据结构（例如一个包含大量信息的对象或数组），URL 会迅速达到限制，导致无法完整传递数据。 编码和解析：当数据包含特殊字符（如空格、&、=等）时，必须进行编码处理。这增加了编码和解析的复杂性，不够直观。 可读性差：长的 URL 会导致可读性降低，特别是当需要传递多个参数时，容易让人困惑。
二、使用 EventChannel 的优势
相比之下，使用 EventChannel 可以更优雅地在页面之间传递数据，尤其是复杂的数据结构。以下是使用 EventChannel 的几个主要优点：
支持复杂数据类型：可以直接传递对象和数组，无需担心 URL 长度限制或特殊字符的编码问题。 简化代码：代码更简洁，逻辑更清晰，特别是在需要传递多个参数时。 即时通信：在新页面创建后，可以立即接收数据，使得页面间的交互更加流畅。
三、示例代码解析
3.1 在源页面中
在源页面中，我们可以使用 EventChannel 传递数组和对象：
// 源页面
wx.navigateTo({
url: '/pages/target/target',
events: {
// 监听目标页面发送的消息
someEvent(data) {
console.log(data); // 可以在这里处理目标页面返回的数据
}
},
success: (res) => {
// 创建要传递的复杂数据
const arrayData = [1, 2, 3, 4, 5];
const objectData = { key: 'value', info: { nestedKey: 'nestedValue' } };
// 通过 EventChannel 向目标页面传递数据
res.eventChannel.emit('someEvent', {
array: arrayData,
object: objectData,
});
}
});
3.2 在目标页面中
在目标页面中，我们接收并使用传递的数据：
// 目标页面
const eventChannel = this.getOpenerEventChannel();
eventChannel.on('someEvent', (data) => {
// 接收数组和对象数据
console.log(data.array); // [1, 2, 3, 4, 5]
console.log(data.object); // { key: 'value', info: { nestedKey: 'nestedValue' } }
// 进行相应的数据处理
// 例如，渲染数据到页面上
this.setData({
receivedArray: data.array,
receivedObject: data.object,
});
});
四、总结
通过使用 EventChannel 进行页面间的数据传递，我们可以避免使用 URL 传递参数时面临的各种局限性，特别是在处理复杂数据时。EventChannel 使得数据传递变得更加灵活、简洁和高效，提升了小程序的用户体验。
在实际开发中，传递较少数据时，可以在url后面拼接参数进行传递使用。当需要携带大数据时可以考虑使用 EventChannel 进行复杂数据的传递，确保应用的交互更加顺畅。
