CN118034717A - 微前端系统的页面配置方法、装置和计算机设备 - Google Patents

微前端系统的页面配置方法、装置和计算机设备 Download PDF

Info

Publication number
CN118034717A
CN118034717A CN202311817190.1A CN202311817190A CN118034717A CN 118034717 A CN118034717 A CN 118034717A CN 202311817190 A CN202311817190 A CN 202311817190A CN 118034717 A CN118034717 A CN 118034717A
Authority
CN
China
Prior art keywords
application
page
sub
main
address
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202311817190.1A
Other languages
English (en)
Inventor
曾昭志
庄鸿斌
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shenzhen Kemai Technology Co ltd
Original Assignee
Shenzhen Kemai Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shenzhen Kemai Technology Co ltd filed Critical Shenzhen Kemai Technology Co ltd
Priority to CN202311817190.1A priority Critical patent/CN118034717A/zh
Publication of CN118034717A publication Critical patent/CN118034717A/zh
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/60Software deployment
    • G06F8/61Installation
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/70Software maintenance or management
    • G06F8/71Version control; Configuration management
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/445Program loading or initiating
    • G06F9/44521Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G06F9/44526Plug-ins; Add-ons

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computer Security & Cryptography (AREA)
  • Stored Programmes (AREA)

Abstract

本申请涉及一种微前端系统的页面配置方法、装置、计算机设备、存储介质和计算机程序产品。所述方法包括:响应于针对微前端系统的配置事件,确定作为主应用的第一应用、以及作为子应用的第二应用,其中,响应配置事件之前,第一应用以及第二应用为主应用或者子应用,将第一应用的应用信息填充至主应用页面模板,得到主应用页面,该主应用页面包括第二应用对应的页面元素,之后对页面元素进行应用地址映射,确定第二应用的应用地址,最后响应于针对页面元素的触发操作,跳转至应用地址所表征的子应用页面。采用本方法能够避免应用执行过程中的应用场景受限问题。

Description

微前端系统的页面配置方法、装置和计算机设备
技术领域
本申请涉及计算机技术领域,特别是涉及一种微前端系统的页面配置方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。
背景技术
随着计算机技术的发展,出现了微前端技术。在应用微前端系统之前,需要进行微前端基座的搭建,而针对微前端系统的页面配置在基座搭建过程中至关重要。
传统的微前端系统页面配置方法,确定每一应用各自的应用类型,应用类型如主应用或者子应用,并根据应用所属的应用类型配置应用页面,但是,对于每一应用来说,一旦确定了应用类型为主应用,该应用便只能作为主应用使用配置应用页面,或者,一旦确定了应用类型为子应用,该应用便只能作为子应用使用配置应用页面,无法进行应用类型的更换。因此,采用传统方法无法适用于应用类型发生变化的情况,存在应用场景受限的问题。
发明内容
基于此,有必要针对上述技术问题,提供一种能够扩展应用场景的微前端系统的页面配置方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。
第一方面,本申请提供了一种微前端系统的页面配置方法。所述方法包括:
响应于针对微前端系统的配置事件,确定作为主应用的第一应用、以及作为子应用的第二应用;将所述第一应用的应用信息填充至主应用页面模板,得到主应用页面;所述主应用页面包括所述第二应用对应的页面元素;对所述页面元素进行应用地址映射,确定所述第二应用的应用地址;响应于针对所述页面元素的触发操作,跳转至所述应用地址所表征的子应用页面。
在其中一个实施例中,所述响应于针对微前端系统的配置事件,确定作为主应用的第一应用、以及作为子应用的第二应用,包括:响应于针对应用池中多个候选应用的触发操作,确定微前端系统的配置信息,基于各所述触发顺序,从各所述候选应用中确定作为主应用的第一应用、以及作为子应用的第二应用,所述配置信息通过各所述候选应用各自的触发顺序确定;或者,接收到针对所述微前端系统的配置信息的确认指令,基于所述配置信息确定作为所述主应用的第一应用、以及作为所述子应用的第二应用。
在其中一个实施例中,所述对所述页面元素进行应用地址映射,确定所述第二应用的应用地址,包括:获取所述第二应用的应用信息;基于所述应用信息生成的第二应用路由;根据所述第二应用路由对所述页面元素进行应用地址映射,确定所述第二应用的应用地址。
在其中一个实施例中,所述响应于针对所述页面元素的触发操作,跳转至所述应用地址所表征的子应用页面,包括:响应于针对所述页面元素的触发操作,获取应用页面的历史加载记录;所述历史加载记录包括历史应用地址;在各所述历史应用地址中包括所述应用地址的情况下,跳转至所述应用地址所表征的子应用页面;在各所述历史应用地址中不包括所述应用地址的情况下,跳转至基于所述应用地址建立的子应用页面。
在其中一个实施例中,所述微前端系统的页面配置方法还包括:在不同的所述配置事件下,相同的应用,应用类型是相同或不相同的。
在其中一个实施例中,所述微前端系统包括多个层级,在该实施例的情形下,所述微前端系统的页面配置方法还包括:将所述第二应用作为当前层级的主应用,并确定作为所述当前层级的子应用的第三应用;在所述第二应用的子应用页面添加所述第三应用对应的页面元素。
在其中一个实施例中,所述方法还包括:响应于针对应用池中多个候选应用的插件加载操作,对每一所述候选应用加载应用插件;所述响应于针对微前端系统的配置事件,确定作为主应用的第一应用、以及作为子应用的第二应用,包括:第一应用的第一应用插件响应于针对微前端系统的配置事件,确定所述第一应用的应用类型为主应用;第二应用的第二应用插件响应于针对微前端系统的配置事件,确定所述第二应用的应用类型为子应用。
第二方面,本申请还提供了一种微前端系统的页面配置装置。所述装置包括:
应用确定模块,用于响应于针对微前端系统的配置事件,确定作为主应用的第一应用、以及作为子应用的第二应用,其中,响应所述配置事件之前,所述第一应用以及所述第二应用为主应用或者子应用;
主应用页面确定模块,用于将所述第一应用的应用信息填充至主应用页面模板,得到主应用页面;所述主应用页面包括所述第二应用对应的页面元素;
应用地址映射模块,用于对所述页面元素进行应用地址映射,确定所述第二应用的应用地址;
触发操作响应模块,用于响应于针对所述页面元素的触发操作,跳转至所述应用地址所表征的子应用页面。
第三方面,本申请还提供了一种计算机设备。所述计算机设备包括存储器和处理器,所述存储器存储有计算机程序,所述处理器执行所述计算机程序时实现上述方法的步骤。
第四方面,本申请还提供了一种计算机可读存储介质。所述计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现上述方法的步骤。
第五方面,本申请还提供了一种计算机程序产品。所述计算机程序产品,包括计算机程序,该计算机程序被处理器执行时实现上述方法的步骤。
上述微前端系统的页面配置方法、装置、计算机设备、计算机可读存储介质和计算机程序产品,响应于针对微前端系统的配置事件,确定作为主应用的第一应用、以及作为子应用的第二应用,其中,响应配置事件之前,第一应用以及第二应用为主应用或者子应用,也即在配置事件发生之前,所有应用均为通用应用,第一应用以及第二应用可以是主应用,也可以是子应用,配置事件发生之后,可适应于配置事件选择应用的应用类型,针对配置事件具体确定主应用以及子应用,可保持应用的应用类型不变,也可实现更换应用的应用类型,拓展了应用的应用场景,在基于配置事件确定主应用以及子应用之后,将第一应用的应用信息填充至主应用页面模板,得到主应用页面,从而确定页面配置过程的整体框架,由于主应用页面包括第二应用对应的页面元素,那么对页面元素进行应用地址映射,确定第二应用的应用地址,便可实现页面配置的整体布局,最后响应于针对页面元素的触发操作,跳转至应用地址所表征的子应用页面,便完成了微前端系统的页面配置过程,本申请通过在配置事件发生前不限定应用的应用类型,应用可作为主应用,也可作为子应用的通用应用的方式,在配置事件发生后,基于配置事件灵活选择应用的应用类型,达到对微前端系统进行页面的灵活配置,实现更换应用的应用类型的目的,扩展了微前端系统页面配置方法的应用场景。
附图说明
图1为一个实施例中微前端系统的页面配置方法的应用环境图;
图2为一个实施例中微前端系统的页面配置方法的流程示意图;
图3为一个实施例中微前端系统的页面配置方法的页面模板图;
图4为一个实施例中微前端系统的页面配置方法的页面样例图;
图5为一个实施例中微前端系统的页面配置方法的应用组合图;
图6为一个实施例中微前端系统的页面配置方法的插件安装图;
图7为另一个实施例中微前端系统的页面配置方法的应用组合图;
图8为一个实施例中微前端系统的页面配置方法的整体框架图;
图9为一个实施例中微前端系统的页面配置方法的插件安装流程图;
图10为另一个实施例中微前端系统的页面配置方法的流程示意图;
图11为一个实施例中微前端系统的页面配置装置的结构框图;
图12为一个实施例中计算机设备的内部结构图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本申请进行进一步详细说明。应当理解,此处描述的具体实施例仅仅用以解释本申请,并不用于限定本申请。
本申请实施例提供的微前端系统的页面配置方法,可以应用于如图1所示的应用环境中。其中,微前端系统102中包括主应用104和子应用106。应用插件108可以通过npm(node package manager,程序插件管理器)外部插件引入方式加载安装于主应用104和子应用106上,主应用104为子应用106的接收容器。微前端系统是指基于微前端架构开发的前端应用程序。插件是一种电脑程序,通过和应用程序(例如网页浏览器,电子邮件客户端)的互动,用来替应用增加一些所需要的特定的功能。最常见的有游戏、网页浏览器的插件和媒体播放器的插件。安装应用插件108的计算机设备在对微前端系统102的页面配置过程中,响应于针对微前端系统102的配置事件,确定作为主应用104的第一应用、以及作为子应用106的第二应用,其中,响应配置事件之前,第一应用以及第二应用为主应用104或者子应用106;将第一应用的应用信息填充至主应用页面模板,得到主应用页面;主应用页面包括第二应用对应的页面元素;对页面元素进行应用地址映射,确定第二应用的应用地址;响应于针对页面元素的触发操作,跳转至应用地址所表征的子应用页面。
可选地,在一具体实施例中,应用插件通过npm(node package manager,程序插件管理器)外部插件引入方式加载安装于主应用和子应用,安装于主应用的应用插件可视为第一应用插件,安装于子应用的应用插件可视为第二应用插件。
在一个实施例中,如图2所示,提供了一种微前端系统的页面配置方法,以该方法应用于安装应用插件的计算机设备为例进行说明,包括以下步骤:
步骤S202,响应于针对微前端系统的配置事件,确定作为主应用的第一应用、以及作为子应用的第二应用。
其中,响应配置事件之前,第一应用以及第二应用为主应用或者子应用,也即,配置事件发生之前,第一应用和第二应用的应用类型不受限定,可以是通用应用,在配置事件发生之后,再为第一应用和第二应用确定应用类型。微前端系统是指基于微前端架构开发的前端应用程序。微前端系统中通常包括主应用、以及与该主应用对接的多个子应用。主应用和子应用为普通应用赋予了对应的功能,也即,主应用可以作为子应用的接收容器,而子应用可以部署在主应用中。在主应用运行环境下,可以加载并运行子应用,实现对子应用的访问。
配置事件是指针对于微前端系统的页面配置事件,也即,在该配置事件发生的情况下,对该配置事件做出对应的页面配置响应。进一步地,具体到本申请,配置事件可以是指对主子应用的页面配置事件,而配置事件的触发条件可以是接收到设置配置信息的确认指令产生,也可以是用户点击微前端系统中的控件或者按钮形成配置信息产生,还可以是用户对微前端系统中的应用进行拖拽所形成的配置信息产生,对此不做限定。
需要说明的是,配置信息可由“主应用访问信息/子应用访问信息”表示,主应用访问信息是用于访问或者调用主应用的访问标识,如主应用的访问地址,调用路径等,子应用访问信息是用于访问或者调用子应用的访问标识,如子应用的访问地址,调用路径等,示例性地,配置信息可以由“yunfan.com/youshu”表示,用于表征云帆应用作为主应用和有数应用作为子应用;配置信息还可由“主应用访问信息/子应用访问信息/子应用访问页面信息”表示,子应用访问页面信息是用于访问或者调用子应用页面的访问标识,如子应用页面的调用路径或者访问地址,示例性地,配置信息可以由“yunfan.com/youshu/A”表示,所表征的含义为“进入云帆主应用,访问子应用有数的A页面”;配置信息还可以是主应用与子应用所组成的关系图,如图5的形式,对此不做限定。
可选地,计算机设备可以对针对微前端系统的配置事件做出响应,确定作为主应用的第一应用以及作为子应用的第二应用。可以理解,由于微前端系统中主应用是作为子应用的接收容器的,那么一个主应用可以对应多个子应用,也即第二应用的数量并不唯一,第二应用的数量为至少一个。
在一个具体的实施例中,可以根据针对应用池中多个候选应用的触发操作,确定微前端系统的配置信息,并根据该配置信息中包含的各候选应用各自的触发顺序,从各候选应用中确定作为主应用的第一应用和作为子应用的第二应用。例如,用户先点击了云帆应用,后点击了有数应用,那么微前端系统的配置信息就是“yunfan.com/youshu”,该配置信息中包含的各候选应用各自的触发顺序为主应用在前、子应用在后,那么便可从各候选应用中确定作为主应用的第一应用为云帆应用,作为子应用的第二应用为有数应用。采用本实施例的方法可以满足用户的实时需求,提高微前端系统架构的灵活性。
在另一个具体的实施例中,还可以接收页面配置命令,基于页面配置命令中携带的应用类型配置信息,从各候选应用中确定作为主应用的第一应用和作为子应用的第二应用。例如,页面配置命令为“打开云帆应用中的有数应用”,那么说明该页面配置命令中携带的应用类型配置信息为“云帆应用为主应用,有数应用为子应用”,因此,可以从各候选应用中确定作为主应用的第一应用为云帆应用,作为子应用的第二应用为有数应用,又如基于配置页面接收到页面配置命令时,获取配置页面中通过页面配置命令得到应用类型配置信息,其中,配置页面可用于直接选择或者填写应用对应的应用类型配置信息,采用本实施例的方法可为用户提供配置页面的快捷指令,从而提高页面配置效率。
可选地,在一个具体的实施例中,同一个应用,不同的配置事件,该应用的应用类型可以是不同的,也可以是相同的,也就是说,在不同的配置事件下,相同的应用,应用类型可以均是子应用,也可以均是主应用,还可以是不同配置事件中的部分配置事件的应用类型是子应用,不同配置事件中除了部分配置事件之外的其他配置事件的应用类型是主应用。示例性的,在配置事件发生前,所有应用为通用应用,并不限定应用的应用类型,假设所有应用包括第一应用,在配置事件发生前,第一应用并不限定第一应用是主应用还是子应用,在配置事件发生后,第一配置事件确定的第一应用为主应用,第二配置事件确定的第一应用为子应用,第三配置事件确定的第一应用为主应用,其中,配置事件包括第一配置事件,第二配置事件以及第三配置事件,第一配置事件,第二配置事件以及第三配置事件分别对应不同的应用场景。
可以理解的是,相同的应用可以是第一应用,也可以是第二应用,还可以是除了第一应用以及第二应用之外的其他应用,对此不做限定。
步骤S204,将第一应用的应用信息填充至主应用页面模板,得到主应用页面。
其中,应用信息可以包括应用标识、菜单信息以及权限值等等。第一应用的菜单信息可以包括该第一应用的子应用(即第二应用)的页面元素,页面元素例如可以是文字、图片、音频、动画、视频等等。主应用页面模版是指为主应用配置的页面模板,如图3所示,即为一个具体的实施例中主应用页面模板的示例,可以包括子应用1、子应用2等多个子应用的页面元素模板块、主应用页面模板的名称标识模板块以及登录按钮模板块等。主应用页面由第一应用的应用信息填充至主应用页面模板所得。
可选地,在确定作为主应用的第一应用之后,可将第一应用的应用信息填充至主应用页面模板的对应位置中,从而得到主应用页面。在一个具体的实施例中,可先确定应用信息和主应用页面模板的对应关系,基于该对应关系将第一应用的应用信息填充至主应用页面模板的对应位置,得到主应用页面,可以准确地将应用信息对应填充。例如,应用信息为“云帆”标题时,“云帆”标题与主应用页面模板的对应关系是“云帆”标题对应于主应用页面模板的左上角位置,那么便可将“云帆”标题填充至主应用页面模板的左上角位置内。
在另一个具体的实施例中,还可提取应用信息中的信息类型特征,将信息类型特征与主应用页面模板中的模板块类型特征进行匹配,将类型特征匹配的应用信息填充至对应的模板块中,得到主应用页面,可以提高主应用页面信息的填充准确率。例如,应用信息为“云帆”标题时,应用信息的信息类型特征为“标题”,确定主应用页面模板中模板块类型特征为“标题”的模板块,将“云帆”标题填充至对应的模板块中,得到主应用页面。
步骤S206,对页面元素进行应用地址映射,确定第二应用的应用地址。
其中,应用地址是指第二应用在微前端系统中所处的位置。应用地址映射,是指根据应用路由映射应用地址的过程,用于从应用路由中确定应用地址。例如,第二应用为“有数”,也即第二应用的前缀标识为“youshu”,第二应用的应用路由为“https://youshu.com”,根据该应用路由便可映射得到对应的应用地址:“youshu.com”。
可选地,在主应用页面生成后,主页面中的第二应用对应的页面元素还不具备对应的应用地址,未曾建立第二应用与第一应用之间的联系,因此可通过对第二应用对应的页面元素进行应用地址映射,确定该第二应用的应用地址。
在一个具体的实施例中,可通过子应用安装的第二应用插件实现确定第二应用的应用地址的功能,示例性地,可以通过第二应用插件基于应用信息生成第二应用路由,之后根据第二应用路由对页面元素进行应用地址映射,确定该第二应用的应用地址,可以确保第二应用路由生成的准确性,从而保证第二应用的应用地址的准确性。
在另一个具体的实施例中,也可根据第二应用的应用信息生成第二应用路由,根据第二应用路由对页面元素进行应用地址映射,确定该第二应用的应用地址,可以提高应用地址映射效率。
步骤S208,响应于针对页面元素的触发操作,跳转至应用地址所表征的子应用页面。
其中,触发操作是指触动而激发起某种反应的操作,具体到本申请,针对页面元素的触发操作,是指触动页面元素从而引起页面元素对应应用地址所表征的子应用页面的操作。触发操作的具体操作方式,例如可以包括点击页面元素、触摸页面元素、或者对页面元素进行拖拽。
可选地,在接收到针对页面元素的触发操作后,跳转至该页面元素对应应用地址所表征的子应用页面。例如,页面元素的名称为子应用1,用户点击子应用1对应的页面元素所在的按键后,便可跳转至该子应用1对应应用地址所表征的子应用1页面。
在一个具体的实施例中,响应于针对页面元素的触发操作,获取应用页面的历史加载记录,该历史加载记录包括历史应用地址,那么在各历史应用地址中包括应用地址的情况下,便可跳转至应用地址所表征的子应用页面;而在各历史应用地址中不包括应用地址的情况下,便需要跳转至通过第二应用插件基于应用地址建立的子应用页面,可以避免重复建立页面,从而提高页面配置效率。
在另一个具体的实施例中,在接收到针对该页面元素的触发操作后,对该页面元素对应应用地址所表征的子应用页面进行检测,确保该子应用页面可以正常运行,之后再跳转至通过第二应用插件基于应用地址建立的子应用页面,可以保证子应用页面建立过程的正常进行。
可以理解,在第一应用承载至少两个第二应用的情况下,则可以将各个第二应用分别对应的页面元素分别添加至第一应用的主应用页面,并对每一页面元素分别进行应用地址映射,确定各第二应用各自的应用地址。然后,响应于针对任一页面元素的触发操作,跳转至该页面元素对应的应用地址所表征的子应用页面。
上述微前端系统的页面配置方法,响应于针对微前端系统的配置事件,确定作为主应用的第一应用、以及作为子应用的第二应用,其中,响应配置事件之前,第一应用以及第二应用为主应用或者子应用,也即在配置事件发生之前,所有应用均为通用应用,第一应用以及第二应用可以是主应用,也可以是子应用,配置事件发生之后,可适应于配置事件选择应用的应用类型,针对配置事件具体确定主应用以及子应用,可保持应用的应用类型不变,也可实现更换应用的应用类型,拓展了应用的应用场景,在基于配置事件确定主应用以及子应用之后,将第一应用的应用信息填充至主应用页面模板,得到主应用页面,从而确定页面配置过程的整体框架,由于主应用页面包括第二应用对应的页面元素,那么对页面元素进行应用地址映射,确定第二应用的应用地址,便可实现页面配置的整体布局,最后响应于针对页面元素的触发操作,跳转至应用地址所表征的子应用页面,便完成了微前端系统的页面配置过程,本申请通过在配置事件发生前不限定应用的应用类型,应用可作为主应用,也可作为子应用的通用应用的方式,在配置事件发生后,基于配置事件灵活选择应用的应用类型,达到对微前端系统进行页面的灵活配置,实现更换应用的应用类型的目的,扩展了微前端系统页面配置方法的应用场景。
在一个实施例中,响应于针对微前端系统的配置事件,确定作为主应用的第一应用、以及作为子应用的第二应用,包括:响应于针对应用池中多个候选应用的触发操作,确定微前端系统的配置信息,配置信息通过各候选应用各自的触发顺序表征;基于各触发顺序,从各候选应用中确定作为主应用的第一应用、以及作为子应用的第二应用,配置信息通过各候选应用各自的触发顺序确定;或者,接收到针对微前端系统的配置信息的确认指令,基于配置信息确定作为主应用的第一应用、以及作为子应用的第二应用。
其中,应用池中包含多个候选应用,每一候选应用在未被应用时作为通用应用存在于应用池中,被应用时作为主应用也可以作为子应用。配置信息是指微前端系统中根据各候选应用各自的访问顺序或者触发顺序表征的页面配置信息。例如,配置信息可由“主应用访问信息/子应用访问信息”表示,其中,主应用访问信息是用于访问或者调用主应用的访问标识,如主应用的访问地址,调用路径等,子应用访问信息是用于访问或者调用子应用的访问标识,如子应用的访问地址,调用路径等,示例性地,配置信息可以由“yunfan.com/youshu/A”表示,用于表征云帆应用作为主应用和有数应用作为子应用的触发顺序。确认指令是指确认配置信息的指令,例如可以是‘确认配置信息为yunfan.com/youshu/A’”。
可选地,可根据针对应用池中多个候选应用的触发操作,确定该触发操作对应的微前端系统的配置信息,由于该配置信息由各候选应用各自的触发顺序表征,那么只需根据触发顺序对应的主子应用顺序,便可根据该触发顺序从各候选应用中确定作为主应用的第一应用、以及作为子应用的第二应用。
可以理解,触发顺序可以是对应主应用先触发、子应用后触发的规则,也可以对应子应用先触发、主应用后触发的规则,对此不做限定。也即,根据触发顺序从各候选应用中确定作为主应用的第一应用、以及作为子应用的第二应用的方式并不唯一。例如,若设定按照触发顺序确定主应用、子应用顺序,那么在接收到配置信息为“yunfan.com/youshu/A”的情况下,“yunfan”对应的名为云帆应用的候选应用便作为主应用,“youshu/A”对应的名为有数应用的候选应用便作为子应用,配置信息所表征的含义为“进入云帆主应用,访问有数A页面”。又如,若设定按照触发顺序确定子应用主应用顺序,那么在接收到配置信息为“youshu/A/yunfan.com”的情况下,“youshu/A”对应的名为有数应用的候选应用便作为子应用,“yunfan”对应的名为云帆应用的候选应用便作为主应用,配置信息所表征的含义为“进入云帆主应用,访问有数A页面”。
或者,可以通过针对微前端系统的配置信息的确认指令确定配置信息中作为主应用的第一应用、以及作为子应用的第二应用。例如,接收到确认指令为“确认配置信息为yunfan.com/youshu/A”,那么便可确定“yunfan”对应的名为云帆应用的候选应用便作为主应用,“youshu/A”对应的名为有数应用的候选应用便作为子应用,通过本方法可以快速地在候选应用中确定主子应用。
本实施例中,将针对应用池中多个候选应用的触发操作与表征各候选应用各自的触发顺序的配置信息对应,可以根据触发操作自由选取候选应用的应用类型,通过触发操作的触发顺序依次确定应用的应用类型是主应用,还是子应用,或者,通过针对微前端系统的配置信息的确认指令确定配置信息中作为主应用的第一应用、以及作为子应用的第二应用,可以使得每一候选应用的应用类型并不唯一,能够大大提高微前端系统架构的灵活性,进一步扩展应用场景。
在一个实施例中,对页面元素进行应用地址映射,确定第二应用的应用地址,包括:获取第二应用的应用信息;基于应用信息生成第二应用路由;根据第二应用路由对页面元素进行应用地址映射,确定第二应用的应用地址。
可选地,在一个具体实施例中,可以通过第二应用插件基于应用信息生成第二应用路由,根据第二应用路由对页面元素进行应用地址映射,便可确认第二应用的应用地址。本实施例中,通过第二应用插件基于应用信息生成第二应用路由,根据该第二应用路由对页面元素进行应用地址映射,能够在确保应用地址的准确性的同时,提高数据处理效率。其中,作为子应用的第二应用安装第二应用插件。
需要说明的是,第二应用插件是指通过npm外部插件引入方式安装于第二应用的插件。该第二应用插件与第一应用的插件可以为同一种插件,该插件可以在应用为不同类型的时候实现应用类型对应的功能。例如,若插件此时对应的应用为主应用,便可实现主应用的功能:按照qiankun微前端框架的标准在主应用中注册子应用,设置子应用的信息等;若插件对应的应用为子应用,便可实现子应用的功能:隐藏子应用页面中的菜单信息等。第二应用路由是指第二应用的应用路由,其中,应用路由可以认为是应用的网址,例如,可以是“https://youshu.com”这种形式,记为“有数应用”的网址。
进一步地,根据第二应用路由对页面元素进行应用地址映射,确定第二应用的应用地址的方式并不唯一。例如,可以建立应用路由和应用地址之间的对应关系,基于该对应关系根据第二应用路由对页面元素进行应用地址映射,确定第二应用的应用地址。
在本实施例中,可以根据第二应用插件基于第二应用的应用信息生成的第二应用路由对页面元素进行应用地址映射,相当于由第二应用插件协助完成应用地址的映射,能够在确保应用地址的准确性的同时,提高数据处理效率。
在一个实施例中,响应于针对页面元素的触发操作,跳转至应用地址所表征的子应用页面,包括:响应于针对页面元素的触发操作,获取应用页面的历史加载记录;历史加载记录包括历史应用地址;在各历史应用地址中包括应用地址的情况下,跳转至应用地址所表征的子应用页面;在各历史应用地址中不包括应用地址的情况下,跳转至基于应用地址建立的子应用页面。
其中,历史加载记录是指应用页面在本次加载之前的页面加载记录,可以表征应用页面的历史加载情况。进一步地,历史加载记录中包括历史应用地址,在历史应用地址不包括页面元素对应的应用地址的情况下,表示该应用地址之前未被加载过,没有对应的应用页面;在历史应用地址包括页面元素对应的应用地址的情况下,表示该应用地址之前被加载过,具有对应的应用页面。
可选地,计算机设备响应针对页面元素的触发操作的过程中,可以获取应用页面的包含历史应用地址的历史加载记录,若历史应用地址中存在该页面元素对应的应用地址,即该应用地址之前被加载过,存在对应的应用页面,那么便可直接跳转至该应用地址所表征的子应用页面,提高应用页面的加载速度;若历史应用地址中不存在该页面元素对应的应用地址,即该应用地址之前未被加载过,不存在对应的应用页面,那么便需要为该应用地址重新建立或者加载新的应用页面,以获取最新版本对应的应用页面。可以理解,在为该应用地址重新建立新的应用页面之后,该应用页面对应的应用地址会被存储至历史应用地址中,也即,应用页面只需建立一次。进一步地,根据应用地址建立子应用页面的过程可以由主应用插件所在的计算机设备建立,也可以由加载安装有第二应用插件的计算机设备进行建立。
本实施例中,在跳转至应用地址所表征的子应用页面之前,确定应用页面历史加载记录的历史应用地址中是否存在该应用地址,不存在则为该应用地址建立新的对应的子应用页面,存在即可直接跳转,可以避免重复建立页面,从而提高页面配置效率。
在一个实施例中,微前端系统的页面配置方法还包括:若当前环境满足第二应用的执行条件,则执行第二应用,并在第二应用的执行过程中,隐藏子应用页面中的菜单信息。
其中,执行条件是指第二应用执行过程所处的环境满足子应用执行环境,子应用执行环境是指当前应用的应用类型为子应用,判断当前环境是否满足第二应用的执行条件是为了对第二应用的应用类型进行二次确定,可以理解,在执行第二应用之前,对第二应用的应用类型进行二次确定,可以保证微前端系统页面配置的准确性。菜单信息可以包括菜单信息和标签页信息。
可选地,在微前端系统的页面配置过程中,计算机设备可以为第二应用所处的当前环境进行检测,若当前环境满足执行条件,也即,第二应用执行环境确为子应用执行环境,那么便可以执行第二应用,并且执行第二应用的过程中,还需隐藏子应用页面的菜单信息。例如,如图4所示,设该图示为子应用页面,那么对应的云帆、有数、企微、其他以及二次菜单便作为该子应用页面的菜单信息,标识、A标题以及企微页面作为该子应用页面的标签页,在对第二应用所处的当前环境进行检测之后,当前环境满足执行条件的情况下,便执行第二应用,并且隐藏上述菜单信息,也即仅展示图示中的“有数A页面内容”。
在一个具体的实施例中,可以通过插件的特性并结合qiankun微前端框架快速对批量应用进行微前端基座的搭建,并且可以通过qiankun微前端框架带的变量如window.POWERED_BY_QIANKUN__为第二应用所处的当前环境进行检测。
本实施例中,对第二页面的当前环境进行了执行条件监测,并且在当前环境满足执行条件的情况下,会对子应用页面中的菜单信息进行隐藏,可以有效减少应用执行过程中的页面操作所导致的页面加载卡顿现象,并且保证页面整洁。
在一个实施例中,微前端系统包括多个层级。在该实施例的情形下,微前端系统的页面配置方法还包括:将第二应用作为当前层级的主应用,并确定作为当前层级的子应用的第三应用;在第二应用的子应用页面添加第三应用对应的页面元素。
其中,层级是指微前端系统中的多个层次级别,微前端系统运行过程按照多层级进行划分,可以有效维持运行秩序。如图5所示,图示中左图最左侧的一列和中间的一列可以作为前一层级,左图中的“通用应用(作为子应用)”此时作为子应用。右图即为左图中间一列中“通用应用(作为子应用)”和右侧一列通用应用拆分而成,作为当前层级,该“通用应用(作为子应用)”作为当前层级的主应用。例如,如图7所示,云帆应用和有数-公共模块、有数-商城、有数会员可以作为前一层级,云帆应用为前一层级的主应用,有数-公共模块、有数-商城、有数会员为前一层级的子应用,但对于当前层级来说,有数-公共模块作为当前层级的主应用,有数-商城、有数会员和有数-其他作为当前层级的子应用。
可选地,响应于针对微前端系统的二次配置事件,可以将第二应用作为当前层级的主应用,并确定作为当前层级的子应用的第三应用,在第二应用的子应用页面添加第三应用对应的页面元素,并将第二应用的应用信息填充至子应用页面模板中,形成该第二应用对应的主应用页面,之后对第三应用对应的页面元素进行应用地址映射,确定第三应用的应用地址,最后响应于针对该页面元素的触发操作,跳转至应用地址所表征的第三应用的子应用页面。
本实施例中,将第二应用作为当前层级的主应用,确定作为当前层级的子应用的第三应用,并且执行了一次完整的二次页面配置过程,可以更好地实现扩大应用场景的功能。
在一个实施例中,微前端系统的页面配置方法还包括:响应于针对应用池中多个候选应用的插件加载操作,对每一候选应用加载应用插件;响应于针对微前端系统的配置事件,确定作为主应用的第一应用、以及作为子应用的第二应用,包括:第一应用的第一应用插件响应于针对微前端系统的配置事件,确定第一应用的应用类型为主应用;第二应用的第二应用插件响应于针对微前端系统的配置事件,确定第二应用的应用类型为子应用。
其中,插件加载操作是指需要为每一候选应用加载应用插件,可以使每一候选应用变为携带应用插件的通用应用。候选应用包括第一应用以及第二应用,应用插件可以通过npm(node package manager,程序插件管理器)外部插件引入方式加载安装于第一应用和第二应用。可以理解的是,第一应用加载的应用插件可视为第一应用插件,第二应用加载的应用插件可视为第二应用插件。
可选地,在配置事件发生之前,先为每一候选应用加载应用插件,以便于后续针对微前端系统的配置事件的响应,在针对微前端系统的配置事件发生之后,第一应用的第一应用插件响应于针对微前端系统的配置事件,确定第一应用的应用类型为主应用,第二应用的第二应用插件响应于针对微前端系统的配置事件,确定第二应用的应用类型为子应用,便可确定第一应用和第二应用具体的应用类型。
可选地,在一个具体实施例中,第一应用插件与第二应用插件为同一个应用插件,可参考图8所示,第一应用为云帆应用,第二应用为有数-公共模块、有数-商城、有数-会员或者有数-其他,基于第一应用与第二应用加载的同一个应用插件或者相同的应用插件,通过应用插件识别应用的应用类型的原理是:响应于配置事件,获取配置事件对应的配置信息如第一应用与第二应用的关系图,基于配置信息确定第一应用的应用类型为主应用,第二应用的应用类型为子应用。
可选地,在一个具体实施例中,可对应用插件实现的功能进行动态拓展,可继续参考图8,应用插件可拓展实现的功能还包括:接收菜单配置,布局组件(也即布局图示中的虚线框内的页面),组件间的通信逻辑、公共方法,注册子应用生命钩子逻辑,以及作为主应用时注册qiankun框架实例设置子应用信息,获取子应用的访问地址中的至少一个。
本实施例中,在配置事件发生之前,无需为各个候选应用分别单独编写功能代码,只需编写应用插件对应功能实现的代码,对应功能如确定应用类型,进而为每一候选应用加载应用插件,使每一候选应用变为加载了应用插件的通用应用,在配置事件发生之后,通过应用插件确定对应应用的应用类型,即可实现应用类型的灵活切换,在应用场景变化的情况下,每一候选应用不必局限于同一种应用类型,从而大大提高页面配置的灵活性。
在一个具体的实施例中,如图6所示,把应用通过qiankun框架和自定义配置方式开发成统一插件模式,结合应用,形成一个通用应用,并且放在应用池里面,新的产品可以通过配置自由的组合,也即,普通应用+自定义插件=通用微应用。
在一个具体的实施例中,如图7所示,“云帆应用”为主应用时,“有数-公共模块应用”、“有数-商城应用”以及“有数-会员应用”作为该主应用的子应用,但若此时需要配置“有数-公共模块应用”中的“有数-商城应用”、“有数-会员应用”以及“有数-其他应用”的页面,那么“有数-公共模块应用”便作为主应用,形成图7右图的页面配置,可以快速组合成为新的产品,可以理解的是,在该实施例中,在一产品中或者应用场景下,“有数-公共模块应用”既可以作为“云帆应用”的子应用使用,在另一产品中或者另一个应用场景下,“有数-公共模块应用”也可以作为“有数-商城应用”、“有数-会员应用”以及“有数-其他应用”的主应用使用。
需要说明的是,同一个应用,不同的配置事件,该应用的应用类型可以是不同的。示例性地,假设图7中,第一配置事件为“云帆应用”为主应用,“有数-公共模块应用”、“有数-商城应用”以及“有数-会员应用”分别作为子应用,第二配置事件为“有数-公共模块应用”为主应用,“有数-商城应用”、“有数-会员应用”以及“有数-其他应用”分别作为子应用,在不同的配置事件中,“有数-公共模块应用”可以作为主应用使用,也可以作为子应用使用。
可选地,同一个应用,不同的配置事件,该应用的应用类型可以是相同的。示例性地,以第一配置事件以及第二配置事件为例子,在不同的配置事件中“有数-商城应用”、“有数-会员应用”可作为“云帆应用”的子应用使用,也可作为“有数-公共模块应用”的子应用使用。
在一个具体的实施例中,如图8所示,“云帆应用”、“有数-公共模块应用”、“有数-商城应用”、“有数-会员应用”以及“有数-其他应用”都是业务独立应用,都可以安装插件,该插件可以实现的功能包括:接收菜单配置;布局组件(也即布局图示中的虚线框内的页面);组件间的通信逻辑、公共方法;作为主应用时注册qiankun框架实例,设置子应用信息,获取子应用的访问地址;注册子应用生命钩子逻辑。
在一个具体的实施例中,如图9所示为应用插件的功能实现流程:普通应用接入应用插件后,便可生成通用应用(即可以作为主应用,又可以作为子应用),多个通用应用进行组合,便可形成新的应用,从而扩展应用的使用场景。
在一个具体的实施例中,有3种主应用,对应的独立访问地址作为子应用的前置标识(访问子应用时前缀标识作为应用地址的上下文)包括:云帆:yunfan.com(前缀标识:/yunfan)、有数:youshu.com(前缀标识:/youshu)以及企微:qiwei.com(前缀标识:/qiwei),那么在这些主应用访问子应用页面时,形成的配置信息各自为:云帆主应用,访问有数A页面(yunfan.com/youshu/A)、有数主应用,访问云帆A页面(youshu.com/yunfan/A)以及企微主应用,访问云帆A页面(qiwei.com/yunfan/A)。
其中,微前端系统中的应用插件功能包括:
a.统一登录页面
为用户配置统一的登录页面,便于管理。
b.动态生成子应用配置,下发主应用路由对象
接收到页面配置的触发操作后,计算机设备便可获取到配置信息,为主应用生成对应的子应用的路由,确定通过子应用的第二应用插件生成的路由。计算机设备的路由逻辑会根据配置信息动态生成主应用路由,同时存储并且传递给子应用,子应用加载时同样动态生成路由。其中,主应用生成子应用的路由中没有component字段来映射具体的文件路径,而子应用动态生成路由时会有component字段来映射本身的页面文件,主应用生成子应用的路由仅仅只做跳转到子应用,而子应用自身才有对应的文件路径。
同时应用插件会对页面元素进行应用地址映射,确定子应用的符合qiankun配置的应用地址。
c.统一布局组件,下发重写后台的路由对象
应用插件中实现了布局页面,登录后进入到主应用页面,显示菜单,标签页等。容器部分接收和切换子应用内容
在vue-router(路由管理)对象注册后,全局监听主应用路由变化,并且针对性的修正(主应用)vue-router的push,go,replace等方法,实现多应用标签页路由的统一管理。并且把路由对象下发给子应用,子应用采用主应用的路由对象进行路由操作。
在一个具体的实施例中,在访问yunfan.com/youshu/A子应用路径时,计算机设备中的路由系统(watch vue的router对象)观察到路由变化,并且以/youshu开头就会先判断子应用是否加载过,如果没有就动态选择注册(执行qiankun中的loadMicroApp方法),此时子应用在mount挂载生命周期接收到主应用传递过来的路由对象(router),子应用在创建vue实例前会重写router对象,做到统一路由管理。
在一个具体的实施例中,微前端系统的页面配置方法包括:
步骤S1001:响应于针对应用池中多个候选应用的应用插件加载操作,对每一候选应用加载应用插件;
步骤S1002:响应于针对应用池中多个候选应用的触发操作,确定微前端系统的配置信息;
其中,配置信息通过各候选应用各自的触发顺序表征。
步骤S1003:基于各触发顺序,第一应用的第一应用插件响应于针对微前端系统的配置事件,确定第一应用的应用类型为主应用;第二应用的第二应用插件响应于针对微前端系统的配置事件,确定第二应用的应用类型为子应用;
其中,响应所述配置事件之前,第一应用以及第二应用为主应用或者子应用;
步骤S1004:将第一应用的应用信息填充至主应用页面模板,得到主应用页面;
其中,主应用页面包括第二应用对应的页面元素;
步骤S1005:获取第二应用的应用信息;
步骤S1006:基于应用信息生成第二应用路由;
步骤S1007:根据第二应用路由对页面元素进行应用地址映射,确定第二应用的应用地址;
步骤S1008:响应于针对页面元素的触发操作,获取应用页面的历史加载记录;
其中,历史加载记录包括历史应用地址;
步骤S1009:在各历史应用地址中包括应用地址的情况下,跳转至应用地址所表征的子应用页面;
步骤S1010:在各历史应用地址中不包括应用地址的情况下,跳转至基于应用地址建立的子应用页面;
步骤S1011:若当前环境满足第二应用的执行条件,则执行第二应用,并在第二应用的执行过程中,隐藏子应用页面中的菜单信息;
步骤S1012:将第二应用作为当前层级的主应用,并确定作为当前层级的子应用的第三应用;
步骤S1013:在第二应用的子应用页面添加第三应用对应的页面元素。
应该理解的是,虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示,但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明,这些步骤的执行并没有严格的顺序限制,这些步骤可以以其它的顺序执行。而且,如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段,这些步骤或者阶段并不必然是在同一时刻执行完成,而是可以在不同的时刻执行,这些步骤或者阶段的执行顺序也不必然是依次进行,而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。
基于同样的发明构思,本申请实施例还提供了一种用于实现上述所涉及的微前端系统的页面配置方法的微前端系统的页面配置装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似,故下面所提供的一个或多个微前端系统的页面配置装置实施例中的具体限定可以参见上文中对于微前端系统的页面配置方法的限定,在此不再赘述。
在一个实施例中,如图11所示,提供了一种微前端系统的页面配置装置1100,包括:应用确定模块1102、主应用页面确定模块1104、应用地址映射模块1106和触发操作响应模块1108,其中:
应用确定模块1102,用于响应于针对微前端系统的配置事件,确定作为主应用的第一应用、以及作为子应用的第二应用,其中,响应配置事件之前,第一应用以及第二应用为主应用或者子应用;
主应用页面确定模块1104,用于将第一应用的应用信息填充至主应用页面模板,得到主应用页面;主应用页面包括第二应用对应的页面元素;
应用地址映射模块1106,用于对页面元素进行应用地址映射,确定第二应用的应用地址;
触发操作响应模块1108,用于响应于针对页面元素的触发操作,跳转至应用地址所表征的子应用页面。
在一个实施例中,应用确定模块1102用于:响应于针对应用池中多个候选应用的触发操作,确定微前端系统的配置信息,基于各触发顺序,从各候选应用中确定作为主应用的第一应用、以及作为子应用的第二应用,配置信息通过各候选应用各自的触发顺序确定;或者,接收到针对微前端系统的配置信息的确认指令,基于配置信息确定作为主应用的第一应用、以及作为子应用的第二应用。
在一个实施例中,应用地址映射模块1106具体用于:获取第二应用的应用信息;基于应用信息生成第二应用路由;根据第二应用路由对页面元素进行应用地址映射,确定第二应用的应用地址。
在一个实施例中,触发操作响应模块1108具体用于:响应于针对页面元素的触发操作,获取应用页面的历史加载记录;历史加载记录包括历史应用地址;在各历史应用地址中包括应用地址的情况下,跳转至应用地址所表征的子应用页面;在各历史应用地址中不包括应用地址的情况下,跳转至基于应用地址建立的子应用页面。
在一个实施例中,微前端系统的页面配置装置1100还包括执行条件判断模块,用于:若当前环境满足第二应用的执行条件,则执行第二应用,并在第二应用的执行过程中,隐藏子应用页面中的菜单信息。
在一个实施例中,微前端系统包括多个层级。在该实施例的情形下,微前端系统的页面配置装置1100还包括层级切换模块,用于:将第二应用作为当前层级的主应用,并确定作为当前层级的子应用的第三应用;在第二应用的子应用页面添加第三应用对应的页面元素。
在一个实施例中,微前端系统的页面配置装置1100还包括应用插件加载模块,用于:响应于针对应用池中多个候选应用的插件加载操作,对每一所述候选应用加载应用插件。在该实施例的情形下,应用确定模块1102还用于:第一应用的第一应用插件响应于针对微前端系统的配置事件,确定第一应用的应用类型为主应用;第二应用的第二应用插件响应于针对微前端系统的配置事件,确定第二应用的应用类型为子应用。
上述微前端系统的页面配置装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中,也可以以软件形式存储于计算机设备中的存储器中,以便于处理器调用执行以上各个模块对应的操作。
在一个实施例中,提供了一种计算机设备,该计算机设备可以是终端,其内部结构图可以如图12所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中,该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信,无线方式可通过WIFI、移动蜂窝网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种微前端系统的页面配置方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏,该计算机设备的输入装置可以是显示屏上覆盖的触摸层,也可以是计算机设备外壳上设置的按键、轨迹球或触控板,还可以是外接的键盘、触控板或鼠标等。
本领域技术人员可以理解,图12中示出的结构,仅仅是与本申请方案相关的部分结构的框图,并不构成对本申请方案所应用于其上的计算机设备的限定,具体的计算机设备可以包括比图中所示更多或更少的部件,或者组合某些部件,或者具有不同的部件布置。
需要说明的是,本申请所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等),均为经用户授权或者经过各方充分授权的信息和数据。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的计算机程序可存储于一非易失性计算机可读取存储介质中,该计算机程序在执行时,可包括如上述各方法的实施例的流程。其中,本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用,均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory,ROM)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(ReRAM)、磁变存储器(Magnetoresistive Random Access Memory,MRAM)、铁电存储器(Ferroelectric Random Access Memory,FRAM)、相变存储器(Phase Change Memory,PCM)、石墨烯存储器等。易失性存储器可包括随机存取存储器(Random Access Memory,RAM)或外部高速缓冲存储器等。作为说明而非局限,RAM可以是多种形式,比如静态随机存取存储器(Static Random Access Memory,SRAM)或动态随机存取存储器(Dynamic RandomAccess Memory,DRAM)等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等,不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等,不限于此。
以上实施例的各技术特征可以进行任意的组合,为使描述简洁,未对上述实施例中的各个技术特征所有可能的组合都进行描述,然而,只要这些技术特征的组合不存在矛盾,都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本申请的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对本申请专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本申请构思的前提下,还可以做出若干变形和改进,这些都属于本申请的保护范围。因此,本申请的保护范围应以所附权利要求为准。

Claims (10)

1.一种微前端系统的页面配置方法,其特征在于,所述方法包括:
响应于针对微前端系统的配置事件,确定作为主应用的第一应用、以及作为子应用的第二应用,其中,响应所述配置事件之前,所述第一应用以及所述第二应用为主应用或者子应用;
将所述第一应用的应用信息填充至主应用页面模板,得到主应用页面;所述主应用页面包括所述第二应用对应的页面元素;
对所述页面元素进行应用地址映射,确定所述第二应用的应用地址;
响应于针对所述页面元素的触发操作,跳转至所述应用地址所表征的子应用页面。
2.根据权利要求1所述的方法,其特征在于,所述响应于针对微前端系统的配置事件,确定作为主应用的第一应用、以及作为子应用的第二应用,包括:
响应于针对应用池中多个候选应用的触发操作,确定微前端系统的配置信息,基于各所述触发顺序,从各所述候选应用中确定作为主应用的第一应用、以及作为子应用的第二应用,所述配置信息通过各所述候选应用各自的触发顺序确定;或者,接收到针对所述微前端系统的配置信息的确认指令,基于所述配置信息确定作为所述主应用的第一应用、以及作为所述子应用的第二应用。
3.根据权利要求1所述的方法,其特征在于,所述对所述页面元素进行应用地址映射,确定所述第二应用的应用地址,包括:
获取所述第二应用的应用信息;
基于所述应用信息生成第二应用路由;
根据所述第二应用路由对所述页面元素进行应用地址映射,确定所述第二应用的应用地址。
4.根据权利要求1所述的方法,其特征在于,所述响应于针对所述页面元素的触发操作,跳转至所述应用地址所表征的子应用页面,包括:
响应于针对所述页面元素的触发操作,获取应用页面的历史加载记录;所述历史加载记录包括历史应用地址;
在各所述历史应用地址中包括所述应用地址的情况下,跳转至所述应用地址所表征的子应用页面;
在各所述历史应用地址中不包括所述应用地址的情况下,跳转至基于所述应用地址建立的子应用页面。
5.根据权利要求1所述的方法,其特征在于,所述方法还包括:在不同的所述配置事件下,相同的应用,应用类型是相同或不相同的。
6.根据权利要求1至5中任意一项所述的方法,其特征在于,所述微前端系统包括多个层级;所述方法还包括:
将所述第二应用作为当前层级的主应用,并确定作为所述当前层级的子应用的第三应用;
在所述第二应用的子应用页面添加所述第三应用对应的页面元素。
7.根据权利要求1至5中任意一项所述的方法,其特征在于,所述方法还包括:
响应于针对应用池中多个候选应用的插件加载操作,对每一所述候选应用加载应用插件,所述多个候选应用中包括所述第一应用以及所述第二应用;
所述响应于针对微前端系统的配置事件,确定作为主应用的第一应用、以及作为子应用的第二应用,包括:
第一应用的第一应用插件响应于针对微前端系统的配置事件,确定所述第一应用的应用类型为主应用;
第二应用的第二应用插件响应于针对微前端系统的配置事件,确定所述第二应用的应用类型为子应用。
8.一种微前端系统的页面配置装置,其特征在于,所述装置包括:
应用确定模块,用于响应于针对微前端系统的配置事件,确定作为主应用的第一应用、以及作为子应用的第二应用,其中,响应所述配置事件之前,所述第一应用以及所述第二应用为主应用或者子应用;
主应用页面确定模块,用于将所述第一应用的应用信息填充至主应用页面模板,得到主应用页面;所述主应用页面包括所述第二应用对应的页面元素;
应用地址映射模块,用于对所述页面元素进行应用地址映射,确定所述第二应用的应用地址;
触发操作响应模块,用于响应于针对所述页面元素的触发操作,跳转至所述应用地址所表征的子应用页面。
9.一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,其特征在于,所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述的方法的步骤。
10.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。
CN202311817190.1A 2023-12-27 2023-12-27 微前端系统的页面配置方法、装置和计算机设备 Pending CN118034717A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202311817190.1A CN118034717A (zh) 2023-12-27 2023-12-27 微前端系统的页面配置方法、装置和计算机设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202311817190.1A CN118034717A (zh) 2023-12-27 2023-12-27 微前端系统的页面配置方法、装置和计算机设备

Publications (1)

Publication Number Publication Date
CN118034717A true CN118034717A (zh) 2024-05-14

Family

ID=90992308

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202311817190.1A Pending CN118034717A (zh) 2023-12-27 2023-12-27 微前端系统的页面配置方法、装置和计算机设备

Country Status (1)

Country Link
CN (1) CN118034717A (zh)

Similar Documents

Publication Publication Date Title
US10831331B2 (en) Window control for simultaneously running applications
US20170010673A1 (en) Gesture based sharing of user interface portion
CN104573066A (zh) 页面复用方法及装置
JP6794347B2 (ja) アプリケーションインターフェースのナビゲーション
CN110321189B (zh) 一种在宿主程序中呈现寄宿程序的方法与设备
CN104423961A (zh) 一种生成测试脚本的方法及系统
WO2014194654A1 (en) Method and apparatus for page view switching
US20140365960A1 (en) Method and apparatus for page view switching
CN101263484B (zh) 用于声明性定义的控件动作的方法和系统
US9349123B1 (en) Hybrid native networked application
JP7082701B2 (ja) 磁気ディスクの管理方法、磁気ディスクの管理装置、電子機器、コンピュータプログラムおよびコンピュータ可読記憶媒体
CN114625439A (zh) 基于微前端架构的子应用运行方法、电子设备及存储介质
CN111381745B (zh) 页面切换方法、装置、设备
CN118034717A (zh) 微前端系统的页面配置方法、装置和计算机设备
CN110908644A (zh) 状态节点的配置方法、装置、计算机设备和存储介质
CN115712794A (zh) 页面管理方法、装置、处理器及电子设备
CN110888649B (zh) 应用部署方法、应用基线的创建方法和装置
CN115113898A (zh) 微应用的动态更新方法、装置、计算机设备和存储介质
CN114489607A (zh) 跨栈应用处理与页面渲染方法、装置、设备及存储介质
US10664378B2 (en) Visualizing a user-centric stack frame graph
CN111880698A (zh) 智能终端的信息处理方法、装置、电子设备和存储介质
US9372669B2 (en) Multiple architecture viewpoints in single unified modeling language (UML) model
WO2017222842A1 (en) Programming organizational links that propagate to mobile applications
CN117724780B (zh) 一种信息获取方法
CN114138266B (zh) 页面数据展示方法、装置、设备、介质及计算机程序产品

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination