页面通信

提示

通过本章节，了解如何实现父子应用页面通信。

localStorage

localStorage 是浏览器提供的一种在客户端存储数据的机制，它可以在不同页面之间共享数据，实现简单的跨页面通信。

// 存储数据
localStorage.setItem('key', 'value')

// 获取数据
const value = localStorage.getItem('key')

功能组件提供 获取Storage数据 / 设置Storage数据 组件
或者 JS计算 组件中，直接使用 localStorage

window 变量

可在 window 对象中定义变量，举例如：MYBRICKS_HOST，配置交互的变量与函数等

主应用定义

window.MYBRICKS_HOST = {
  token,
  getToken: () => {
    return token
  },
  navigateTo(path: string, query: any) {
    router.push({
      path,
      query,
    })
  },
}

JS计算 组件中，直接使用 window.MYBRICKS_HOST

自定义事件

JS计算 组件中，监听 my_microAppMessage 自定义事件（注意时机，最好在页面加载就监听）

可搭建逻辑云组件，项目中复用
参考自定义事件监听云组件

主应用发送指令

const getRefreshData = async function () {
  // 主应用，创建一个自定义事件
  const event = new CustomEvent('my_microAppMessage', {
    // 传参，也可以定义一个函数，低码引用
    detail: {
      message: '这是主应用发送的消息',
      lowcodeFunc: () => {
        console.log('这是一个自定义函数属性！')
      },
    },
  })
  // 主应用，触发自定义事件
  console.log('【主应用】发送刷新指令...')
  window.dispatchEvent(event)
}
getRefreshData()

发送指令

qiankun props

参考 PC 发布页面微应用扩展方式

localStorage​

window 变量​

自定义事件​

qiankun props​

localStorage

window 变量

自定义事件

qiankun props