微信小程序路由及 `EventChannel` 通信

不同路由跳转的描述及场景，页面之间的 EventChannel 的使用。

路由

wx.switchTab

js 复制代码

// 描述 - 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
// 场景 - 跳转到 tabBar 页面
wx.switchTab({
    // 路径后不能带参数。
    url: '/pages/home/index',
    success: function () {},
    fail: function () {},
    complete: function () {},
})

wx.reLaunch

js 复制代码

// 描述 - 关闭所有页面，打开到应用内的某个页面
// 场景 - 跳转到任意页面，并关闭其他所有页面，跳转后不想让回退的场景可以用这个
wx.reLaunch({
    // 路径后可以带参数
    url: '/pages/home/index?key=value&key2=value2',
    success: function () {},
    fail: function () {},
    complete: function () {},
})

wx.redirectTo

js 复制代码

// 描述 - 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
// 场景 - 跳转之后不希望当前页面保留到页面栈，在后续页面使用 navigateBack 不能返回当前页
wx.redirectTo({
    // 路径后可以带参数
    url: '/pages/home/index?key=value&key2=value2',
    success: function () {},
    fail: function () {},
    complete: function () {},
})

wx.navigateTo

js 复制代码

// 描述 - 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
// 场景 - 跳转到非 tabbar 页面
wx.navigateTo({
    // 路径后可以带参数
    url: '/pages/home/index?key=value&key2=value2',
    events: {}, // 页面间通信接口，用于监听被打开页面发送到当前页面的数据。
    success: function () {},
    fail: function () {},
    complete: function () {},
})

wx.navigateBack

js 复制代码

// 描述 - 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
// 场景 - 返回到上一页面或多级页面
wx.navigateBack({
    delta: 1, // 返回的页面数，如果 delta 大于现有页面数，则返回到页面栈中只剩一个页面为止。
    success: function () {},
    fail: function () {},
    complete: function () {},
})

EventChannel

微信小程序的 EventChannel 是一种在通过 wx.navigateTo 打开的页面间进行事件通信的机制。它允许页面之间相互发送和监听事件，特别适合需要从后一个页面（Page B）向前一个页面（Page A）回传数据的场景，例如：订单页跳转到评论页，评论完成后通知订单页刷新。

Page A

js 复制代码

Page({
    methods: {
        toComment() {
            wx.navigateTo({
                url: '/pages/pageB/pageB', // 跳转到 Page B
                events: {
                    // 评论完成
                    'afterComment': function(data) {
                        console.log('接收到来自 Page B 的数据:', data);
                    },
                    // 可以同时监听多个事件
                    'anotherEvent': function(data) {
                        console.log('另一个事件的数据:', data);
                    }
                },
                success: function (res) {
                    // 页面跳转成功后，通过 eventChannel 向 Page B 发送数据
                    // 这个场景一般适用传输数据量比较大的时候
                    res.eventChannel.emit('eventFromA', { data: '这是从 A 页面发送的数据' });
                }
            });
        }
    }
})

Page B

js 复制代码

Page({
    onLoad(options) {
        // options - 一般是路由路径携带的参数，适合少量关键数据，有长度限制
        console.log('options', options);
        // 获取 EventChannel 实例
        const eventChannel = this.getOpenerEventChannel();
        
        // 监听 Page A 通过 success 回调发出的事件，例如 'eventFromA'
        eventChannel.on('eventFromA', (data) => {
            console.log('在 Page B 接收到来自 Page A 的数据:', data);
        });

        // 如果需要只监听一次，可以使用 once
        eventChannel.once('oneTimeEvent', (data) => {
            console.log('这个监听器只触发一次', data);
        });
    },
    methods: {
        // 评论后操作
        afterComment() {
            wx.navigateBack();
            const eventChannel = this.getOpenerEventChannel();
            eventChannel.emit('afterComment', { data: '这是从 B 页面发送的数据' });
        }
    }
})

确保前后页面约定的事件名称一致，避免因事件名错误导致通信失败。
对于长期不使用的监听器，及时使用 off 方法移除，以防止潜在的内存泄漏。