小白学习微信小程序的跨页面通信和数据传递

跨页面通信和数据传递在微信小程序开发中非常重要，它们可以帮助不同页面之间共享数据并实现页面间的交互。本文将详细介绍微信小程序中的跨页面通信和数据传递的相关知识，并提供代码案例进行说明。

小程序中跨页面通信的方式主要包括：

1. 使用全局变量
2. 使用事件总线
3. 使用页面栈

数据传递的方式主要包括：

1. 使用URL参数
2. 使用全局变量
3. 使用页面栈

下面我们将分别介绍这些方式，并提供相应的代码案例。

一、跨页面通信

1. 使用全局变量

小程序提供了一个全局变量 getApp()，可以用于获取小程序的实例。我们可以将数据保存在小程序的实例中，以实现在不同页面之间共享数据。

在 app.js 中定义一个全局变量：

// app.js
App({
  data: {
    globalData: 'This is a global variable'
  }
})

在其他页面中可以通过 getApp() 获取该全局变量：

// page.js
const app = getApp()

console.log(app.data.globalData)  // This is a global variable

1. 使用事件总线

事件总线可以用于在不同页面之间触发和监听事件，从而实现页面间的通信。

定义一个事件总线：

// event-bus.js
const eventBus = {}

eventBus.on = function(event, callback) {
  if (!this.events[event]) {
    this.events[event] = []
  }
  this.events[event].push(callback)
}

eventBus.emit = function(event, data) {
  if (!this.events[event]) {
    return
  }
  this.events[event].forEach(callback => {
    callback(data)
  })
}

export default eventBus

在页面A中监听事件：

// pageA.js
import eventBus from 'event-bus.js'

eventBus.on('eventA', data => {
  console.log(data)  // This is event data from pageB
})

在页面B中触发事件：

// pageB.js
import eventBus from 'event-bus.js'

eventBus.emit('eventA', 'This is event data from pageB')

1. 使用页面栈

页面栈是小程序内部维护的一个栈结构，用于管理页面的打开和关闭。通过页面栈，我们可以获取打开的其他页面实例，从而实现页面间的通信。

在页面A中获取页面B的实例：

// pageA.js
let pages = getCurrentPages()
let pageB = pages[pages.length - 2]

console.log(pageB.data)  // This is data from pageB

二、数据传递

1. 使用URL参数

小程序中可以通过URL参数来传递数据。在页面跳转时，可以通过url参数将数据传递给目标页面。

在页面A中跳转到页面B并传递参数：

// pageA.js
wx.navigateTo({
  url: '/pages/pageB/pageB?id=123&name=John'
})

在页面B中获取参数：

// pageB.js
onLoad: function(options) {
  console.log(options.id)    // 123
  console.log(options.name)  // John
}

1. 使用全局变量

使用全局变量也可以实现数据的传递。我们可以在页面A中设置全局变量，在页面B中获取该全局变量。

在页面A中设置全局变量：

// pageA.js
const app = getApp()

app.globalData.id = 123
app.globalData.name = 'John'

在页面B中获取全局变量：

// pageB.js
const app = getApp()

console.log(app.globalData.id)    // 123
console.log(app.globalData.name)  // John

1. 使用页面栈

通过页面栈，我们可以获取打开的其他页面实例，并直接访问其数据。

在页面A中获取页面B的数据：

// pageA.js
let pages = getCurrentPages()
let pageB = pages[pages.length - 2]

console.log(pageB.data.id)    // 123
console.log(pageB.data.name)  // John

以上是微信小程序中跨页面通信和数据传递的几种方式以及相应的实现代码。根据实际需求和场景，选择适合的方式进行跨页面通信和数据传递，可以更好地实现页面间的交互和数据共享。