如何实现小程序的页面跳转与传参

小程序是一种轻量级的应用程序，页面之间的跳转是非常常见的功能。同时，我们可能还需要在不同页面之间传递数据。本篇博客将介绍如何在小程序中实现页面跳转以及传参的方法。

页面跳转

小程序中实现页面跳转有多种方式，以下是较为常见的两种方法：

1. 使用wx.navigateTo方法

wx.navigateTo方法用于保留当前页面，同时打开新页面。这种方式可以实现页面之间的连续跳转。示例代码如下：

// 当前页面的跳转事件处理函数
navigatorToPage: function() {
  wx.navigateTo({
    url: '/pages/newPage/newPage',
  })
}

2. 使用wx.redirectTo方法

wx.redirectTo方法用于关闭当前页面，同时打开新页面。这种方式适合于页面之间的单向跳转。示例代码如下：

// 当前页面的跳转事件处理函数
redirectToPage: function() {
  wx.redirectTo({
    url: '/pages/newPage/newPage',
  })
}

值得注意的是，以上两种方法的跳转路径均需使用小程序中定义的页面路径，路径格式为/pages/页面名称/页面名称。

页面传参

传参是指在跳转页面的同时，将数据传递到目标页面。下面有两种常用的传参方法：

1. 使用查询参数

查询参数是指在跳转路径中添加参数，通过?和&进行区分。例如，如果需要传递一个名为name的参数，可以使用以下方式：

// 当前页面的跳转事件处理函数
navigatorToPage: function() {
  wx.navigateTo({
    url: '/pages/newPage/newPage?name=value',
  })
}

// 目标页面的参数获取方法
onLoad: function(options) {
  console.log(options.name); // 输出：value
}

2. 使用全局变量

小程序中可以使用全局变量，在不同页面之间进行数据传递。以下是一个简单的示例：

// app.js文件中定义全局变量
App({
  globalData: {
    name: 'value'
  }
})

// 当前页面的跳转事件处理函数
navigatorToPage: function() {
  wx.navigateTo({
    url: '/pages/newPage/newPage',
  })
}

// 目标页面的参数获取方法
onLoad: function(options) {
  var app = getApp();
  console.log(app.globalData.name); // 输出：value
}

在上述示例中，我们通过getApp方法获取了全局实例，并通过app.globalData访问到了定义的全局变量。

以上是小程序中实现页面跳转与传参的方法。不同的需求可能会采用不同的方法，根据具体情况选择适合的方式进行开发。希望本篇博客对你有所帮助！

本文来自极简博客，作者：蓝色海洋之心，转载请注明原文链接：如何实现小程序的页面跳转与传参