App Bridge

使用

主应用

import { useRef } from 'react'
import { appBridge } from '@shengkai/app-bridge'

export default function Main() {
  const iframeRef = useRef<HTMLIFrameElement>(null)

  const onLoad = () => {
    appBridge.main({
      data: {
        user: '',
        pwd: '',
      },
      iframe: iframeRef.current!,
    })
  }

  return <iframe ref={iframeRef} src="http://172.168.18.250:5174" className="h-full w-full" onLoad={onLoad} />
}

子应用

import { appBridge } from '@shengkai/app-bridge'

appBridge.sub({
  onMessage: async (data: {
    user: string
    pwd: string
  }) => {
    const res = await fetch('/api/auth/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        username: data.user,
        password: data.pwd,
      }),
    })
    const json = await res.json()
    localStorage.setItem('token', json.data.access_token)
  },
})

配置项

MainAppOptions

1. data

• 类型：any
• 说明：通信建立成功时发送的数据

2. iframe

• 类型：HTMLIFrameElement
• 说明：建立通信的子应用iframe对象

3. onFetch

• 类型：() => void
• 说明：子应用请求回调，在建立通信时同时也会对子应用的所有fetch和xhr请求建立监听

SubAppOptions

1. onMessage

• 类型：(data: any) => void
• 说明：子应用接收消息回调