小程序中如何实现跨页面数据共享

在小程序中，有时我们希望多个页面之间能够共享一些数据，例如用户登录信息、购物车数据等。但是小程序的页面之间是相互独立的，不能直接访问或传递数据。

本文将介绍几种在小程序中实现跨页面数据共享的方法。

1. 使用全局变量

小程序中可以使用全局变量来存储需要跨页面共享的数据。在app.js中定义一个全局变量，其他页面可以直接访问和修改该变量。

示例代码如下：

// app.js
App({
  globalData: {
    userInfo: null, // 全局变量
  }
})

// page1.js
const app = getApp()

Page({
  data: {
    userInfo: null,
  },
  onLoad: function () {
    this.setData({
      userInfo: app.globalData.userInfo
    })
  }
})

// page2.js
const app = getApp()

Page({
  data: {
    userInfo: null,
  },
  onLoad: function () {
    this.setData({
      userInfo: app.globalData.userInfo
    })
  }
})

2. 使用缓存

小程序中可以使用缓存来存储需要跨页面共享的数据。通过wx.setStorageSync方法可以将数据存储到缓存中，然后在其他页面中使用wx.getStorageSync方法读取缓存数据。

示例代码如下：

// page1.js
wx.setStorageSync('userInfo', { name: 'John', age: 25 })

// page2.js
const userInfo = wx.getStorageSync('userInfo')

3. 使用事件广播

小程序中可以使用事件广播的方式实现跨页面数据共享。通过wx.on方法监听事件，在需要共享数据的页面中使用wx.emit方法触发事件，并携带需要共享的数据。

示例代码如下：

// page1.js
Page({
  onLoad: function () {
    wx.on('userDataChanged', (data) => {
      console.log(data) // 输出：{ name: 'John', age: 25 }
    })
  },
  changeData: function () {
    const userData = { name: 'John', age: 25 }
    wx.emit('userDataChanged', userData)
  }
})

// page2.js
Page({
  onLoad: function () {
    wx.on('userDataChanged', (data) => {
      console.log(data) // 输出：{ name: 'John', age: 25 }
    })
  }
})

总结

本文介绍了三种实现小程序跨页面数据共享的方法：使用全局变量、使用缓存和使用事件广播。不同的方法适用于不同的场景，根据具体需求选择合适的方法来实现跨页面数据共享。

本文来自极简博客，作者：数据科学实验室，转载请注明原文链接：小程序中如何实现跨页面数据共享