微信小程序实现页面导航与传参功能详解

下面我会详细讲解“微信小程序实现页面导航与传参功能”的完整攻略。本文过程中会包含两条示例说明。

实现页面导航

在微信小程序中，页面导航可以通过wx.navigateTo和wx.redirectTo两个API实现。

wx.navigateTo

wx.navigateTo会创建一个新页面并进行导航。

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

在上面的示例中，我们通过url指定了要跳转的页面路径，并且通过？后面的参数进行传参。在跳转之后，通过getCurrentPages方法可获取到当前页面栈的信息，从而可以享受回退功能。

wx.redirectTo

wx.redirectTo会关闭当前页面并进行导航。

wx.redirectTo({
  url: 'pages/index/index'
})

在上面的示例中，我们通过url指定了要跳转的页面路径。在跳转之后，将无法再通过getCurrentPages方法获取到之前的页面，因此不支持回退功能。

实现页面传参

在微信小程序中，通过url传递参数是较为常见的一种方式，我们可以通过url中的query来传递参数。

页面A传参给页面B

在页面A中，我们通过url传递参数给页面B。

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

在上面的示例中，我们通过url指定了要跳转的页面路径，并且通过？后面的参数进行传参。在页面B中，我们可以通过onLoad获取到传递过来的参数。

Page({
  onLoad: function (options) {
    console.log(options.id)
  }
})

在上面的示例中，我们在onLoad函数中使用options.id来获取传递过来的参数。

页面B传参给页面A

在页面B中，我们通过wx.navigateBack来传递参数给页面A。

wx.navigateBack({
  delta: 1,
  success: function(res){
    wx.getPreviousPage().setData({
      id: 123
    })
  }
})

在上面的示例中，我们通过wx.navigateBack回到页面A，并通过wx.getPreviousPage方法获取到之前的页面A实例对象，最后通过setData方法传递参数。在页面A中，我们可以通过data获取到传递过来的参数。

Page({
  data: {
    id: null
  },
  onLoad: function () {
    console.log(this.data.id)
  }
})

在上面的示例中，我们在data中预定义了id属性，并在onLoad函数中使用this.data.id来获取传递过来的参数。

至此，我对“微信小程序实现页面导航与传参功能”的完整攻略进行了详细讲解。希望能对你有所启发。