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

微信小程序是一种用于开发移动端应用的框架，它允许开发者使用HTML、CSS和JavaScript来构建小程序。小程序的界面一般由多个页面组成，而这些页面之间的通信和数据传递是非常重要的。本文将介绍小程序中跨页面通信和数据传递的几种常见方式，并提供详细的代码案例。

一、跨页面通信方式

1. 使用全局变量

在小程序中，可以使用 getApp() 函数获取小程序实例。每个小程序都有一个全局的 App 实例，通过将数据存储在 App 实例的属性中，可以实现不同页面之间的数据共享。

// app.js
App({
  globalData: {
    userInfo: null
  }
})

// 页面A
const app = getApp()
app.globalData.userInfo = { name: '小明', age: 20 }

// 页面B
const app = getApp()
const userInfo = app.globalData.userInfo
console.log(userInfo)  // 输出 { name: '小明', age: 20 }

通过将数据存储在全局变量中，可以在不同的页面中共享数据。

1. 使用事件总线

事件总线是一种常用的跨页面通信方式，它利用小程序的事件机制来发送和接收事件。事件总线通常是一个全局的对象，可以在任何地方订阅和发布事件。

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

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

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

eventBus.off = function(event, callback) {
  if (!this[event]) {
    return
  }
  if (!callback) {
    delete this[event]
  } else {
    const index = this[event].indexOf(callback)
    if (index !== -1) {
      this[event].splice(index, 1)
    }
  }
}

module.exports = eventBus

使用事件总线，可以在多个页面中订阅和发布事件。

// 页面A
const eventBus = require('event-bus.js')

eventBus.on('userInfoChanged', (userInfo) => {
  console.log(userInfo)  // 输出 { name: '小明', age: 21 }
})

// 页面B
const eventBus = require('event-bus.js')

eventBus.emit('userInfoChanged', { name: '小明', age: 21 })

1. 使用页面栈

小程序内置了一个页面栈，用于管理页面的打开和关闭。可以利用页面栈的特性来实现跨页面通信。

// 页面A
wx.navigateTo({
  url: 'pageB?pageId=123'
})

// 页面B
const pages = getCurrentPages()
const prevPage = pages[pages.length - 2]
const pageId = prevPage.options.pageId
console.log(pageId)  // 输出 123

在页面B中，可以通过 getCurrentPages() 函数获取当前页面栈的信息，从而获取到页面A传递的数据。

二、数据传递方式

1. URL参数传递

在小程序中，可以通过URL参数传递数据。页面跳转时，可以在URL中携带参数，并在目标页面中通过options属性获取参数。

// 页面A
wx.navigateTo({
  url: 'pageB?id=123&name=小明'
})

// 页面B
const options = getCurrentPages()[getCurrentPages().length - 1].options
console.log(options.id)    // 输出 123
console.log(options.name)  // 输出 小明

1. Storage缓存

小程序提供了Storage API，可以用于数据的存储和读取。可以将数据存储在Storage中，然后在需要的页面读取数据。

// 页面A
wx.setStorageSync('userInfo', { name: '小明', age: 20 })

// 页面B
const userInfo = wx.getStorageSync('userInfo')
console.log(userInfo)  // 输出 { name: '小明', age: 20 }

1. 数据库存储

小程序还提供了数据库API，可以用于数据的存储和读取。可以将数据存储在数据库中，然后在需要的页面读取数据。

// 页面A
const db = wx.cloud.database()
db.collection('userInfo').add({
  data: { name: '小明', age: 20 }
})

// 页面B
const db = wx.cloud.database()
db.collection('userInfo').get().then(res => {
  console.log(res.data)  // 输出 [{ name: '小明', age: 20 }]
})

通过使用数据库API，可以在不同的页面间存储和读取数据。

以上就是小白学习微信小程序的跨页面通信和数据传递的内容，包括了几种常见的跨页面通信方式和数据传递方式，并提供了详细的代码案例。通过学习和理解这些方法，相信你能够在实际开发中灵活运用，实现小程序中页面间的通信和数据传递。