1.0.1 • Published 1 year ago
@shengkai/app-bridge v1.0.1
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
- data
- 类型:any
- 说明:通信建立成功时发送的数据
- iframe
- 类型:HTMLIFrameElement
- 说明:建立通信的子应用iframe对象
- onFetch
- 类型:() => void
- 说明:子应用请求回调,在建立通信时同时也会对子应用的所有fetch和xhr请求建立监听
SubAppOptions
- onMessage
- 类型:(data: any) => void
- 说明:子应用接收消息回调