微信小程序页面间跳转传参方式总结-前端开发

下面是关于“微信小程序页面间跳转传参方式总结”的完整攻略。

下面是关于“微信小程序页面间跳转传参方式总结”的完整攻略。

前言

在微信小程序的开发中，我们经常需要在不同页面之间进行跳转，并且需要在页面之间传递参数。本文将总结出在微信小程序中实现页面之间传参的多种方式，并详细讲解其使用方法和注意事项。

方式一：通过 URL 参数传递数据

通过 URL 参数传递数据是最简单的一种传参方式。我们可以通过 wx.navigateTo 和 wx.redirectTo 跳转到目标页面，并在跳转的 URL 上拼接参数。

示例

在跳转到目标页面时，可以在 URL 上拼接参数，例如：

// 跳转到目标页面，同时传递参数 id 和 name
wx.navigateTo({
  url: 'pages/detail/detail?id=1&name=apple'
})

在目标页面可通过 options 对象获取参数，例如：

// 在 targetPage 中获取参数
Page({
  onLoad: function (options) {
    console.log(options.id) // 输出 1
    console.log(options.name) // 输出 "apple"
  }
})

注意事项

URL 中的参数长度和个数都有限制，请保证传递的参数数量和长度不要过长。
URL 参数传递的值只能是字符串类型，对于其他类型需进行转换处理。

方式二：通过全局变量传递数据

通过全局变量传递数据是一种简单高效的传参方式。我们可以将数据存储在全局变量中，在页面之间共享该数据。使用该方式不需要担心参数长度和个数等限制。

示例

在 App 中定义全局变量：

App({
  globalData: {
    userInfo: { name: 'Tom', age: 18 }
  }
})

在源页面中存储数据：

// 存储数据到全局变量
var app = getApp()
app.globalData.userInfo = { name: 'Jerry', age: 19 }

在目标页面中获取数据：

// 从全局变量中获取数据
var app = getApp()
var userInfo = app.globalData.userInfo

注意事项

使用该方式时需要注意全局变量的作用域和生命周期，以免出现数据混乱或丢失的情况。

方式三：通过页面栈传递数据

在页面栈中传递数据是一种相对高级的传参方式。我们可以通过将数据存储在页面栈中，在页面之间传递数据。该方式不同于 URL 传参，可以传递更丰富的数据类型，并且可以在历史记录中回退到之前的页面。

示例

在源页面中存储数据：

// 存储数据到页面栈中
wx.navigateTo({
  url: 'pages/detail/detail',
  success: function (res) {
    var targetPage = res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'hello' })
  }
})

在目标页面中获取数据：

// 从页面栈中获取数据
Page({
  onLoad: function (options) {
    var eventChannel = this.getOpenerEventChannel()
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data) // 输出 { data: 'hello' }
    })
  }
})