页面跳转如何优雅携带大数据Array或Object

前言

• 
  
• 在小程序或者app开发中，最常用到的就是页面跳转，上文中详细介绍了页面跳转4种方法的区别和使用，可以点击查看👉分析小程序页面导航与事件通讯。
  
• 而页面跳转就经常会携带数据到下一个页面，常见的做法是通过 URL 参数将数据拼接在 navigateTo 的 URL 后面。然而，这种方式在处理较大数据（如数组或对象）时会显得笨拙且有限。
  
• 下面将讨论通过 URL 传递参数的局限性，以及使用 EventChannel 进行数据传递的好处，并提供代码示例进行解析。
  

一、使用 URL 参数传递数据的局限性

在小程序中，我们通常使用 navigateTo 方法来跳转到另一个页面，并通过 URL 传递参数。例如：

// 使用 URL 参数进行页面跳转

wx.navigateTo({
url: '/pages/target/target?name=John&age=30'

});

1.1 问题

二、使用 EventChannel 的优势

相比之下，使用 EventChannel 可以更优雅地在页面之间传递数据，尤其是复杂的数据结构。以下是使用 EventChannel 的几个主要优点：

三、示例代码解析

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 进行复杂数据的传递，确保应用的交互更加顺畅。