在小程序开发中，经常会遇到跨页面通信的需求，即在不同的页面之间传递数据或者进行交互。小程序提供了多种跨页面通信的方式，本文将介绍其中几种常用的技术和实现方法。
1. 使用全局变量
在小程序中，可以通过定义一个全局变量来进行页面间的数据传递。在app.js文件中定义一个全局变量，在其他页面引入该文件即可使用该全局变量。
示例代码：
// app.js
App({
globalData: {
userInfo: null
}
})
在其他页面使用该全局变量：
// index.js
const app = getApp()
Page({
data: {
userInfo: null
},
onLoad: function () {
this.setData({
userInfo: app.globalData.userInfo
})
}
})
这种方式的缺点是全局变量只能存储简单的数据类型，如果需要传递复杂的数据结构，则不适合使用。
2. 使用页面间事件监听
小程序提供了事件监听的方式，通过wx.on方法监听事件，在其他页面通过wx.triggerEvent方法触发事件。这种方式可以实现页面间的双向通信。
示例代码：
// pageA.js
Page({
onLoad: function () {
this.onPageBEvent()
},
onPageBEvent: function () {
wx.on('pageBEvent', (data) => {
console.log('pageBEvent triggered', data)
})
}
})
// pageB.js
Page({
onTap: function () {
wx.triggerEvent('pageBEvent', { message: 'Hello from pageB' })
}
})
在页面A的onLoad生命周期函数中调用onPageBEvent方法监听pageBEvent事件，在页面B的onTap方法中调用wx.triggerEvent方法触发pageBEvent事件，并传递一个数据对象。
3. 使用Storage API
小程序提供了Storage API来存储和读取数据。可以通过设置wx.setStorageSync方法设置数据，在其他页面通过wx.getStorageSync方法获取数据。
示例代码：
// pageA.js
Page({
onLoad: function () {
wx.setStorageSync('message', 'Hello from pageA')
}
})
// pageB.js
Page({
onLoad: function () {
const message = wx.getStorageSync('message')
console.log(message)
}
})
在页面A的onLoad生命周期函数中调用wx.setStorageSync方法设置数据，在页面B的onLoad生命周期函数中调用wx.getStorageSync方法获取数据。
这种方式适合存储较小量的数据，如果需要存储大量数据或者需要频繁读写数据，则不适合使用。
4. 使用消息订阅与发布
小程序中的跨页面通信还可以借助消息订阅与发布机制来实现。可以使用第三方库如tiny-emitter或者自行实现一个简单的订阅与发布模块。
示例代码：
// eventBus.js
class EventBus {
constructor() {
this.events = {}
}
on(eventName, callback) {
if (!this.events[eventName]) {
this.events[eventName] = []
}
this.events[eventName].push(callback)
}
emit(eventName, data) {
if (this.events[eventName]) {
this.events[eventName].forEach(callback => callback(data))
}
}
}
const eventBus = new EventBus()
export default eventBus
使用订阅与发布机制进行页面间通信：
// pageA.js
import eventBus from 'eventBus'
Page({
onLoad: function () {
eventBus.on('pageBEvent', (data) => {
console.log('pageBEvent triggered', data)
})
}
})
// pageB.js
import eventBus from 'eventBus'
Page({
onTap: function () {
eventBus.emit('pageBEvent', { message: 'Hello from pageB' })
}
})
在页面A使用eventBus.on方法订阅pageBEvent事件，在页面B使用eventBus.emit方法触发pageBEvent事件，并传递一个数据对象。
总结
小程序中的跨页面通信技术有很多种，可以根据具体的需求选择合适的方法。本文介绍了几种常用的方法，包括使用全局变量、页面间事件监听、Storage API和消息订阅与发布。开发者可以根据项目的实际情况选择合适的方法来进行跨页面通信。
本文来自极简博客，作者：码农日志，转载请注明原文链接：小程序中的跨页面通信技术
