微信小程序 - 页面返回并传递数据（使用事件通道、操作页面栈）

我命由我123452025-12-09 11:54

一、使用事件通道

1、基本介绍

在 PageA 中，调用 wx.navigateTo 跳转时，在 events 中定义一个事件监听器，用于接收 PageB 返回的数据
在 PageB 中，先通过 getOpenerEventChannel 方法获取事件通道，在返回前触发事件并发送数据

2、演示

PageA

html 复制代码

<Button bindtap="jumpToPageB">跳转到 pageB</Button>

js 复制代码

Page({
  jumpToPageB() {
    wx.navigateTo({
      url: "/pages/pageB/index",
      events: {
        getResult(data) {
          console.log("pageB 传递回来的数据:", data);
        },
      },
    });
  },
});

PageB

html 复制代码

<Button bindtap="backToPageA">返回到 pageA</Button>

js 复制代码

Page({
  backToPageA() {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.emit("getResult", {
      id: 123,
      userInfo: {
        name: "李四",
        age: 30,
      },
    });

    wx.navigateBack();
  },
});

二、操作页面栈

1、基本介绍

通过调用 getCurrentPages 方法获取页面栈实例，直接修改上一个页面的数据

2、演示

PageA

html 复制代码

<Button bindtap="jumpToPageB">跳转到 pageB</Button>
<button bindtap="checkResult">检查返回数据</button>

js 复制代码

Page({
  data: {
    result: null,
  },
  jumpToPageB() {
    wx.navigateTo({
      url: "/pages/pageB/index",
    });
  },
  checkResult() {
    console.log("返回数据:", this.data.result);
  },
});

PageB

html 复制代码

<Button bindtap="backToPageA">返回到 pageA</Button>

js 复制代码

Page({
  backToPageA() {
    const pages = getCurrentPages();
    const prevPage = pages[pages.length - 2];
    if (prevPage) {
      prevPage.setData({
        result: "some content",
      });
    }

    wx.navigateBack();
  },
});