玩转小程序navigateBack携带参数返回功能

前端

2023-07-19 09:18:41

小程序 navigateBack 携参返回：让数据传递更轻松

导航栏简介

在小程序中，navigateBack 方法可以让你从当前页面返回到上一个页面。而携参返回功能则允许你在返回时携带数据，使页面间的数据传递更加便捷。

三种携参方式

有三种方法可以实现 navigateBack 携参返回：

wx.setStorageSync() 和 wx.getStorageSync() ：使用小程序本地存储来存储和获取数据。
wx.navigateTo() 和 wx.navigateBack() ：利用事件通道来传递数据。
Promise ：使用 Promise 对象来处理数据传递。

wx.setStorageSync() 和 wx.getStorageSync()

这种方法使用小程序的本地存储来存储数据。在需要传递数据的页面中，使用 wx.setStorageSync() 方法将数据存储在指定的键下。在需要接收数据的页面中，使用 wx.getStorageSync() 方法通过相同的键来获取数据。

代码示例 ：

// 在页面 A 中
wx.setStorageSync('username', '小明');

// 在页面 B 中
var username = wx.getStorageSync('username');

wx.navigateTo() 和 wx.navigateBack()

这种方法使用事件通道来传递数据。在需要传递数据的页面中，使用 wx.navigateTo() 方法跳转到需要接收数据的页面，同时通过 success 回调函数将数据发送到事件通道。在需要接收数据的页面中，使用 wx.navigateBack() 方法返回到需要传递数据的页面，同时在 success 回调函数中监听事件通道中的数据。

代码示例 ：

// 在页面 A 中
wx.navigateTo({
  url: 'pageB',
  success: function(res) {
    res.eventChannel.emit('acceptData', { username: '小明' });
  }
});

// 在页面 B 中
wx.navigateBack({
  success: function(res) {
    res.eventChannel.on('acceptData', function(data) {
      console.log(data.username);
    });
  }
});

Promise

这种方法使用 Promise 对象来处理数据传递。在需要传递数据的页面中，创建一个 Promise 对象，并使用 resolve() 方法将数据传递到 Promise 对象中。在需要接收数据的页面中，使用 then() 方法获取 Promise 对象中的数据。

代码示例 ：

// 在页面 A 中
var promise = new Promise(function(resolve, reject) {
  resolve({ username: '小明' });
});

// 在页面 B 中
promise.then(function(data) {
  console.log(data.username);
});

选择合适的方法

这三种方法各有优缺点，具体选择哪一种取决于你的具体需求：

wx.setStorageSync() 和 wx.getStorageSync() ：简单易用，但数据量受限，且数据保存在本地存储中，安全性较差。
wx.navigateTo() 和 wx.navigateBack() ：数据传输量不受限制，安全性较高，但实现过程略复杂。
Promise ：异步处理数据，易于管理，但实现过程也略复杂。

常见问题解答

数据是否会被丢失？
数据不会丢失，但如果使用 wx.setStorageSync() 方法，数据保存在本地存储中，当用户清除小程序缓存时，数据将被清除。
数据传输量有限制吗？
wx.setStorageSync() 方法的数据传输量受限，wx.navigateTo() 和 wx.navigateBack() 方法的数据传输量不受限制。
可以传递复杂对象吗？
可以，可以使用 JSON.stringify() 和 JSON.parse() 方法将复杂对象转换为 JSON 字符串，再进行传递。
在哪个页面中传递数据？
一般在跳转的源页面中传递数据。
在哪个页面中接收数据？
一般在跳转的目标页面中接收数据。