微信小程序参数传递详解

在微信小程序中，参数传递是非常常见的操作。例如，在不同页面之间传递数据，或者从API获取数据后通过参数传递渲染到当前页面中。本文将详细讲解微信小程序中常用的参数传递方式，以及它们的使用方法和适用场景。

Query参数

Query参数是指通过URL传递的参数。在微信小程序中，可以使用wx.navigateTo方法跳转到其他页面，并且可以带上Query参数：

wx.navigateTo({
  url: '/pages/detail?id=123'
})

在接收页面可以通过options.query访问到传递的参数：

// detail.js
Page({
  onLoad: function (options) {
    console.log(options.query.id) // 输出123
  }
})

上述示例中，我们在跳转到detail页面的同时传递了一个id=123的参数，在detail页面中通过options.query访问到了这个参数。

路由栈参数

路由栈参数是指通过navigateTo和redirectTo方法跳转到其他页面时，可以在目标页面中通过getCurrentPages()方法获取到之前页面的参数。假设我们有两个页面，分别是page1和page2:

// page1.js
wx.navigateTo({
  url: '/pages/page2?id=123'
})

// page2.js
var pages = getCurrentPages() // 获取当前页面栈
var prevPage = pages[pages.length - 2] // 获取上一页面
console.log(prevPage.options.id) // 输出123

上述示例中，我们在page1中通过navigateTo跳转到了page2页面，并且在跳转时传递了一个id=123的参数。在page2页面中，我们可以通过getCurrentPages()方法获取到当前页面栈，然后通过pages数组获取上一个页面（即page1），最后通过prevPage.options.id获取到传递的参数。

Event事件参数

Event事件参数是指触发事件时，可以将一些信息通过事件对象（Event）传递到事件处理函数中。例如，在点击按钮时传递一些数据：

<!-- index.wxml -->
<button bindtap="handleTap" data-id="123">点击</button>

// index.js
Page({
  handleTap: function (event) {
    console.log(event.currentTarget.dataset.id) // 输出123
  }
})

上述示例中，我们在按钮上绑定了handleTap事件，同时传递了一个data-id="123"的参数。在事件处理函数中，我们使用event.currentTarget.dataset.id获取到这个参数。

Page页面实例参数

Page页面实例参数是指在页面中定义一些数据，在其他地方（例如：API回调、事件处理函数）中访问这个数据。例如，在页面加载时获取用户信息，并在其他地方使用这个信息：

// index.js
Page({
  data: {
    userInfo: {}
  },
  onLoad: function () {
    wx.getUserInfo({
      success: res => {
        this.setData({ userInfo: res.userInfo })
      }
    })
  },
  handleTap: function () {
    console.log(this.data.userInfo)
  }
})

在上述示例中，我们在data中定义了一个userInfo数据，在页面加载时获取用户信息并通过setData方法更新这个数据。在handleTap事件处理函数中，我们可以通过this.data.userInfo访问到这个数据。

总结

通过本文的阅读，你应当已经掌握了微信小程序中常用的参数传递方式。需要注意的是，在实际项目中，不同的数据传递方式可以组合使用，以满足不同的业务需求。