1. 概述
微信小程序中，页面间通信是非常重要的功能。在开发小程序应用程序中，常常需要在不同的页面间传递数据或消息。本文将为大家介绍微信小程序中页面间通信的方式。
2. 页面栈
微信小程序的页面栈，即页面栈是非常重要的一个概念。页面栈是指以栈的形式记录了当前所有的页面，栈顶的页面为当前页面，栈底为小程序的初始页面。当小程序进入一个新的页面时，该页面会被推入页面栈中，当用户点击返回按钮时，会将栈顶的页面出栈，显示上一个页面。
2.1 页面栈的管理
微信小程序提供了以下几个方法来管理页面栈。
navigateTo: 保留当前页面，跳转到应用内的某个页面。
redirectTo: 关闭当前页面，跳转到应用内的某个页面。
reLaunch: 关闭当前所有页面，打开应用内的某个页面。
navigateBack: 关闭当前页面，返回上一页面或多级页面。
预览微信提供的方法，我们可以通过以下代码实现一些基本的页面跳转：
//跳转到新页面
wx.navigateTo({
url: '../newPage/newPage'
})
//跳转而新页面并关闭当前页面
wx.redirectTo({
url: '../newPage/newPage'
})
//关闭当前所有页面并跳转到新页面
wx.reLaunch({
url: '../newPage/newPage'
})
//返回上一页面
wx.navigateBack({
delta: 1
})
2.2 页面传参
在小程序中，我们可以通过页面跳转的方式完成页面间的数据传递。在跳转时传递参数，接收路由参数，可以在目标页面的onLoad事件中接收到路由传参。
下面是一个简单的页面跳转传参的示例：
//从当前页面跳转到目标页面，并传一个参数a:1到目标页面上
wx.navigateTo({
url: '../myPage/myPage?a=1'
})
//在目标页面的onLoad事件中接收到传递的参数
Page({
onLoad: function(options) {
console.log(options.a)
}
})
2.3 页面之间的数据传递
在微信小程序开发中，数据的传递可以通过全局变量、缓存、事件或者数据劫持等方式来完成。
在页面跳转过程中，我们可以将需要传递的数据存入小程序全局变量getApp()中，在目标页面中取出所需数据。
下面是一个通过全局变量来传递数据的示例：
//跳转到新页面，并将一个变量a：1存入全局
getApp().globalData.a = 1
wx.navigateTo({
url: '../myPage/myPage'
})
//在目标页面中取出全局变量中存的数据
Page({
onLoad: function(options) {
console.log(getApp().globalData.a)
}
})
3. 全局事件
在不熟悉页面栈，或者需要在不同页面之间传递数据或消息时，可以使用全局事件。事件是指在特定时刻被触发的某个函数或者方法。
在微信小程序中，我们使用wx.App的全局方法on和emit来管理全局事件。
3.1 on方法:
on方法用于定义全局事件，可在多个页面使用，也可以在任意时刻触发。下面是示例代码：
//在home页面中定义全局事件
getApp().oneventName = function (data) {
console.log(data)
}
//在其他页面中使用全局事件
getApp().emit('eventName', { name: '张三', age: 18})
3.2 emit方法：
emit方法被用来触发全局事件，也就是在任意页面中触发定义好的全局事件。代码示例如下：
//在home页面中定义全局事件
getApp().oneventName = function (data) {
console.log(data)
}
//在其他页面中使用全局事件
getApp().emit('eventName', { name: '张三', age: 18})
4. 使用缓存
微信小程序提供了缓存数据的方法，将需要共享和传递的数据存入缓存中，在其他页面中取出所需数据。缓存分为两种：临时缓存和永久缓存。
4.1 临时缓存: wx.setStorageSync/wx.getStorageSync
使用wx.setStorageSync()方法可以将需要的数据存入缓存中，在其他页面中可以通过wx.getStorageSync()方法取出所需数据。
下面是通过临时缓存存取数据的示例代码：
//在A页面中将需要的数据存入缓存中
wx.setStorageSync('myData', { name: '张三', age: 18 })
//在B页面中取出缓存中存好的数据
var data = wx.getStorageSync('myData')
console.log(data)
4.2 永久缓存：wx.setStorage/wx.getStorage
使用wx.setStorage()方法可以将需要的数据永久缓存到本地的数据目录中，在其他页面中可以通过wx.getStorage()方法取出所需数据。
下面是永久缓存方式存取数据的示例代码：
//在A页面中将需要的数据永久存入本地
wx.setStorage({
key: "myName",
data: { name: '张三', age: 18 }
})
//在B页面中取出缓存中存好的数据
wx.getStorage({
key: 'myName',
success: function(res) {
console.log(res.data)
}
})
5. 使用storage监听事件
使用小程序的storage API，我们可以向其他页面发送事件。在小程序中，只要某个页面调用wx.setStorageSync或wx.setStorage方法修改存储数据了，那么就会触发wx.storage事件。开发者可以在其他页面切换到后，通过wx.onStorageChange监听到对应数据的变化。
下面是示例代码：
//在页面A中触发storage事件
wx.setStorageSync('name', '张三')
//在页面B中监听storage事件，并处理变化信息
wx.onStorageChange(function (res) {
console.log('缓存数据变化了：', res.key, res.data)
})
6.总结
页面间通信是微信小程序开发中的常见需求，本文为大家介绍了基于页面栈、全局事件、缓存数据、storage监听事件等方式来实现页面间通信。对于小程序开发者而言，选择适合自己的通信方式是非常重要的。