小程序的页面跳转与传参

在小程序开发中，页面之间的跳转是非常常见的操作，而且在一些场景中，我们还需要传递一些参数到目标页面。本篇文章将为大家介绍小程序中的页面跳转和传参的方法。

页面跳转

小程序中页面跳转可以通过导航栏、按钮点击等方式触发。在跳转之前，我们需要先获取到目标页面的路径。

小程序提供了navigator标签来实现页面的跳转功能。我们可以在navigator标签中设置url属性来指定跳转的目标页面路径。

<navigator url="/pages/destination/destination"></navigator>

上述代码演示了通过navigator标签进行页面跳转的一般用法。在实际使用中，我们可以在按钮的bindtap事件中触发跳转。

<button bindtap="redirectToPage">跳转到目标页面</button>

Page({
  redirectToPage: function() {
    wx.redirectTo({
      url: '/pages/destination/destination'
    })
  }
})

除了使用navigator标签进行页面跳转，我们还可以使用wx.navigateTo方法来实现。wx.navigateTo方法接收一个参数url，用于指定目标页面路径。

wx.navigateTo({
  url: '/pages/destination/destination'
})

在实际使用中，我们可以在按钮的点击事件中触发跳转。

<button bindtap="navigateToPage">跳转到目标页面</button>

Page({
  navigateToPage: function() {
    wx.navigateTo({
      url: '/pages/destination/destination'
    })
  }
})

在一些场景中，我们需要将一些参数传递到目标页面，以便在目标页面中展示对应的内容。下面是传递参数的两种常见方式。

我们可以通过在url上添加query参数的方式来进行页面传参。在目标页面中，我们可以通过onLoad生命周期函数中的options参数来获取传递的参数。

wx.navigateTo({
  url: '/pages/destination/destination?id=1&name=Tom'
})

Page({
  onLoad: function(options) {
    console.log(options.id) // 输出 1
    console.log(options.name) // 输出 Tom
  }
})

除了通过url传参外，我们还可以通过在app.js定义全局属性的方式进行页面传参。

App({
  globalData: {
    id: 1,
    name: 'Tom'
  }
})

在目标页面的onLoad生命周期函数中，我们可以通过getApp().globalData来获取全局属性。

Page({
  onLoad: function(options) {
    console.log(getApp().globalData.id) // 输出 1
    console.log(getApp().globalData.name) // 输出 Tom
  }
})

本篇文章介绍了小程序中页面跳转和传参的方法。我们可以使用navigator标签或wx.navigateTo方法进行页面跳转，通过在url上添加query参数或使用全局属性来进行页面传参。希望本文能对大家在小程序开发中的页面跳转和传参有所帮助。