微信小程序中多个页面传参通信的学习与实践

下面是 “微信小程序中多个页面传参通信的学习与实践”的完整攻略：

一、背景概述

在微信小程序开发中，经常需要跨页面进行参数传递。如何实现跨页面传参通信是小程序开发必备技能之一。

二、传参方式

微信小程序中，实现多个页面之间传参通信的方式有很多，常用的有以下方式：

1. 链接传参

在“页面跳转”中，使用wx.navigateTo或wx.redirectTo进行跳转时，可以在url后面加上参数。跳转到目标页面后，在目标页面中使用onLoad生命周期函数获取参数即可。

示例代码：

// 跳转页面时传参
wx.navigateTo({
  url: '/pages/targetPage/targetPage?id=1&name=hello'
})

// 目标页面中获取参数
onLoad(options) {
  console.log(options.id) // 1
  console.log(options.name) // hello
}

2. 缓存传参

微信小程序提供了本地缓存的API，可以通过缓存来在不同页面之间传递小量的数据。

示例代码：

// 在源页面中设置缓存
wx.setStorageSync('key', 'value')

// 在目标页面中获取缓存
var value = wx.getStorageSync('key')
console.log(value) // value

3. 全局变量传参

在小程序开发中，我们可以使用getApp获取到小程序的实例。在小程序实例上定义一个全局变量，并将其值设置为要传递的参数。在目标页面中使用getApp获取该变量值即可。

示例代码：

// 在源页面中设置全局变量
getApp().globalData.name = 'hello'

// 在目标页面中获取全局变量
console.log(getApp().globalData.name) // hello

4. 事件传参

可以通过自定义事件，在不同页面之间传递参数。

示例代码：

// 在源页面中定义自定义事件并传递参数
var detail = {
  name: 'hello',
  age: 18
}
var event = {}
event.currentTarget = {}
event.currentTarget.dataset = {
  detail: detail
}
this.triggerEvent('customEvent', event)

// 在目标页面中监听自定义事件并获取参数
targetHandler(event) {
  console.log(event.detail.name) // hello
  console.log(event.detail.age) // 18
}

三、示例说明

1. 需求背景

一个小程序中有两个页面：一个首页和一个详情页。点击首页中的某一项列表进入详情页，需要在详情页展示该项数据的详细信息。

在涉及到多个页面间传参通信的场景中，该需求是非常典型的一个案例。

2. 实现过程

2.1 在首页中传参

首页使用wx.navigateTo进行跳转，并将需要传递的参数通过url传递给目标页面。具体实现代码如下：

// 首页中跳转到详情页，同时传递参数
wx.navigateTo({
  url: '/pages/detail/detail?id=123&name=小明&age=18'
})

2.2 在详情页中接收参数

在详情页的onLoad生命周期函数中，可以获取到从首页传递过来的参数。

// 获取首页传递过来的参数
onLoad(options) {
  console.log(options.id) // 123
  console.log(options.name) // 小明
  console.log(options.age) // 18
}

2.3 处理参数

在详情页中，我们可以使用从首页传递过来的参数，完成我们的需求。例如：展示该项数据的详细信息。

3. 总结

以上是一种常见的多个页面传参通信需求的实现方式。除了通过url传参以外，我们还可以使用缓存传参、全局变量传参、自定义事件传参等多种方式。需要根据具体业务需求和场景选择合适的传参方式。