返回

巧用 Storage 和 事件监听，轻松实现小程序跨页面数据传递与事件响应

前端

在实际工作中，有很多场景需要在第二个页面中将用户操作之后的将数据回传到上一页面。现在将我的方案分享给小伙伴。之所以将 Storage 定义成全局的，是为了保证第一个页面放到 Storage 中和第二个页面从 Storage 中取出的 emitter 是同一个实例，如此第一个页面才能正确监听第二个页面发出的事件。

Storage 简介

Storage 是小程序提供的本地存储解决方案，可以存储键值对数据。Storage 的数据在小程序的整个生命周期内都存在，不会因为页面跳转或小程序重启而丢失。

事件监听简介

事件监听是小程序提供的事件处理机制，允许开发者在小程序中监听特定事件的发生，并执行相应的处理函数。事件监听可以跨页面使用，即在一个页面中监听另一个页面发出的事件。

跨页面数据传递

利用 Storage 传递数据

  1. 在第一个页面中，将需要传递的数据存储到 Storage 中。
// 第一个页面
Page({
  data: {
    data: '需要传递的数据'
  },
  onLoad() {
    wx.setStorageSync('data', this.data.data)
  }
})
  1. 在第二个页面中，从 Storage 中获取数据。
// 第二个页面
Page({
  onLoad() {
    const data = wx.getStorageSync('data')
    // 使用数据
  }
})

利用事件监听传递数据

  1. 在第一个页面中，创建事件监听，并在事件处理函数中将需要传递的数据作为参数传递出去。
// 第一个页面
Page({
  data: {
    data: '需要传递的数据'
  },
  onLoad() {
    this.triggerEvent('dataChanged', this.data.data)
  }
})
  1. 在第二个页面中，监听第一个页面发出的事件，并在事件处理函数中接收数据。
// 第二个页面
Page({
  onLoad() {
    this.on('dataChanged', function(data) {
      // 使用数据
    })
  }
})

跨页面事件响应

利用 Storage 响应事件

  1. 在第一个页面中，将需要响应的事件存储到 Storage 中。
// 第一个页面
Page({
  data: {
    event: '需要响应的事件'
  },
  onLoad() {
    wx.setStorageSync('event', this.data.event)
  }
})
  1. 在第二个页面中，从 Storage 中获取事件，并触发该事件。
// 第二个页面
Page({
  onLoad() {
    const event = wx.getStorageSync('event')
    this.triggerEvent(event)
  }
})

利用事件监听响应事件

  1. 在第一个页面中，创建事件监听，并在事件处理函数中触发需要响应的事件。
// 第一个页面
Page({
  onLoad() {
    this.triggerEvent('需要响应的事件')
  }
})
  1. 在第二个页面中，监听第一个页面发出的事件，并在事件处理函数中执行相应的操作。
// 第二个页面
Page({
  onLoad() {
    this.on('需要响应的事件', function() {
      // 执行相应的操作
    })
  }
})

结语

Storage 和事件监听是小程序中非常重要的两个特性，掌握了它们的使用方法，可以极大地提高小程序的开发效率。希望本文对小伙伴们有所帮助。