小程序开发过程中，经常会遇到页面之间需要相互传递数据的情况，例如从 A 页面跳转到 B 页面后，需要将 A 页面中的某些数据传递给 B 页面进行展示或处理。本篇博客将介绍如何在小程序中实现页面间通信功能。
1. 路由跳转
小程序中页面之间的跳转使用的是路由跳转的方式。例如，我们有两个页面 A 和 B，需要从 A 页面跳转到 B 页面。
在 A 页面的逻辑部分，我们需要使用 wx.navigateTo 或 wx.redirectTo 方法进行跳转，示例代码如下：
wx.navigateTo({
url: 'pages/b/b'
})
在 B 页面的逻辑部分，我们可以通过 onLoad 函数获取从 A 页面传递过来的数据，例如：
Page({
onLoad: function (options) {
// options 中是 A 页面传递过来的数据
console.log(options)
}
})
2. 通过 URL 传递数据
通过 URL 传递数据是最常用的页面间通信方式之一。我们可以将需要传递的数据拼接到 URL 中，并在跳转到目标页面后通过 options 参数获取传递过来的数据。
在跳转时，我们可以通过 url 参数将数据以键值对的形式传递给目标页面，示例代码如下：
// 在 A 页面中跳转到 B 页面并传递数据
wx.navigateTo({
url: 'pages/b/b?name=John&age=25'
})
在 B 页面的 onLoad 函数中，我们可以通过 options 参数获取传递过来的数据，示例代码如下：
Page({
onLoad: function (options) {
// options 中是 A 页面传递过来的数据
console.log(options.name) // 输出：John
console.log(options.age) // 输出：25
}
})
3. 使用全局变量
在小程序中，可以使用全局变量来实现页面间的数据传递。全局变量即在小程序的整个生命周期内都可以访问的变量，任何页面都可以使用和修改该变量。
首先，在 app.js 中定义一个全局变量，在所有页面中都可以访问到该变量。示例代码如下：
// app.js
App({
globalData: {
name: 'John',
age: 25
}
})
在 A 页面的逻辑部分，我们可以获取和修改全局变量的值，示例代码如下：
// A 页面
var app = getApp()
console.log(app.globalData.name) // 输出：John
console.log(app.globalData.age) // 输出：25
app.globalData.name = 'Tom'
app.globalData.age = 30
在 B 页面中同样可以获取和修改全局变量的值，示例代码如下：
// B 页面
var app = getApp()
console.log(app.globalData.name) // 输出：Tom
console.log(app.globalData.age) // 输出：30
请注意，使用全局变量时要确保变量的修改是同步的，避免出现数据不一致的情况。
4. 使用事件总线
如果页面之间的通信较为复杂，并且不便使用全局变量，可以考虑使用事件总线模式来实现页面间通信。事件总线是一种发布-订阅模式，通过订阅事件和发布事件的方式实现页面之间的通信。
首先，在 app.js 中定义一个事件总线对象，并将其绑定到全局变量上，示例代码如下：
// app.js
App({
// 定义一个事件总线对象
eventBus: {
handlers: {},
on: function (event, callback) {
if (!this.handlers[event]) {
this.handlers[event] = []
}
this.handlers[event].push(callback)
},
emit: function (event, data) {
if (this.handlers[event]) {
this.handlers[event].forEach(function (callback) {
callback(data)
})
}
}
}
})
在 A 页面中，订阅事件并处理数据，示例代码如下：
var app = getApp()
app.eventBus.on('dataChanged', function (data) {
console.log(data) // 输出：Hello, world!
})
在 B 页面中，发布事件并传递数据，示例代码如下：
var app = getApp()
app.eventBus.emit('dataChanged', 'Hello, world!')
当 B 页面发布事件时，A 页面订阅的事件回调函数将会被触发，从而实现了页面间的通信。
结语
本篇博客介绍了小程序中实现页面间通信功能的几种方法，包括通过 URL 传递数据、使用全局变量以及使用事件总线。根据具体的场景需求，选择合适的方法来实现页面间的数据传递。
希望本教程对您在小程序开发中页面间通信功能的实现提供帮助，如有任何问题或疑问，欢迎留言交流。
本文来自极简博客，作者：柔情密语，转载请注明原文链接：小程序实现页面间通信功能的教程
