小程序两个页面之间的通信方法

几日前，不知道为什么小程序的开发者工具为什么罢工了提示，不提示页面跳转的方法名了，只好打开小程序的官方文档界面。复制方法名“navigateTo”的时候，多看了一眼，不知道什么时候更新的一个属性，然后搜索了一下。2.7.3的基础库，居然是2019年的，我浏览了无数次被我忽略过了。

Table

events

页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。

既然他可以通讯，那其它的几个页面跳转方法呢，是不是也可以通信。

很严谨，其它的页面使用的描述词都是“关闭当前页面”或者“关闭所有页面”

只有“navigateTo”用的是“保留当前页面，跳转到应用内的某个页面。”

所以只有“navigateTo”可以用这个页面之间的通信

使用方法呢，其实官方的示例就挺清楚的了。

页面A：

wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

页面B：

Page({
  onLoad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

然后本着无聊，玄策红开先升一技能还是二技能，多少秒用一技能打红Buff最快的精神，把其它页面间通讯的方法也总结了一下。

第一个全局变量

也就是在globalData里面定义，简单、直接、所有页面都可以共享。

但数据量大的时候别用

App({
  globalData: {
    sharedData: ‘秋野的意’
  }
})

// 调用的时候
getApp().globalData.sharedData

第二个页面传参

常规的在url的地址后面拼接相应的参数，局限就是实现原理只能在页面跳转的时候用

当然数据量大的时候也别用

wx.navigateTo({
  url: '/pages/page/index?id=88888888'
})

// 调用的时候
onLoad: function(options) {
  console.log(options.id) // 
}

第三个本地存储

通过 wx.setStorage 和 wx.getStorage 方法在本地存储数据。

好处是数据持久化，跨页面和跨会话的时候都行。

不过读写会相对慢一点点。

wx.setStorage({
  key: 'sharedData',
  data: '秋野的意'
})

// 调用的时候
wx.getStorage({
  key: 'sharedData',
  success: function(res) {
    console.log(res.data) 
  }
})

第四个事件总线（EventBus）

通过自定义事件总线实现页面之间的通信。

// 定义一个 EventBus 类，用于实现事件总线模式
class EventBus {
  // 构造函数，初始化事件存储对象
  constructor() {
    // 用于存储事件及其对应的监听器
    this.events = {}
  }

  // 注册事件监听器的方法
  on(event, listener) {
    // 如果该事件还没有监听器，则初始化一个空数组
    if (!this.events[event]) {
      this.events[event] = []
    }
    // 将监听器添加到事件的监听器数组中
    this.events[event].push(listener)
  }

  // 触发事件的方法
  emit(event, data) {
    // 如果该事件有监听器，则依次调用这些监听器
    if (this.events[event]) {
      // 遍历并调用每个监听器，传递数据
      this.events[event].forEach(listener => listener(data))
    }
  }
}

// 创建一个 EventBus 实例
const eventBus = new EventBus()
// 导出 EventBus 实例，以便在其他模块中使用
module.exports = eventBus



// 调用的页面
const eventBus = require('../../utils/eventBus')

// 监测和设置的方法
eventBus.emit('sharedData', '我是秋野')

eventBus.on('sharedData', (data) => {
  console.log(data) 
})