小程序页面间数据传递的艺术：揭示流畅交互的秘密

2023-12-24 23:40:19

小程序页面间数据传递：无缝交互的奥秘

巧妙运用 data- 属性*

小程序提供的 data-* 属性犹如一扇连接不同页面的数据之门。通过在源页面中将数据附加到元素的 data-* 属性，您便能轻而易举地在目标页面中访问它。这就好比一个秘密盒子，您将数据藏入其中，而目标页面则能凭此钥匙将其打开。

代码示例：

<!-- 源页面 -->
<button data-username="john">登录</button>

<!-- 目标页面 -->
const username = e.currentTarget.dataset.username;

灵活应用 setStorage 和 getStorage

setStorage 和 getStorage 方法就像数据保险箱，让您在小程序中自由存储和提取数据。您可以将数据存储为键值对，需要时随时将其取回。这就像在不同的房间里放置数据宝箱，每个宝箱都有自己的钥匙。

代码示例：

<!-- 源页面 -->
wx.setStorage({
  key: 'user-data',
  data: {
    name: 'john',
    age: 30
  }
});

<!-- 目标页面 -->
wx.getStorage({
  key: 'user-data',
  success: function(res) {
    const userData = res.data;
  }
});

简洁传递 URL 参数

URL 参数是传递小量数据的便捷通道。您可以在源页面中将数据附加到 URL，然后在目标页面中通过 JavaScript 代码将其访问。这就好比通过一条小路将数据从一个地方传送到另一个地方。

代码示例：

<!-- 源页面 -->
const url = 'page2?name=john&age=30';

<!-- 目标页面 -->
const queryParams = url.split('?')[1];
const params = queryParams.split('&').reduce((params, param) => {
  const [key, value] = param.split('=');
  params[key] = value;
  return params;
}, {});

优雅传递跨页面事件

跨页面事件就像一场数据派对，允许页面之间交换自定义信息。您可以在源页面中触发一个事件，并在目标页面中监听它，从而优雅地传递数据。这就好比在不同房间之间发送信号，通知它们有重要消息需要传递。

代码示例：

<!-- 源页面 -->
wx.triggerEvent('my-custom-event', {
  data: 'my-custom-data'
});

<!-- 目标页面 -->
wx.on('my-custom-event', function(data) {
  console.log(data);
});

选择合适的方法

就像烹饪一样，选择最佳的数据传递方法取决于您要传递的数据类型和数量，以及您希望实现的交互类型。以下为您提供每种方法的优缺点：

data- 属性：*