页面参数传递

介绍

在小程序开发中，页面之间的导航和参数传递是非常常见的需求。无论是从一个页面跳转到另一个页面，还是在页面之间传递数据，都需要掌握页面参数传递的基本方法。本文将详细介绍如何在小程序中实现页面参数传递，并通过实际案例帮助你更好地理解这一概念。

页面参数传递的基本概念

在小程序中，页面参数传递通常通过 URL 参数的形式实现。当从一个页面跳转到另一个页面时，可以在 URL 中附加参数，目标页面可以通过这些参数来获取传递的数据。

1. 页面跳转时传递参数

在小程序中，可以使用 wx.navigateTo 或 wx.redirectTo 等方法进行页面跳转。在跳转时，可以通过 url 参数传递数据。

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

在上面的代码中，我们通过 url 参数传递了两个参数：id 和 name。目标页面可以通过 onLoad 生命周期函数获取这些参数。

2. 目标页面获取参数

在目标页面的 onLoad 生命周期函数中，可以通过 options 参数获取传递过来的参数。

javascript
Page({
  onLoad: function(options) {
    const id = options.id; // 123
    const name = options.name; // example
    console.log(id, name);
  }
});

在上面的代码中，options 对象包含了从 URL 中解析出来的参数。我们可以通过 options.id 和 options.name 来获取传递过来的数据。

实际案例

假设我们有一个商品列表页面和一个商品详情页面。当用户点击某个商品时，我们需要跳转到商品详情页面，并传递商品的 id 和 name。

1. 商品列表页面

在商品列表页面中，我们可以为每个商品添加一个点击事件，点击时跳转到商品详情页面并传递参数。

javascript
Page({
  onItemClick: function(event) {
    const itemId = event.currentTarget.dataset.id;
    const itemName = event.currentTarget.dataset.name;
    wx.navigateTo({
      url: `/pages/detail/detail?id=${itemId}&name=${itemName}`
    });
  }
});

2. 商品详情页面

在商品详情页面中，我们可以通过 onLoad 函数获取传递过来的参数，并根据这些参数加载商品详情。

javascript
Page({
  onLoad: function(options) {
    const itemId = options.id;
    const itemName = options.name;
    this.loadItemDetail(itemId, itemName);
  },
  loadItemDetail: function(id, name) {
    // 根据 id 和 name 加载商品详情
    console.log(`Loading detail for item ${id}: ${name}`);
  }
});

总结

通过本文的学习，你应该已经掌握了在小程序中如何传递页面参数的基本方法。页面参数传递是小程序开发中非常常见的需求，掌握这一技能将帮助你更好地实现页面间的数据传递和交互。

附加资源与练习

练习 1：尝试在你的小程序中实现一个简单的页面跳转，并传递多个参数。
练习 2：在目标页面中，根据传递的参数动态加载不同的内容。

提示

如果你在实现过程中遇到问题，可以参考小程序的官方文档，或者在小程序开发者社区中寻求帮助。

介绍​