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

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

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

// 使用 URL 参数进行页面跳转
wx.navigateTo({
  url: '/pages/target/target?name=John&age=30'
})

1.1 问题

1. 数据大小限制：URL 的长度限制通常在 2000 字符左右。如果需要传递一个较大的数据结构（例如一个包含大量信息的对象或数组），URL 会迅速达到限制，导致无法完整传递数据。
2. 编码和解析：当数据包含特殊字符（如空格、&、=等）时，必须进行编码处理。这增加了编码和解析的复杂性，不够直观。
3. 可读性差：长的 URL 会导致可读性降低，特别是当需要传递多个参数时，容易让人困惑。

二、使用 EventChannel 的优势

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

1. 支持复杂数据类型：可以直接传递对象和数组，无需担心 URL 长度限制或特殊字符的编码问题。
2. 简化代码：代码更简洁，逻辑更清晰，特别是在需要传递多个参数时。
3. 即时通信：在新页面创建后，可以立即接收数据，使得页面间的交互更加流畅。

三、示例代码解析

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