CN113157274B - 基于微前端的软件开发方法、装置、电子设备及存储介质 - Google Patents
基于微前端的软件开发方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN113157274B CN113157274B CN202110554045.3A CN202110554045A CN113157274B CN 113157274 B CN113157274 B CN 113157274B CN 202110554045 A CN202110554045 A CN 202110554045A CN 113157274 B CN113157274 B CN 113157274B
- Authority
- CN
- China
- Prior art keywords
- target
- project
- micro front
- code file
- page template
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 65
- 238000011161 development Methods 0.000 claims abstract description 61
- 238000012856 packing Methods 0.000 claims abstract description 11
- 230000008859 change Effects 0.000 claims abstract description 10
- 238000004891 communication Methods 0.000 claims description 8
- 238000004590 computer program Methods 0.000 claims description 8
- 238000009877 rendering Methods 0.000 claims description 6
- 230000004048 modification Effects 0.000 claims description 5
- 238000012986 modification Methods 0.000 claims description 5
- 230000004044 response Effects 0.000 claims 1
- 238000004806 packaging method and process Methods 0.000 description 9
- 238000010586 diagram Methods 0.000 description 8
- 238000012545 processing Methods 0.000 description 6
- 230000006870 function Effects 0.000 description 5
- 230000008569 process Effects 0.000 description 4
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000004458 analytical method Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000004519 manufacturing process Methods 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 238000006467 substitution reaction Methods 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000011160 research Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/33—Intelligent editors
Abstract
本公开提供了一种基于微前端的软件开发方法、装置、电子设备及存储介质，该基于微前端的软件开发方法包括：响应针对目标微前端子工程的开发请求指令，从服务端加载与开发请求指令对应的目标页面模板；目标页面模板由存储于本地的与开发请求指令对应的目标微前端主工程的代码文件经打包后生成；读取目标页面模板中的数据列表，数据列表包括目标微前端子工程的名称、线上路径以及线上代码文件链接；根据目标微前端子工程存储在本地的项目配置，修改数据列表以将线上代码文件链接改成目标微前端子工程的本地代码文件链接；基于修改后的数据列表，启动网页服务，展示与修改后的目标页面模板对应的目标页面。
Description
技术领域
本公开涉及计算机技术领域，具体而言，涉及一种基于微前端的软件开发方法、装置、电子设备和存储介质。
背景技术
微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将网页(Web)应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。这些前端应用可以独立运行、独立开发、独立部署。
在微前端架构下，通常包括微前端主工程和微前端子工程。其中，微前端主工程也称顶层的模块管理加载器，用于负责实时加载运行时的微前端子工程(也称子模块)，并注入相关依赖。因此使用微前端架构进行开发时，需要依赖微前端主工程，才能进行微前端子工程的开发。
现有的微前端架构开发模式是，先启动微前端主工程服务，然后启动微前端子工程服务，将微前端主工程服务对应的微前端子工程加载代理到本地微前端子工程，来实现本地微前端子工程的调试开发。
然而，上述方法在开发时由于在软件开发时需要本地同时启动两个服务(微前端主工程服务和微前端子工程服务)，导致流程繁琐且性能较低，进而影响开发效率。另外，该方法对微前端主工程代码有侵入性影响，容易带来不可预期的漏洞(bug)。
发明内容
本公开实施例至少提供一种基于微前端的软件开发方法、装置、电子设备及计算机可读存储介质。
第一方面，本公开实施例提供了一种基于微前端的软件开发方法，包括：
响应针对目标微前端子工程的开发请求指令，从服务端加载与所述开发请求指令对应的目标页面模板；所述目标页面模板由存储于本地的与所述开发请求指令对应的目标微前端主工程的代码文件经打包后生成，所述目标微前端主工程用于实时加载运行时的所述目标微前端子工程；
读取所述目标页面模板中的数据列表；所述数据列表包括所述目标微前端子工程的名称、线上路径以及线上代码文件链接；
根据所述目标微前端子工程存储在本地的项目配置，修改所述数据列表，以将所述线上代码文件链接改成所述目标微前端子工程的本地代码文件链接；
基于修改后的数据列表，启动网页服务，展示与修改后的所述目标页面模板对应的目标页面。
本公开实施例中，在接收到针对目标微前端子工程的开发请求指令时，直接从服务端加载与开发请求指令对应的目标微前端主工程页面模板，进而避免了现有技术中在本地启动目标微前端主工程项目，且不需要改动目标微前端主工程代码，仅需加载目标微前端主工程页面模板，即可实现目标微前端子工程的运行，流程更简单、提高了运行的性能，同时避免了因多人修改而产生bug的情况，提高了开发的稳定性。
根据第一方面，在一种可能的实施方式中，所述读取所述目标页面模板中的数据列表，包括：
通过访问所述目标页面模板中全局变量的方式读取所述数据列表；其中，所述全局变量存储有所述数据列表的相应赋值。
根据第一方面，在一种可能的实施方式中，所述读取所述目标页面模板中的数据列表，还包括：
在所述全局变量为空的情况下，通过调用所述数据列表接口的方式读取所述数据列表。
根据第一方面，在一种可能的实施方式中，所述目标页面包括导航栏，展示所述目标页面之后，所述方法还包括：
响应针对所述导航栏中的目标导航控件的触发操作，从本地加载所述目标微前端子工程的代码文件；所述目标导航控件与所述目标微前端子工程对应；
响应用户的操作，对所述目标微前端子工程的代码文件进行开发和/或调试。
根据第一方面，在一种可能的实施方式中，所述响应针对目标微前端子工程的开发请求指令，从服务端加载与所述开发请求指令对应的目标页面模板之前，所述方法还包括：
将所述目标微前端主工程所对应的至少一个代码文件进行合并，生成目标代码文件；
将所述目标代码文件与基础页面模板进行融合，得到初步页面模板；
将所述数据列表渲染到所述初步页面模板中，得到所述目标页面模板。
根据第一方面，在一种可能的实施方式中，所述将所述目标微前端主工程所对应的至少一个代码文件进行合并，生成目标代码文件，包括：
在开发模式下，将所述微前端主工程所对应的至少一个代码文件进行合并，生成目标代码文件。
第二方面，本公开实施例提供了一种基于微前端的软件开发装置，包括：
加载模块，用于响应针对目标微前端子工程的开发请求指令，从服务端加载与所述开发请求指令对应的目标页面模板；所述目标页面模板由存储于本地的与所述开发请求指令对应的目标微前端主工程的代码文件经打包后生成，所述目标微前端主工程用于实时加载运行时的所述目标微前端子工程；
读取模块，用于读取所述目标页面模板中的数据列表；所述数据列表包括所述目标微前端子工程的名称、线上路径以及线上代码文件链接；
修改模块，用于根据所述目标微前端子工程存储在本地的项目配置，修改所述数据列表，以将所述线上代码文件链接改成所述目标微前端子工程的本地代码文件链接；
展示模块，用于基于修改后的数据列表，启动网页服务，展示与修改后的所述目标页面模板对应的目标页面。
根据第二方面，在一种可能的实施方式中，所述读取模块具体用于：
通过访问所述微前端主工程页面模板中的全局变量的方式读取所述数据列表；其中，所述全局变量中存储有所述数据列表的相应赋值。
根据第二方面，在一种可能的实施方式中，所述读取模块具体用于：
在所述全局变量为空的情况下，通过调用所述数据列表接口的方式读取所述数据列表。
根据第二方面，在一种可能的实施方式中，所述目标页面包括导航栏，所述装置还包括开发模块，所述开发模块用于：
响应针对所述导航栏中的目标导航控件的触发操作，从本地加载所述目标微前端子工程的代码文件；所述目标导航控件与所述目标微前端子工程对应；
响应用户的操作，对所述目标微前端子工程的代码文件进行开发和/或调试。
根据第二方面，在一种可能的实施方式中，所述装置还包括打包模块，所述打包模块用于：
将所述目标微前端主工程所对应的至少一个代码文件进行合并，生成目标代码文件；
将所述目标代码文件与基础页面模板进行融合，得到初步页面模板；
将所述数据列表渲染到所述初步页面模板中，得到所述目标页面模板。
根据第二方面，在一种可能的实施方式中，所述打包模块具体用于：
在开发模式下，将所述微前端主工程所对应的至少一个代码文件进行合并，生成目标代码文件。
第三方面，本公开实施例提供了一种电子设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行如第一方面所述的基于微前端的软件开发方法的步骤。
第四方面，本公开实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如第一方面所述的基于微前端的软件开发方法的步骤。
为使本公开的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
附图说明
为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，此处的附图被并入说明书中并构成本说明书中的一部分，这些附图示出了符合本公开的实施例，并与说明书一起用于说明本公开的技术方案。应当理解，以下附图仅示出了本公开的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1示出了本公开实施例所提供的一种基于微前端的软件开发方法的示例性架构示意图；
图2示出了本公开实施例所提供的一种基于微前端的软件开发方法的流程图；
图3示出了本公开实施例所提供的另一种基于微前端的软件开发方法的流程图；
图4示出了本公开实施例所提供的一种网页页面的示意图；
图5示出了本公开实施例所提供的一种对微前端主工程代码文件进行打包的方法流程图；
图6示出了本公开实施例所提供的一种基于微前端的软件开发装置的结构示意图；
图7示出了本公开实施例所提供的另一种基于微前端的软件开发装置的结构示意图；
图8示出了本公开实施例所提供的一种电子设备的示意图。
具体实施方式
为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。
应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
本文中术语“和/或”，仅仅是描述一种关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中术语“至少一种”表示多种中的任意一种或多种中的至少两种的任意组合，例如，包括A、B、C中的至少一种，可以表示包括从A、B和C构成的集合中选择的任意一个或多个元素。
微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将网页(Web)应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。这些前端应用可以独立运行、独立开发、独立部署。
在微前端架构下，通常包括微前端主工程和微前端子工程。其中，微前端主工程也称顶层的模块管理加载器，用于负责实时加载运行时的微前端子工程(也称子模块)，并注入相关依赖。因此使用微前端架构进行开发时，需要依赖微前端主工程，才能进行微前端子工程的开发。
现有的微前端架构开发模式是，先启动微前端主工程服务，然后启动微前端子工程服务，将微前端主工程服务对应的微前端子工程加载代理到本地微前端子工程，来实现本地微前端子工程的调试开发。
然而，上述方法在开发时由于在软件开发时需要本地同时启动两个服务(微前端主工程服务和微前端子工程服务)，导致流程繁琐且性能较低，进而影响开发效率。另外，该方法对微前端主工程代码有侵入性影响，容易带来不可预期的漏洞(bug)。
例如，在启动微前端主工程服务时，由于需要下载源码，导致开发操作成本的增加；还要编译源码，导致启动时间较长且对本地机器性能有影响；在修改源码的过程中，由于多人操作会造成协作问题，进而导致容易出现bug。另外，在加载微前端子工程服务时，由于微前端主工程由源码生成，包体积较大，导致加载解析的速度较慢。
基于上述研究，本公开提供了一种基于微前端的软件开发方法，响应针对目标微前端子工程的开发请求指令，从服务端加载与所述开发请求指令对应的目标页面模板；所述目标页面模板由存储于本地的与所述开发请求指令对应的目标微前端主工程的代码文件经打包后生成，所述目标微前端主工程用于实时加载运行时的所述目标微前端子工程；读取所述目标页面模板中的数据列表；所述数据列表包括所述目标微前端子工程的名称、线上路径以及线上代码文件链接；根据所述目标微前端子工程存储在本地的项目配置，修改所述数据列表，以将所述线上代码文件链接改成所述目标微前端子工程的本地代码文件链接；基于修改后的数据列表，启动网页服务，展示与修改后的所述目标页面模板对应的目标页面。如此，避免了在本地启动微前端主工程服务，进而能够提高开发的效率和稳定性。
针对以上方案所存在的缺陷，均是发明人在经过实践并仔细研究后得出的结果，因此，上述问题的发现过程以及下文中本公开针对上述问题所提出的解决方案，都应该是发明人在本公开过程中对本公开做出的贡献。
下面结合具体的系统应用架构对本申请方案进行详细说明。
请参阅图1，图1示出了可以应用于本申请的基于微前端的软件开发方法的示例性系统架构。
如图1所示，系统架构100可以包括电子设备10、20，网络30和服务器40。网络30用以在电子设备10、20和服务器40之间提供通信链路的介质。网络30可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
用户可以使用电子设备10、20通过网络30与服务器40交互，以接收或发送消息等。电子设备10、20上可以安装有各种客户端应用，例如，web应用、集成开发环境类应用等。
电子设备10、20可以是具有显示屏和处理器的各种电子设备，包括但不限于膝上型便携计算机和台式计算机等等。
服务器40可以是提供各种服务的服务器，例如对电子设备10、20上显示的集成开发环境类应用提供支持的服务器。服务器40可以对接收到的获取与项目名称匹配的项目的获取请求等数据进行分析等处理，并将处理结果(如页面模板)反馈给电子设备。
为便于对本实施例进行理解，下面对本公开实施例所公开的一种基于微前端的软件开发方法进行详细介绍，本公开实施例所提供的基于微前端的软件开发方法的执行主体一般为具有一定计算能力的电子设备，该电子设备例如包括：终端设备或其它处理设备，终端设备可以为移动设备、用户终端、计算设备等。在一些可能的实现方式中，该基于微前端的软件开发方法可以通过处理器调用存储器中存储的计算机可读指令的方式来实现。
参见图2所示，为本公开实施例提供的基于微前端的软件开发方法的流程图，其中，该方法可以应用于上述电子设备中，或应用于本地或云端的服务器中。图2所示的基于微前端的软件开发方法包括以下S101～S103：
S101，响应针对目标微前端子工程的开发请求指令，从服务端加载与所述开发请求指令对应的目标页面模板；所述目标页面模板由存储于本地的与所述开发请求指令对应的目标微前端主工程的代码文件经打包后生成，所述目标微前端主工程用于实时加载运行时的所述目标微前端子工程。
其中，目标微前端子工程是指多个微前端子工程中需要进行开发或者调试的微前端子工程。目标微前端主工程是指用于实时加载运行所述目标微前端子工程的微前端主工程。打包是指将多个小文件的代码进行打包形成一个大文件的编译和压缩过程。
示例性地，目标页面模板是指超文本标记语言(HTML)模板，HTML模板可以理解为一个网页容器，可以加载外部资源，该外部资源可以是js代码，也可以是媒体资源。本实施方式中，目标页面模板具体是指能够加载js代码的HTML模板。
可以理解，由于微前端子工程运行需要微前端主工程提供基础运行环境，从而微前端子工程的开发通常需要启动微前端主工程服务，但微前端主工程一般与开发业务无关，只是一个运行外壳环境，是可以作为静态资源引入的，所以本申请实施例中，可以先将微前端主工程提前打包好并存储于服务端(图1中的服务器40)，使用时直接加载即可。
具体地，可以通过命令行加载该目标页面模板。也即，在接收到用户输入的命令行时，确定接收到开发请求指令，并且可以根据命令行的内容确定目标微前端子工程。本实施方式中的用户是指软件开发人员。
S102，读取所述目标页面模板中的数据列表；所述数据列表包括所述目标微前端子工程的名称、线上路径以及线上代码文件链接。
示例性地，可以通过访问所述目标页面模板中全局变量的方式读取所述数据列表；其中，所述全局变量存储有所述数据列表的相应赋值，也即，可以将数据列表改写成相应的代码并赋值给全局变量。
可以理解，将数据列表赋值给全局变量的过程可能失败，导致全局变量为空，此时则需要手动获取数据列表，例如，通过调用接口(兜底接口)获取数据列表。也即，在所述全局变量为空的情况下，通过调用所述数据列表接口的方式读取所述数据列表。
S103，根据所述目标微前端子工程存储在本地的项目配置，修改所述数据列表，以将所述线上代码文件链接改成所述目标微前端子工程的本地代码文件链接。
示例地，可以根据所述目标微前端子工程存储于本地的项目配置，将本地配置覆写到所述目标页面模板中，也即，将所述线上代码文件链接改成所述目标微前端子工程的本地代码文件链接。其中，目标微前端子工程的本地代码文件链接可以预先通过打包的方式生成。
S104，基于修改后的数据列表，启动网页服务，展示与修改后的所述目标页面模板对应的目标页面。
示例性地，可以启动代理服务，并返回改写后的目标页面模板。例如，在本地通过代理工具将口面的域名(如www.xxx.com)，代理到本地地址：localhost：3000(端口可根据配置改变)，然后访问wwW.xxx.com即可看到运行的网口。
本公开实施例中，在接收到针对目标微前端子工程的开发请求指令时，直接从服务端加载与开发请求指令对应的目标微前端主工程页面模板，进而避免了现有技术中在本地启动微前端主工程项目，且不需要改动微前端主工程代码，仅需加载微前端主工程页面模板即可实现微前端子工程的运行，流程更简单、提高了运行的性能，同时避免了因多人修改而产生bug的情况，提高了开发的稳定性。
具体地，使用远程模板服务可以达到秒级启动，极大节约启动时间；实现启动即缓存，减少机器性能消耗；另外，由于打包代码体积小，提高了加载速度以及调试时间。
参见图3所示，为本公开实施例所提供的另一种基于微前端的软件开发方法的流程图，与图2中的方法不同的是，该方法在步骤S104之后还包括如下步骤：
S105，响应针对所述导航栏中的目标导航控件的触发操作，从本地加载所述目标微前端子工程的代码文件；所述目标导航控件与所述目标微前端子工程对应。
S106，响应用户的操作，对所述目标微前端子工程的代码文件进行开发和/或调试。
参见图4所示，为本公开实施例提供的一种网页页面的示意图。如图4所示，所述目标页面包括导航栏，导航兰由微目标前端主工程代码文件生成，可以用于切换子工程模块。例如，当导航栏中的“渠道”控件被触发时，即可展示与其相对应的页面。其中，目标微前端子工程口面由目标微前端子工程代码文件生成，切换子工程模块时，每个子工程模块的口面都正常加载，访问本地启动的子工程模块时，可以看到根据本地代码生成的最新口面。
请参阅图5，为本公开实施例提供的一种对目标微前端主工程代码文件进行打包的方法流程图。该方法包括以下S201～203：
S201，将所述目标微前端主工程所对应的至少一个代码文件进行合并，生成目标代码文件。
S202，将所述目标代码文件与基础页面模板进行融合，得到初步页面模板。
S203，将所述数据列表渲染到所述初步页面模板中，得到所述目标页面模板。
可以理解，在生成目标微前端主工程页面模板时，需要先将目标微前端主工程所对应的至少一个代码文件进行合并，生成目标代码文件，然后将目标代码文件与基础页面模板进行融合，得到初步页面模板，此处的基础页面模板仅仅是个框架，不具有相应的功能，将目标微前端主工程代码文件融合到该基础页面模板后，该页面模板即具有了该目标微前端主工程相应的功能；最后将数据列表渲染到初步页面模板中，即可得到所述目标页面模板。
需要说明的是，此处的数据列表中的目标微前端子工程代码文件的链接为线上链接，而非本地，因此，后面需要才需要执行步骤S103将数据列表中的微前端子工程的代码文件链接改成存储于本地的目标微前端子工程代码文件链接。
示例性地，可以在开发模式下，将所述目标微前端主工程所对应的至少一个代码文件进行合并，生成目标代码文件。本实施方式中，使用开发模式进行打包的兼容性较好。可以理解，其他实施方式中，也可以在生产模式下进行打包，在生产模式下打包的代码文件则包较小，加载更快。
本领域技术人员可以理解，在具体实施方式的上述方法中，各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定，各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。
基于同一技术构思，本公开实施例中还提供了与基于微前端的软件开发方法对应的基于微前端的软件开发装置，由于本公开实施例中的装置解决问题的原理与本公开实施例上述基于微前端的软件开发方法相似，因此装置的实施可以参见方法的实施，重复之处不再赘述。
参照图6所示，为本公开实施例提供的一种基于微前端的软件开发装置500的示意图，该基于微前端的软件开发装置包括：
加载模块501，用于响应针对目标微前端子工程的开发请求指令，从服务端加载与所述开发请求指令对应的目标页面模板；所述目标页面模板由存储于本地的与所述开发请求指令对应的目标微前端主工程的代码文件经打包后生成，所述目标微前端主工程用于实时加载运行时的所述目标微前端子工程；
读取模块502，用于读取所述目标页面模板中的数据列表；所述数据列表包括所述目标微前端子工程的名称、线上路径以及线上代码文件链接；
修改模块503，用于根据所述目标微前端子工程存储在本地的项目配置，修改所述数据列表，以将所述线上代码文件链接改成所述目标微前端子工程的本地代码文件链接；
展示模块504，用于基于修改后的数据列表，启动网页服务，展示与修改后的所述目标页面模板对应的目标页面。
在一种可能的实施方式中，所述读取模块502具体用于：
通过访问所述微前端主工程页面模板中的全局变量的方式读取所述数据列表；其中，所述全局变量中存储有所述数据列表的相应赋值。
在一种可能的实施方式中，所述读取模块502具体用于：
在所述全局变量为空的情况下，通过调用所述数据列表接口的方式读取所述数据列表。
参见图7所示，在一种可能的实施方式中，所述目标页面包括导航栏，所述装置还包括开发模块505，所述开发模块505用于：
响应针对所述导航栏中的目标导航控件的触发操作，从本地加载所述目标微前端子工程的代码文件；所述目标导航控件与所述目标微前端子工程对应；
响应用户的操作，对所述目标微前端子工程的代码文件进行开发和/或调试。
在一种可能的实施方式中，所述装置还包括打包模块506，所述打包模块506用于：
将所述目标微前端主工程所对应的至少一个代码文件进行合并，生成目标代码文件；
将所述目标代码文件与基础页面模板进行融合，得到初步页面模板；
将所述数据列表渲染到所述初步页面模板中，得到所述目标页面模板。
在一种可能的实施方式中，所述打包模块具体用于：
在开发模式下，将所述微前端主工程所对应的至少一个代码文件进行合并，生成目标代码文件。
关于装置中的各模块的处理流程、以及各模块之间的交互流程的描述可以参照上述方法实施例中的相关说明，这里不再详述。
基于同一技术构思，本公开实施例还提供了一种电子设备。参照图8所示，为本公开实施例提供的电子设备700的结构示意图，包括处理器701、存储器702、和总线703。其中，存储器702用于存储执行指令，包括内存7021和外部存储器7022；这里的内存7021也称内存储器，用于暂时存放处理器701中的运算数据，以及与硬盘等外部存储器7022交换的数据，处理器701通过内存7021与外部存储器7022进行数据交换。
本申请实施例中，存储器702具体用于存储执行本申请方案的应用程序代码，并由处理器701来控制执行。也即，当电子设备700运行时，处理器701与存储器702之间通过总线703通信，使得处理器701执行存储器702中存储的应用程序代码，进而执行前述任一实施例中所述的方法。
其中，存储器702可以是，但不限于，随机存取存储器(Random Access Memory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(Programmable Read-OnlyMemory，PROM)，可擦除只读存储器(Erasable Programmable Read-Only Memory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-Only Memory，EEPROM)等。
处理器701可能是一种集成电路芯片，具有信号的处理能力。上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(NetworkProcessor，NP)等；还可以是数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
可以理解的是，本申请实施例示意的结构并不构成对电子设备700的具体限定。在本申请另一些实施例中，电子设备700可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。
本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法实施例中的基于微前端的软件开发方法的步骤。其中，该存储介质可以是易失性或非易失的计算机可读取存储介质。
本公开实施例还提供一种计算机程序产品，该计算机程序产品承载有程序代码，所述程序代码包括的指令可用于执行上述方法实施例中的基于微前端的软件开发方法的步骤，具体可参见上述方法实施例，在此不再赘述。
其中，上述计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中，所述计算机程序产品具体体现为计算机存储介质，在另一个可选实施例中，计算机程序产品具体体现为软件产品，例如软件开发包(Software Development Kit，SDK)等等。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在本公开所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-OnlyMemory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
最后应说明的是：以上所述实施例，仅为本公开的具体实施方式，用以说明本公开的技术方案，而非对其限制，本公开的保护范围并不局限于此，尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应所述以权利要求的保护范围为准。
Claims (10)
1.一种基于微前端的软件开发方法，其特征在于，包括：
响应针对目标微前端子工程的开发请求指令，从服务端加载与所述开发请求指令对应的目标页面模板；所述目标页面模板由存储于本地的与所述开发请求指令对应的目标微前端主工程的代码文件经打包后生成，所述目标微前端主工程用于实时加载运行时的所述目标微前端子工程；
读取所述目标页面模板中的数据列表；所述数据列表包括所述目标微前端子工程的名称、线上路径以及线上代码文件链接；
根据所述目标微前端子工程存储在本地的项目配置，修改所述数据列表，以将所述线上代码文件链接改成所述目标微前端子工程的本地代码文件链接；
基于修改后的数据列表，启动网页服务，展示与修改后的所述目标页面模板对应的目标页面。
2.根据权利要求1所述的方法，其特征在于，所述读取所述目标页面模板中的数据列表，包括：
通过访问所述目标页面模板中全局变量的方式读取所述数据列表；其中，所述全局变量存储有所述数据列表的相应赋值。
3.根据权利要求2所述的方法，其特征在于，所述读取所述目标页面模板中的数据列表，还包括：
在所述全局变量为空的情况下，通过调用所述数据列表接口的方式读取所述数据列表。
4.根据权利要求1所述的方法，其特征在于，所述目标页面包括导航栏，展示所述目标页面之后，所述方法还包括：
响应针对所述导航栏中的目标导航控件的触发操作，从本地加载所述目标微前端子工程的代码文件；所述目标导航控件与所述目标微前端子工程对应；
响应用户的操作，对所述目标微前端子工程的代码文件进行开发和/或调试。
5.根据权利要求1所述的方法，其特征在于，所述响应针对目标微前端子工程的开发请求指令，从服务端加载与所述开发请求指令对应的目标页面模板之前，所述方法还包括：
将所述目标微前端主工程所对应的至少一个代码文件进行合并，生成目标代码文件；
将所述目标代码文件与基础页面模板进行融合，得到初步页面模板；
将所述数据列表渲染到所述初步页面模板中，得到所述目标页面模板。
6.根据权利要求5所述的方法，其特征在于，所述将所述目标微前端主工程所对应的至少一个代码文件进行合并，生成目标代码文件，包括：
在开发模式下，将所述微前端主工程所对应的至少一个代码文件进行合并，生成目标代码文件。
7.一种基于微前端的软件开发装置，其特征在于，包括：
加载模块，用于响应针对目标微前端子工程的开发请求指令，从服务端加载与所述开发请求指令对应的目标页面模板；所述目标页面模板由存储于本地的与所述开发请求指令对应的目标微前端主工程的代码文件经打包后生成，所述目标微前端主工程用于实时加载运行时的所述目标微前端子工程；
读取模块，用于读取所述目标页面模板中的数据列表；所述数据列表包括所述目标微前端子工程的名称、线上路径以及线上代码文件链接；
修改模块，用于根据所述目标微前端子工程存储在本地的项目配置，修改所述数据列表，以将所述线上代码文件链接改成所述目标微前端子工程的本地代码文件链接；
基于修改后的数据列表，启动网页服务，展示与修改后的所述目标页面模板对应的目标页面。
8.根据权利要求7所述的装置，其特征在于，所述读取模块具体用于：
通过访问所述微前端主工程页面模板中的全局变量的方式读取所述数据列表；其中，所述全局变量中存储有所述数据列表的相应赋值。
9.一种电子设备，其特征在于，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当所述电子设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行如权利要求1-6任一所述的基于微前端的软件开发方法的步骤。
10.一种计算机可读存储介质，其特征在于，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如权利要求1-6任一所述的基于微前端的软件开发方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110554045.3A CN113157274B (zh) | 2021-05-20 | 2021-05-20 | 基于微前端的软件开发方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110554045.3A CN113157274B (zh) | 2021-05-20 | 2021-05-20 | 基于微前端的软件开发方法、装置、电子设备及存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113157274A CN113157274A (zh) | 2021-07-23 |
| CN113157274B true CN113157274B (zh) | 2023-11-24 |
Family
ID=76876873
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110554045.3A Active CN113157274B (zh) | 2021-05-20 | 2021-05-20 | 基于微前端的软件开发方法、装置、电子设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113157274B (zh) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116700701B (zh) * | 2023-08-07 | 2023-11-28 | 北京九一云科技有限公司 | 无代码软件开发方法、装置及电子设备 |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110968302A (zh) * | 2018-09-28 | 2020-04-07 | 北京嘀嘀无限科技发展有限公司 | 前端开发方法、装置及电子设备 |
| CN111224873A (zh) * | 2020-01-20 | 2020-06-02 | 厦门靠谱云股份有限公司 | 基于Nginx路由分发式的微前端系统及其开发、部署方法 |
| CN111324346A (zh) * | 2020-01-21 | 2020-06-23 | 中国科学院软件研究所 | 一种基于Serverless的前端应用构建方法和系统 |
| CN111352682A (zh) * | 2018-12-24 | 2020-06-30 | 北京嘀嘀无限科技发展有限公司 | 页面渲染方法、装置、服务器及可读存储介质 |
| CN111737032A (zh) * | 2020-07-27 | 2020-10-02 | 腾讯科技（深圳）有限公司 | 一种基于微内核系统的子程序运行方法、装置和电子设备 |
| WO2021003932A1 (zh) * | 2019-07-05 | 2021-01-14 | 平安国际智慧城市科技股份有限公司 | 文件管理方法、装置、计算机设备和存储介质 |
| CN112667305A (zh) * | 2019-09-30 | 2021-04-16 | 北京国双科技有限公司 | 页面展示方法及装置 |
| CN112685029A (zh) * | 2020-12-30 | 2021-04-20 | 京东数字科技控股股份有限公司 | 一种可视化模板的生成方法、装置、设备及存储介质 |
-
2021
- 2021-05-20 CN CN202110554045.3A patent/CN113157274B/zh active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110968302A (zh) * | 2018-09-28 | 2020-04-07 | 北京嘀嘀无限科技发展有限公司 | 前端开发方法、装置及电子设备 |
| CN111352682A (zh) * | 2018-12-24 | 2020-06-30 | 北京嘀嘀无限科技发展有限公司 | 页面渲染方法、装置、服务器及可读存储介质 |
| WO2021003932A1 (zh) * | 2019-07-05 | 2021-01-14 | 平安国际智慧城市科技股份有限公司 | 文件管理方法、装置、计算机设备和存储介质 |
| CN112667305A (zh) * | 2019-09-30 | 2021-04-16 | 北京国双科技有限公司 | 页面展示方法及装置 |
| CN111224873A (zh) * | 2020-01-20 | 2020-06-02 | 厦门靠谱云股份有限公司 | 基于Nginx路由分发式的微前端系统及其开发、部署方法 |
| CN111324346A (zh) * | 2020-01-21 | 2020-06-23 | 中国科学院软件研究所 | 一种基于Serverless的前端应用构建方法和系统 |
| CN111737032A (zh) * | 2020-07-27 | 2020-10-02 | 腾讯科技（深圳）有限公司 | 一种基于微内核系统的子程序运行方法、装置和电子设备 |
| CN112685029A (zh) * | 2020-12-30 | 2021-04-20 | 京东数字科技控股股份有限公司 | 一种可视化模板的生成方法、装置、设备及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113157274A (zh) | 2021-07-23 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109976761B (zh) | 软件开发工具包的生成方法、装置及终端设备 | |
| US10209968B2 (en) | Application compiling | |
| WO2016177341A1 (zh) | 接口调用方法、装置及终端 | |
| CN106201893B (zh) | 一种Java字节码调试器及调试方法 | |
| CN111338623B (zh) | 一种开发用户界面的方法、装置、介质和电子设备 | |
| GB2589658A (en) | Method and apparatus for running an applet | |
| CN113010827B (zh) | 页面渲染方法、装置、电子设备以及存储介质 | |
| US9996379B2 (en) | Program execution without the use of bytecode modification or injection | |
| CN111026439B (zh) | 应用程序的兼容方法、装置、设备及计算机存储介质 | |
| CN107479868B (zh) | 一种界面加载方法、装置及设备 | |
| CN111026634A (zh) | 一种接口自动化测试系统、方法、装置及存储介质 | |
| CN112631590B (zh) | 组件库生成方法、装置、电子设备和计算机可读介质 | |
| US20180159724A1 (en) | Automatic task tracking | |
| CN112769706B (zh) | 组件化路由方法及系统 | |
| CN113157274B (zh) | 基于微前端的软件开发方法、装置、电子设备及存储介质 | |
| US10789751B2 (en) | Method and apparatus for implementing animation in client application and animation script framework | |
| CN112926002A (zh) | 一种服务请求的处理方法及装置 | |
| CN112764836A (zh) | 运行快应用的方法、装置及电子设备 | |
| CN113315829B (zh) | 客户端离线化h5页面加载方法、装置、计算机设备及介质 | |
| CN115080109A (zh) | 基于混合开发的多云端环境联调方法、装置、系统和设备 | |
| CN116685946A (zh) | 在不停止应用的执行的情况下的更新的共享库的重新加载 | |
| CN112068814A (zh) | 可执行文件的生成方法、装置、系统及介质 | |
| CN113722019B (zh) | 平台程序的显示方法、装置及设备 | |
| CN110990078B (zh) | 应用的初始化方法、装置、存储介质及移动终端 | |
| CN115016827A (zh) | 部署java应用的方法、装置、电子设备和介质 |
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 | ||
| CB02 | Change of applicant information |
Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Applicant after: Douyin Vision Co.,Ltd. Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Applicant before: Tiktok vision (Beijing) Co.,Ltd. Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Applicant after: Tiktok vision (Beijing) Co.,Ltd. Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Applicant before: BEIJING BYTEDANCE NETWORK TECHNOLOGY Co.,Ltd. |
|
| CB02 | Change of applicant information | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |