本申請(qǐng)涉及微前端，尤其涉及一種微前端系統(tǒng)、通信方法、電子設(shè)備及存儲(chǔ)介質(zhì)。

背景技術(shù)：

1、微前端是一種現(xiàn)代化web前端集成方案，提供將多個(gè)獨(dú)立開發(fā)的應(yīng)用整合至統(tǒng)一框架的方法及策略。微前端架構(gòu)旨在解決單體應(yīng)用在一個(gè)相對(duì)長(zhǎng)的時(shí)間跨度下，由于參與人員和團(tuán)隊(duì)的增多、技術(shù)變遷等，從一個(gè)普通應(yīng)用演變成一個(gè)巨石應(yīng)用(frontendmonolith)后，隨之而來的應(yīng)用不可維護(hù)問題。

2、目前，較為流行的微前端框架包括：microapp、qiankun。兩者使用的并非iframe(內(nèi)聯(lián)框架)技術(shù)。它們的主要問題是對(duì)舊應(yīng)用支持不友好，且應(yīng)用之間的隔離不夠徹底等問題。隨著iframe技術(shù)在微前端的使用，其能夠做到很好的隔離，受到了很大的認(rèn)可。

3、然而，iframe技術(shù)同樣帶來的新的問題，那就是微前端系統(tǒng)內(nèi)部主要依靠瀏覽器提供的postmessage?api(應(yīng)用程序編程接口，application?programming?interface)實(shí)現(xiàn)通信，具有很大的限制。

技術(shù)實(shí)現(xiàn)思路

1、基于上述技術(shù)現(xiàn)狀，本申請(qǐng)?zhí)岢鲆环N微前端系統(tǒng)、通信方法、電子設(shè)備及存儲(chǔ)介質(zhì)，能夠?qū)崿F(xiàn)微前端系統(tǒng)中框架與iframe對(duì)象的精準(zhǔn)通信。

2、根據(jù)本申請(qǐng)實(shí)施例的第一方面，提供了一種微前端系統(tǒng)的通信方法，所述微前端系統(tǒng)包括：子應(yīng)用和框架模塊，所述方法包括：所述子應(yīng)用發(fā)送第一請(qǐng)求消息至所述框架模塊，其中，所述第一請(qǐng)求消息攜帶有第一標(biāo)識(shí)，所述第一標(biāo)識(shí)為所述子應(yīng)用中第一iframe對(duì)象的標(biāo)識(shí)；所述子應(yīng)用接收所述框架模塊返回的第一響應(yīng)消息；其中，所述第一響應(yīng)消息攜帶有所述第一標(biāo)識(shí)；所述子應(yīng)用通過所述第一標(biāo)識(shí)指示所述第一iframe對(duì)象消費(fèi)所述第一響應(yīng)消息中的數(shù)據(jù)。

3、在一些實(shí)施例中，所述子應(yīng)用發(fā)送第一請(qǐng)求消息至所述框架模塊之前，所述方法還包括：生成隨機(jī)字符串；將所述隨機(jī)字符串作為所述第一標(biāo)識(shí)添加至所述第一請(qǐng)求消息中。

4、在一些實(shí)施例中，所述第一請(qǐng)求消息還攜帶有目標(biāo)應(yīng)用程序編程接口；所述第一響應(yīng)消息還攜帶有待消費(fèi)數(shù)據(jù)；其中，所述待消費(fèi)數(shù)據(jù)為所述框架模塊基于與目標(biāo)應(yīng)用程序編程接口匹配成功的應(yīng)用程序編程接口確定的數(shù)據(jù)；所述子應(yīng)用通過所述第一標(biāo)識(shí)指示所述第一iframe對(duì)象消費(fèi)所述第一響應(yīng)消息中的數(shù)據(jù)，包括：所述子應(yīng)用通過所述第一標(biāo)識(shí)指示所述第一iframe對(duì)象消費(fèi)所述第一響應(yīng)消息中的所述待消費(fèi)數(shù)據(jù)。

5、在一些實(shí)施例中，所述子應(yīng)用通過所述第一標(biāo)識(shí)指示所述第一iframe對(duì)象消費(fèi)所述第一響應(yīng)消息中的數(shù)據(jù)之后，所述方法還包括：所述子應(yīng)用在監(jiān)聽到第二消息的情況下，向共享工作進(jìn)程發(fā)送第二消息，以使所述共享工作進(jìn)程發(fā)送所述第二消息至所述子應(yīng)用的第二iframe對(duì)象；其中，所述子應(yīng)用的第一iframe對(duì)象和第二iframe對(duì)象均已在所述共享工作進(jìn)程中注冊(cè)。

6、根據(jù)本申請(qǐng)實(shí)施例的第二方面，提供了一種微前端系統(tǒng)的通信方法，所述微前端系統(tǒng)包括：子應(yīng)用和框架模塊，所述方法包括：所述框架模塊接收所述子應(yīng)用發(fā)送的第一請(qǐng)求消息，其中，所述第一請(qǐng)求消息攜帶有第一標(biāo)識(shí)，所述第一標(biāo)識(shí)為所述子應(yīng)用中第一iframe對(duì)象的標(biāo)識(shí)；所述框架模塊響應(yīng)于所述第一請(qǐng)求消息，發(fā)送第一響應(yīng)消息至所述子應(yīng)用，以使所述子應(yīng)用通過所述第一標(biāo)識(shí)指示所述第一iframe對(duì)象消費(fèi)所述第一響應(yīng)消息中的數(shù)據(jù)；其中，所述第一響應(yīng)消息攜帶有所述第一標(biāo)識(shí)。

7、在一些實(shí)施例中，所述第一請(qǐng)求消息中攜帶有目標(biāo)應(yīng)用程序編程接口；所述框架模塊接收所述子應(yīng)用發(fā)送的第一請(qǐng)求消息之前，所述方法還包括：

8、所述框架模塊注冊(cè)多個(gè)應(yīng)用程序編程接口；響應(yīng)于所述第一請(qǐng)求消息，發(fā)送第一響應(yīng)消息至所述子應(yīng)用，包括：所述框架模塊通過所述多個(gè)應(yīng)用程序編程接口匹配所述目標(biāo)應(yīng)用程序編程接口；所述框架模塊基于與目標(biāo)應(yīng)用程序編程接口匹配成功的應(yīng)用程序編程接口確定待消費(fèi)數(shù)據(jù)；將所述待消費(fèi)數(shù)據(jù)添加至所述第一響應(yīng)消息中，并發(fā)送所述第一響應(yīng)消息至所述子應(yīng)用。

9、在一些實(shí)施例中，所述框架模塊響應(yīng)于所述第一請(qǐng)求消息，發(fā)送第一響應(yīng)消息至所述子應(yīng)用之后，所述方法還包括：確定廣播消息的接收方；基于所述接收方確定所述廣播消息的發(fā)送模式；基于所述廣播消息的發(fā)送模式發(fā)送所述廣播消息。

10、在一些實(shí)施例中，所述發(fā)送模式包括：向所有子應(yīng)用發(fā)送的第一發(fā)送模式、向任一子應(yīng)用發(fā)送的第二發(fā)送模式以及向任一iframe對(duì)象發(fā)送的第三發(fā)送模式。

11、根據(jù)本申請(qǐng)實(shí)施例的第三方面，提供了一種微前端系統(tǒng)，所述微前端系統(tǒng)包括：子應(yīng)用和框架模塊；所述子應(yīng)用，用于發(fā)送第一請(qǐng)求消息至所述框架模塊，其中，所述第一請(qǐng)求消息攜帶有第一標(biāo)識(shí)，所述第一標(biāo)識(shí)為所述子應(yīng)用中第一iframe對(duì)象的標(biāo)識(shí)；所述子應(yīng)用，還用于接收所述框架模塊返回的第一響應(yīng)消息；其中，所述第一響應(yīng)消息攜帶有所述第一標(biāo)識(shí)；所述子應(yīng)用，還用于通過所述第一標(biāo)識(shí)指示所述第一iframe對(duì)象消費(fèi)所述第一響應(yīng)消息中的數(shù)據(jù)。

12、根據(jù)本申請(qǐng)實(shí)施例的第四方面，提供了一種微前端系統(tǒng)，所述微前端系統(tǒng)包括：子應(yīng)用和框架模塊；所述框架模塊，用于接收所述子應(yīng)用發(fā)送的第一請(qǐng)求消息，其中，所述第一請(qǐng)求消息攜帶有第一標(biāo)識(shí)，所述第一標(biāo)識(shí)為所述子應(yīng)用中第一iframe對(duì)象的標(biāo)識(shí)；所述框架模塊，還用于響應(yīng)于所述第一請(qǐng)求消息，發(fā)送第一響應(yīng)消息至所述子應(yīng)用，以使所述子應(yīng)用通過所述第一標(biāo)識(shí)指示所述第一iframe對(duì)象消費(fèi)所述第一響應(yīng)消息中的數(shù)據(jù)；其中，所述第一響應(yīng)消息攜帶有所述第一標(biāo)識(shí)。

13、根據(jù)本申請(qǐng)實(shí)施例的第五方面，提供了一種電子設(shè)備，包括存儲(chǔ)器和處理器；所述存儲(chǔ)器與所述處理器連接，用于存儲(chǔ)程序；所述處理器用于通過運(yùn)行所述存儲(chǔ)器中的程序，實(shí)現(xiàn)如第一方面或第二方面所述的微前端系統(tǒng)的通信方法。

14、根據(jù)本申請(qǐng)實(shí)施例的第六方面，提供了一種存儲(chǔ)介質(zhì)，所述存儲(chǔ)介質(zhì)上存儲(chǔ)有計(jì)算機(jī)程序，所述計(jì)算機(jī)程序被處理器運(yùn)行時(shí)，實(shí)現(xiàn)如第一方面或第二方面所述的微前端系統(tǒng)的通信方法。

15、根據(jù)本申請(qǐng)實(shí)施例的第七方面，提供了一種計(jì)算機(jī)程序產(chǎn)品，包括：計(jì)算機(jī)程序，所述計(jì)算機(jī)程序被處理器執(zhí)行時(shí)實(shí)現(xiàn)如第一方面或第二方面所述的微前端系統(tǒng)的通信方法。

16、本申請(qǐng)實(shí)施例中，針對(duì)基于iframe技術(shù)實(shí)現(xiàn)的微前端系統(tǒng)，提供了新的通信方式，無需按照postmessage?api的規(guī)范進(jìn)行通信?？梢栽谧討?yīng)用發(fā)送的第一請(qǐng)求消息中攜帶第一iframe對(duì)象的標(biāo)識(shí)。進(jìn)而在接收到框架模塊返回的第一響應(yīng)消息之后，通過所述第一標(biāo)識(shí)指示所述第一iframe對(duì)象消費(fèi)所述第一響應(yīng)消息中的數(shù)據(jù)。不再依賴于postmessageapi，就可以實(shí)現(xiàn)子應(yīng)用與框架模塊的通信。同時(shí)，通過第一標(biāo)識(shí)還可以準(zhǔn)確定位至作為通信一方的第一iframe對(duì)象，從而避免子應(yīng)用中多個(gè)iframe對(duì)象同時(shí)與框架模塊通信時(shí)，框架模塊無法準(zhǔn)確響應(yīng)的問題。

技術(shù)特征：

1.一種微前端系統(tǒng)的通信方法，其特征在于，所述微前端系統(tǒng)包括：子應(yīng)用和框架模塊，所述方法包括：

2.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述子應(yīng)用發(fā)送第一請(qǐng)求消息至所述框架模塊之前，所述方法還包括：

3.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述第一請(qǐng)求消息還攜帶有目標(biāo)應(yīng)用程序編程接口；所述第一響應(yīng)消息還攜帶有待消費(fèi)數(shù)據(jù)；其中，所述待消費(fèi)數(shù)據(jù)為所述框架模塊基于與目標(biāo)應(yīng)用程序編程接口匹配成功的應(yīng)用程序編程接口確定的數(shù)據(jù)；

4.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述子應(yīng)用通過所述第一標(biāo)識(shí)指示所述第一iframe對(duì)象消費(fèi)所述第一響應(yīng)消息中的數(shù)據(jù)之后，所述方法還包括：

5.一種微前端系統(tǒng)的通信方法，其特征在于，所述微前端系統(tǒng)包括：子應(yīng)用和框架模塊，所述方法包括：

6.根據(jù)權(quán)利要求5所述的方法，其特征在于，所述第一請(qǐng)求消息中攜帶有目標(biāo)應(yīng)用程序編程接口；所述框架模塊接收所述子應(yīng)用發(fā)送的第一請(qǐng)求消息之前，所述方法還包括：

7.根據(jù)權(quán)利要求5所述的方法，其特征在于，所述框架模塊響應(yīng)于所述第一請(qǐng)求消息，發(fā)送第一響應(yīng)消息至所述子應(yīng)用之后，所述方法還包括：

8.根據(jù)權(quán)利要求7所述的方法，其特征在于，所述發(fā)送模式包括：向所有子應(yīng)用發(fā)送的第一發(fā)送模式、向任一子應(yīng)用發(fā)送的第二發(fā)送模式以及向任一iframe對(duì)象發(fā)送的第三發(fā)送模式。

9.一種微前端系統(tǒng)，其特征在于，所述微前端系統(tǒng)包括：子應(yīng)用和框架模塊；

10.一種微前端系統(tǒng)，其特征在于，所述微前端系統(tǒng)包括：子應(yīng)用和框架模塊；

11.一種電子設(shè)備，其特征在于，包括存儲(chǔ)器和處理器；

12.一種存儲(chǔ)介質(zhì)，其特征在于，所述存儲(chǔ)介質(zhì)上存儲(chǔ)有計(jì)算機(jī)程序，所述計(jì)算機(jī)程序被處理器運(yùn)行時(shí)，實(shí)現(xiàn)如權(quán)利要求1至8中任意一項(xiàng)所述的微前端系統(tǒng)的通信方法。

13.一種計(jì)算機(jī)程序產(chǎn)品，其特征在于，包括：計(jì)算機(jī)程序，所述計(jì)算機(jī)程序被處理器執(zhí)行時(shí)實(shí)現(xiàn)權(quán)利要求1至8中任意一項(xiàng)所述的微前端系統(tǒng)的通信方法。

技術(shù)總結(jié)
本申請(qǐng)?zhí)岢鲆环N微前端系統(tǒng)、通信方法、電子設(shè)備及存儲(chǔ)介質(zhì)，該方法包括：子應(yīng)用發(fā)送第一請(qǐng)求消息至框架模塊，第一請(qǐng)求消息攜帶有第一標(biāo)識(shí)，第一標(biāo)識(shí)為子應(yīng)用中第一iframe對(duì)象的標(biāo)識(shí)；子應(yīng)用接收框架模塊返回的第一響應(yīng)消息；其中，第一響應(yīng)消息攜帶有第一標(biāo)識(shí)；子應(yīng)用通過第一標(biāo)識(shí)指示第一iframe對(duì)象消費(fèi)第一響應(yīng)消息中的數(shù)據(jù)。不再依賴于postMessage?API，就可以實(shí)現(xiàn)子應(yīng)用與框架模塊的通信。同時(shí)，通過第一標(biāo)識(shí)還可以準(zhǔn)確定位至作為通信一方的第一iframe對(duì)象，從而避免子應(yīng)用中多個(gè)iframe對(duì)象同時(shí)與框架模塊通信時(shí)，框架模塊無法準(zhǔn)確響應(yīng)的問題。

技術(shù)研發(fā)人員：吳丹東,王玉
受保護(hù)的技術(shù)使用者：杭州和利時(shí)自動(dòng)化有限公司
技術(shù)研發(fā)日：
技術(shù)公布日：2025/1/6