使用微信小程序的 `wx.navigateTo` 与 `eventChannel` 实现页面跳转与传参

在微信小程序开发中，页面跳转和传参是两个常见的需求。wx.navigateTo 是微信小程序中用于页面跳转的方法，而 eventChannel 则可以用于页面间的通信，包括传参。

1. 使用 wx.navigateTo 进行页面跳转

wx.navigateTo 是微信小程序中用于页面跳转的方法。它的基本语法是：

wx.navigateTo({
  url: 'test?id=123'
})

在上面的例子中，url 参数指定了要跳转的页面路径，并且可以附加参数，如 id=123。

2. 使用 eventChannel 实现页面间传参

eventChannel 是微信小程序中用于页面间通信的机制。它允许从一个页面向另一个页面发送消息。

步骤：

1. 在目标页面监听事件

在目标页面中，你需要使用 eventChannel 监听来自上一页面的事件，并获取传递的参数。

// 目标页面的Page对象中
Page({
  onLoad: function (options) {
    // 使用eventChannel监听事件
    const eventChannel = this.getEventChannel();
    eventChannel.on('dataFromPreviousPage', (data) => {
      console.log('接收到的数据:', data);
      // 在这里处理从上一页面传递过来的数据
    });
  }
});

1. 在上一页面发送事件

在上一页面，你可以使用 eventChannel 向目标页面发送事件，并附带参数。

// 上一页面的Page对象中
Page({
  navigateToTargetPage: function () {
    wx.navigateTo({
      url: '/pages/targetPage/targetPage'
    });
    // 获取eventChannel
    const eventChannel = this.getEventChannel();
    // 发送事件和数据到目标页面
    eventChannel.emit('dataFromPreviousPage', { id: 123, name: 'example' });
  }
});

在上面的例子中，我们向目标页面发送了一个名为 dataFromPreviousPage 的事件，并附带了一个包含 id 和 name 属性的对象作为参数。

注意事项

• 确保在目标页面加载完成后再发送事件，否则事件可能会被忽略。
• 可以通过 eventChannel.off('eventName') 来取消监听事件。

总结

使用 wx.navigateTo 和 eventChannel，你可以轻松地在微信小程序中实现页面跳转和传参。wx.navigateTo 提供了简单的页面跳转功能，而 eventChannel 则为页面间通信提供了强大的支持。通过结合使用这两个功能，你可以更灵活地在微信小程序中处理页面跳转和参数传递。

希望这篇文章能帮助你更好地理解如何在微信小程序中使用 wx.navigateTo 和 eventChannel 实现页面跳转和传参。如果你有任何问题或需要进一步的帮助，请随时提问！