跳到主要内容

页面间数据共享

在小程序开发中，页面间数据共享是一个非常重要的概念。它允许我们在不同的页面之间传递和共享数据，从而实现更复杂的交互和功能。本文将详细介绍几种常见的页面间数据共享方法，并通过实际案例帮助你更好地理解和应用这些技术。

1. 全局数据共享​

全局数据共享是最简单的一种方式。我们可以将数据存储在全局对象中，然后在任何页面中访问和修改这些数据。

1.1 定义全局数据​

在小程序的 app.js 文件中，我们可以定义一个全局对象来存储数据：

javascript
// app.js
App({
  globalData: {
    userInfo: null,
    theme: 'light'
  }
});

1.2 访问和修改全局数据​

在任何页面中，我们都可以通过 getApp() 方法来访问和修改全局数据：

javascript
// pages/index/index.js
const app = getApp();

Page({
  onLoad() {
    // 访问全局数据
    console.log(app.globalData.userInfo);

    // 修改全局数据
    app.globalData.theme = 'dark';
  }
});
提示

全局数据适合存储一些不频繁变化的数据，比如用户信息、主题设置等。

2. 页面传参​

页面传参是另一种常见的数据共享方式。通过 URL 参数，我们可以在页面跳转时将数据传递给目标页面。

2.1 传递参数​

在页面跳转时，我们可以通过 wx.navigateTo 或 wx.redirectTo 方法传递参数：

javascript
// pages/index/index.js
Page({
  navigateToDetail() {
    wx.navigateTo({
      url: '/pages/detail/detail?id=123&name=example'
    });
  }
});

2.2 接收参数​

在目标页面的 onLoad 方法中，我们可以通过 options 参数来接收传递过来的数据：

javascript
// pages/detail/detail.js
Page({
  onLoad(options) {
    const { id, name } = options;
    console.log(id); // 输出: 123
    console.log(name); // 输出: example
  }
});
警告

页面传参适合传递少量数据，如果需要传递大量数据或复杂对象，建议使用全局数据或事件通信。

3. 事件通信​

事件通信是一种更灵活的数据共享方式。通过事件机制，我们可以在页面之间传递复杂的数据对象。

3.1 定义事件​

在小程序中，我们可以使用 wx.eventChannel 来定义事件：

javascript
// pages/index/index.js
Page({
  navigateToDetail() {
    wx.navigateTo({
      url: '/pages/detail/detail',
      events: {
        onDataReceived: function(data) {
          console.log('Received data:', data);
        }
      },
      success: function(res) {
        res.eventChannel.emit('sendData', { message: 'Hello from index page' });
      }
    });
  }
});

3.2 监听事件​

在目标页面中，我们可以通过 getOpenerEventChannel 方法来监听事件：

javascript
// pages/detail/detail.js
Page({
  onLoad() {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('sendData', function(data) {
      console.log('Received data:', data);
    });

    // 发送数据回源页面
    eventChannel.emit('onDataReceived', { message: 'Hello from detail page' });
  }
});
备注

事件通信适合在页面之间传递复杂的数据对象，或者需要在页面之间进行双向通信的场景。

4. 实际案例​

假设我们正在开发一个电商小程序，用户可以在商品列表页面点击某个商品，跳转到商品详情页面，并在详情页面中显示商品的详细信息。

4.1 商品列表页面​

javascript
// pages/productList/productList.js
Page({
  navigateToDetail(product) {
    wx.navigateTo({
      url: `/pages/productDetail/productDetail?id=${product.id}`,
      events: {
        onAddToCart: function(product) {
          console.log('Product added to cart:', product);
        }
      },
      success: function(res) {
        res.eventChannel.emit('sendProduct', product);
      }
    });
  }
});

4.2 商品详情页面​

javascript
// pages/productDetail/productDetail.js
Page({
  onLoad(options) {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('sendProduct', function(product) {
      console.log('Received product:', product);
      // 在这里可以更新页面数据，显示商品详情
    });

    // 模拟用户点击加入购物车
    this.addToCart = function() {
      eventChannel.emit('onAddToCart', { id: options.id, name: 'Example Product' });
    };
  }
});

5. 总结​

在小程序开发中，页面间数据共享是一个非常重要的技术。通过全局数据、页面传参和事件通信，我们可以灵活地在不同页面之间传递和共享数据。每种方法都有其适用的场景，开发者可以根据实际需求选择合适的方式。

6. 附加资源与练习​

  • 练习 1: 尝试在你的小程序中使用全局数据来存储用户偏好设置，并在不同页面中访问和修改这些设置。
  • 练习 2: 实现一个简单的页面传参功能，将用户输入的数据传递到另一个页面并显示出来。
  • 练习 3: 使用事件通信实现一个双向数据传递的功能，比如在两个页面之间传递表单数据。

通过以上练习，你将更好地掌握页面间数据共享的技术，并能够在实际项目中灵活应用。