uni.navigateBack页面回退时如何携带参数并触发上一页数据更新？

Question

在使用uni.navigateBack进行页面回退时，如何携带参数并触发上一页的数据更新？ 在实际开发中，我们常常遇到这样的需求：从子页面回退到上一页时，需要将某些数据带回上一页，并让上一页根据这些数据进行界面或状态的更新。但uni.navigateBack本身并不直接支持携带参数的功能，这就需要我们寻找变通的方法。例如，可以通过全局存储（如Vuex或Storage）暂存数据，在上一页通过监听页面显示生命周期函数onShow来获取并处理这些数据，从而实现数据更新的效果。或者利用eventChannel自定义事件，在跳转时建立父子页面的通信桥梁，回退时触发事件传递数据。这些都是常见的解决思路，你更倾向于哪种方式呢？

Answer 1

1. 问题背景与需求分析

在uni-app开发中，uni.navigateBack 是一个常见的页面回退方法。然而，该方法本身并不支持直接携带参数的功能。这使得在实际开发中，当需要从子页面回退到上一页时传递数据并触发上一页的数据更新，会面临一定的挑战。

具体需求如下：

• 从子页面回退到上一页时，能够携带参数。
• 上一页接收到参数后，能够根据这些参数更新界面或状态。

为了解决这一问题，我们需要深入探讨几种可能的解决方案，并评估其优劣。

2. 常见解决方案及其适用场景

以下是几种常见的解决方案，适用于不同场景：

1. 全局存储（如 Vuex 或 Storage）：通过将数据暂存到全局存储中，上一页可以在生命周期函数 onShow 中获取并处理这些数据。
2. EventChannel 自定义事件：利用 getOpenerEventChannel 方法，在跳转时建立父子页面的通信桥梁，回退时触发事件传递数据。
3. URL 参数：虽然 uni.navigateBack 不支持直接携带参数，但可以通过 URL 参数间接实现。

接下来，我们将逐一分析这些方案的实现细节和优缺点。

3. 全局存储方案实现

全局存储是一种简单且通用的解决方案。以下是一个基于 Vuex 的实现示例：

// 子页面：存储数据到 Vuex
this.$store.commit('setData', { key: 'value' });

// 上一页：监听页面显示，从 Vuex 获取数据
onShow() {
    const data = this.$store.state.data;
    if (data) {
        this.updateUI(data); // 更新界面逻辑
    }
}

如果使用 Storage，则可以这样实现：

// 子页面：存储数据到 Storage
uni.setStorageSync('key', 'value');

// 上一页：监听页面显示，从 Storage 获取数据
onShow() {
    const data = uni.getStorageSync('key');
    if (data) {
        this.updateUI(data); // 更新界面逻辑
    }
}

全局存储的优点是简单易用，适合跨页面共享数据，但需要注意清理过期数据以避免内存占用。

4. EventChannel 方案实现

EventChannel 提供了更优雅的父子页面通信方式。以下是实现步骤：

步骤	描述
1	在跳转时通过 getOpenerEventChannel 建立通信桥梁。
2	子页面回退时，触发自定义事件传递数据。
3	上一页监听事件并处理数据。

// 跳转时建立通信桥梁
const eventChannel = this.getOpenerEventChannel();

// 子页面：回退时触发事件传递数据
eventChannel.emit('updateData', { key: 'value' });

// 上一页：监听页面显示，监听事件并处理数据
onLoad() {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('updateData', (data) => {
        this.updateUI(data); // 更新界面逻辑
    });
}

EventChannel 的优点是通信机制明确，适合父子页面间的局部数据传递。

5. 流程图对比两种方案

为了更直观地对比两种方案，我们可以通过流程图展示其实现过程：

sequenceDiagram
        participant 子页面
        participant 全局存储
        participant 上一页
        子页面->>全局存储: 存储数据
        上一页->>全局存储: 获取数据
        上一页->>上一页: 更新界面

对于 EventChannel：

sequenceDiagram
        participant 子页面
        participant 上一页
        子页面->>上一页: 触发事件传递数据
        上一页->>上一页: 监听事件并更新界面

通过以上对比可以看出，两种方案各有优劣，选择时需根据具体场景权衡。