有很多炫酷的多功能的页面，是由多个代码库里的代码渲染的，代码库不同，页面各部分是独立的。然而页面的各独立部分需要通信完成特定的功能，这里就用到了一些通信方式。

一、自定义事件

WechatIMG96的副本.jpeg

活动页面由多个楼层组成，点击收集金币的时候，会弹出任务列表的弹层（接口没数据，将就着看），两个楼层分别由两个独立的项目渲染。

点击收集金币楼层： 创建事件-->初始化事件-->派发事件，对应的流程是：document.createEvent() >> event.initMouseEvent() >> element.dispatchEvent()，其中initMouseEvent表示点击事件，它的三个参数分别是：事件名称，是否可以冒泡，是否阻止事件的默认操作

const SHOW_TASKPANEL_EVENT_TYPE = 'show-taskpanel';
const broadcastShowTaskPanelEvent = () => {
    let eventIns = document.createEvent('MouseEvents');
    eventIns.initMouseEvent(SHOW_TASKPANEL_EVENT_TYPE, true, true);
    document.dispatchEvent(eventIns)
}

任务列表弹层楼层

React.useEffect(() => {
    initShowTaskMask()
}, [])

// 监听点击收集金币
const initShowTaskMask = () => {
    document.addEventListener(SHOW_TASKPANEL_EVENT_TYPE, () => {
        setShowTaskModal(true)
    })
}

二、iframe的postMessage

截屏2022-11-28 下午2.36.36.png 创作平台点击创作页面弹出弹窗，弹窗页面通过iframe嵌入羚珑平台的页面。在羚珑平台点击上传视频后，羚珑将视频id回传给创作页面。涉及到的通信流：羚珑页上传的视频id-->创作页

羚珑页代码：

videoUpload = (videoMsg) => {
    window.postMessage(videoMsg, '*')
}

创作页代码：

// 初始化
componentDidMount() {
    window.addEventListener("message", this.receiveMessage, false);
}

// 销毁
componentWillUnmount() {
    window.removeEventListener("message", this.receiveMessage)
}

receiveMessage = (event) => {
    if (event && event.data && event.data.data) {
        ...
    }
}

微前端通信方式

一、自定义事件

二、iframe的postMessage