CN118012427A - 组件编辑方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明公开了一种组件编辑方法、装置、电子设备及存储介质。该方法包括：在浏览器的组件开发界面中获取目标组件的源代码；通过预设工具对所述源代码进行编译，获取编译后的目标代码；在所述浏览器的组件应用界面中，根据所述目标代码生成目标组件；在所述组件应用界面中接收用户对所述目标组件的编辑操作。本发明实施例的技术方案，能够通过浏览器在组件开发界面中获取源代码，并通过浏览器支持的预设工具实现源代码的快速编译，得到目标代码。在得到目标代码后，在组件应用界面中运行目标代码，为用户提供目标组件的低代码编辑环境，实现目标组件的快速生成和编辑，提高低代码物料的编辑效率。

Description

组件编辑方法、装置、电子设备及存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种组件编辑方法、装置、电子设备及存储介质。

背景技术

低代码平台中遇到物料无法满足需求的情况时，需要开发新的物料。物料包括页面中使用的组件。通常开发新物料时需要经过本地编码、测试、编译打包、排期部署后才能使用。

对于一些时效性要求较高的需求，可能出现排期冲突，延误开发进度。如何提高组件物料开发效率成为亟待解决的问题。

发明内容

本发明提供了一种组件编辑方法、装置、电子设备及存储介质，以解决组件物料开发效率低的问题。

根据本发明的一方面，提供了一种组件编辑方法，包括：

在浏览器的组件开发界面中获取目标组件的源代码；

在所述浏览器中通过预设工具对所述源代码进行编译，获取编译后的目标代码；

在所述浏览器的组件应用界面中，根据所述目标代码生成目标组件；

在所述组件应用界面中接收用户对所述目标组件的编辑操作。

根据本发明的另一方面，提供了一种组件编辑装置，包括：

源代码获取模块，用于在浏览器的组件开发界面中获取目标组件的源代码；

目标代码获取模块，用于在所述浏览器中通过预设工具对所述源代码进行编译，获取编译后的目标代码；

目标组件生成模块，用于在所述浏览器的组件应用界面中，根据所述目标代码生成目标组件；

目标组件编辑模块，用于在所述组件应用界面中接收用户对所述目标组件的编辑操作。

根据本发明的另一方面，提供了一种电子设备，所述电子设备包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行本发明任一实施例所述的组件编辑方法。

根据本发明的另一方面，提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使处理器执行时实现本发明任一实施例所述的组件编辑方法。

本发明实施例的技术方案，通过浏览器中的组件开发界面获取目标组件源代码，然后在浏览器中利用预设工具对源代码进行编译，得到目标代码。目标代码可以快速回传到组件应用界面中，在组件应用界面中根据目标代码生成目标组件。在此基础上，用户可以在组件应用界面中以低代码形式对目标组件进行编辑操作。相对于现有技术中在本地编码和编译打包，并需要排期部署，本发明实施例的技术方案，能够通过浏览器在组件开发界面中获取源代码，并通过浏览器支持的预设工具实现源代码的快速编译，得到目标代码。在得到目标代码后，在组件应用界面中运行目标代码，为用户提供目标组件的低代码编辑环境，实现目标组件的快速生成和编辑，提高低代码物料的编辑效率。

应当理解，本部分所描述的内容并非旨在标识本发明的实施例的关键或重要特征，也不用于限制本发明的范围。本发明的其它特征将通过以下的说明书而变得容易理解。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例提供的一种组件编辑方法的流程示意图；

图2是本发明实施例提供的组件开发界面的示意图；

图3是本发明实施例提供的高代码编辑后的组件应用界面的示意图；

图4是本发明实施例提供的高代码编辑前的组件应用界面的示意图；

图5是本发明实施例提供的一种组件编辑装置的结构示意图；

图6是实现本发明实施例的组件编辑方法的电子设备的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

图1是本发明实施例提供的一种组件编辑方法的流程示意图，本实施例可适用于对具有一定时效性要求的组件进行编辑的情况，该方法可以由组件编辑装置来执行，该组件编辑装置可以采用硬件和/或软件的形式实现，该组件编辑装置可配置于电子设备中。如图1所示，该方法包括：

S110、在浏览器的组件开发界面中获取目标组件的源代码。

获取目标组件的源代码可实施为，接收用户在组件开发界面中输入的目标组件的源代码。获取目标组件的源代码还可实施为，导入用户预先编辑的目标组件的源代码。用户可以为开发人员。

图2为本发明实施例提供的组件开发界面的示意图，组件开发界面用于进行高代码编辑。用户可以在组件开发界面中导入或输入目标组件的源代码。组件开发界面左侧为目录区，目录区包括编辑组件代码时涉及的物料列表等资源目录，组件开发界面中间部分为用于编写源代码的代码编辑区。组件开发界面右侧可以设置效果区，用于展示源代码编译后的效果示意。

用户可以在浏览器中访问组件开发界面，并在组件开发界面中编辑目标组件的源代码。目标组件为组件开发界面中的任意一个被用户编辑的组件，组件开发界面中可以包含多个组件。可选的，用户可以分别对多个目标组件进行编辑。

S120、在所述浏览器中通过预设工具对所述源代码进行编译，获取编译后的目标代码。

可选的，在所述浏览器中通过预设工具对所述源代码进行编译，获取编译后的目标代码，包括：在所述浏览器中通过预先导入的集成开发工具对所述源代码进行编译，得到目标代码；通过预设数据传输接口从所述集成开发工具中导出所述目标代码。

预设工具可以通过网络接口或通过网页自身提供的编译服务为用户提供在线或离线的源代码编译。

可选的，预设工具可以通过网络接口为用户提供在线的源代码编译。例如预设工具通过HTTP协议调用远端服务器中的源代码编译功能，对源代码进行编译，并将编译结果反馈至浏览器，进而实现为用户提供在线的源代码编译。

可选的，预设工具还可以通过网页自身提供的编译服务为用户提供离线的源代码编译。

可选的，预设工具可以为Codesandbox工具。Codesandbox工具是集成有web IDE和沙箱的开源项目。其中，web IDE是一种在线集成开发环境(Online IntegratedDevelopment Environment)，可以作为网页版代码编辑器。Codesandbox工具的原生功能包括沙箱功能，沙箱功能包括对代码进行编译以及通过沙箱展示编译后的组件图像(即效果展示)。

本发明可以通过导出方式从Codesandbox工具中将编译得到的目标代码导出，进而实现目标代码的快速获取。

本发明实施例将Codesandbox通过iframe嵌入低代码平台。iframe可以理解为一个独立界面，作为组件开发界面。组件开发界面和低代码平台界面(组件应用界面)是相互独立的。由于存在跨域限制，两个界面的函数不能直接互相传递或调用，因此可以将postMessage(投递消息)作为预设数据传输接口。Codesandbox通过postMessage(投递消息)的方式将编译得到的目标代码发送至浏览器。其中，postMessage(消息投递)可以采用window.postMessage()方法实现。window.postMessage()可以安全地实现跨域通信，是浏览器原生提供的能力，为不同窗口通讯而设计。

通过postMessage方式，将目标代码通过文本方式传递到组件应用界面，在组件应用界面中执行，生成相应的构造函数等函数。通过postMessage方式将Codesandbox工具编译得到的目标代码导出到组件应用界面，能够实现目标代码的快速导出。无需在本地部署编译环境，降低编译成本，节省本地存储空间。

根据开源的IDE和目录树组件，实现接收用户输入的源代码。将该源代码发送到Codesandbox工具，Codesandbox工具进行编译得到目标代码，并通过沙箱功能输出源代码执行后的效果展示。在图2中的效果区中传入Codesandbox工具的沙箱功能的效果展示。

进一步的，在所述浏览器中通过预先导入的集成开发工具对所述源代码进行编译之前，还包括：

获取开源的集成开发项目；对所述集成开发项目进行功能删减，得到集成开发工具；导入所述集成开发工具。

开源的集成开发项目可以为Codesandbox工具。根据使用需求对集成开发项目进行功能进行删减，得到集成开发工具。删减后的Codesandbox工具仅保留沙箱功能，使得集成开发工具具有代码编译以及导出编译后的代码的功能。通过删减Codesandbox工具中的功能，能够降低集成开发工具的数据体量，提高运行效率。

S130、在所述浏览器的组件应用界面中，根据所述目标代码生成目标组件的低代码物料。

图3是本发明实施例提供的高代码编辑后的组件应用界面的示意图。如图3所示，组件应用界面包括组件区域、展示区域和配置区域。

其中，组件区域位于组件应用界面左侧，用于显示目标组件的组件名称以及可操作控件。组件区域可以通过目录的形式将可配置组件的可操作控件进行输出。可以按类别或工程项目等方式对可操作控件进行分类和排布，以便用户可以更加快捷的找到组件。

目标组件的低代码物料包括生成的可操作控件以及组件配置信息。

根据目标代码生成目标组件的可执行代码，浏览器根据可执行代码得到可操作控件的渲染图像。展示区域位于组件应用界面中间，在展示区域中输出渲染图像。配置区域位于组件应用界面右侧，用于输出组件配置信息，组件配置信息包括目标组件涉及的参数。其中，可执行代码可以是前端框架的语法代码。可执行代码还可以是由前端框架执行生成的HTML代码。前端框架可以是React或Vue。React是一种用于构建用户界面(UI)的JavaScript库，可以在React里传递多种类型的参数件。Vue是一款用于构建用户界面的JavaScript框架，提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。

可选的，在所述浏览器的组件应用界面中，根据所述目标代码生成目标组件的低代码物料，可通过下述方式实施：

在所述浏览器中通过组件执行器执行所述目标代码，生成与所述目标组件对应的组件构造函数；

将所述组件构造函数注册至组件应用界面中的组件列表，并生成与所述目标组件对应的可操作控件以及组件配置信息；所述浏览器的组件应用界面包括组件区域；在所述组件区域中输出所述目标组件的可操作控件。

本实施方式中，在获取目标代码后，在组件应用界面调用执行器生成与目标代码对应的目标组件。在组件应用界面的组件区域中显示目标组件的可操作控件。在后台确定目标组件的组件配置信息，以便当用户将可操作控件拖拽到展示区域时，从后台读取已生成的目标组件，并在展示区域中输出目标组件。同时，从后台读取已确定的组件配置信息，并在配置区域中输出组件配置信息。

S140、在所述组件应用界面中接收用户对所述目标组件的编辑操作。

可选的，在所述组件应用界面中接收用户对所述目标组件的编辑操作，可通过下述方式实施：

所述组件应用界面还包括展示区域和配置区域；

响应于所述用户在所述组件区域对所述可操作控件的拖拽操作，根据所述目标组件的构造函数在所述展示区域渲染所述构造函数对应的组件样式，所述拖拽操作为将所述可操作控件从所述组件区域拖拽到所述展示区域；

在所述配置区域中输出所述目标组件的组件配置信息，接收所述用户对所述组件配置信息的配置操作。

如图3所示，组件应用界面能够为用户提供低代码编辑，用户通过拖拽等操作将目标组件的可操作控件拖拽到展示区域。响应于该拖拽操作，浏览器在展示区域渲染目标组件，在配置区域中显示目标组件的组件配置信息，用户根据业务需求对组件配置信息进行配置。组件配置信息包括一个或多个配置项，配置项的具体内容与目标组件的业务功能相关。

示例性的，如图3所示，目标组件的可操作控件包含目标组件的组件名称“custom-button”。用户将该可操作控件从组件区域拖拽到展示区域后，展示区域中显示目标组件。配置区域中显示有目标组件的组件配置信息。图3示例中，组件配置信息包括标题内容和图标使用图片。用户在配置区域中对目标组件使用的标题内容以及图标使用的图片进行配置。

进一步的，在浏览器的组件开发界面中获取所述用户输入的目标组件的源代码(S110的操作)之前，还包括：

响应于组件用户在所述浏览器的组件应用界面中触发的组件编辑事件，从所述浏览器的组件应用界面跳转至所述浏览器的组件开发界面。

图4是本发明实施例提供的高代码编辑前的组件应用界面的示意图。如图4所示，浏览器通过组件应用界面为用户提供低代码编辑。当用户需要创建新的目标组件时，可以在组件应用界面中点击“组件编辑器”等按钮，触发跳转至组件开发界面进行目标组件源代码编辑，即组件高代码编辑。通过组件开发界面对源代码进行编译得到目标代码，目标代码被导出。在组件应用界面中，根据导出的目标代码生成目标组件，组件应用界面为用户提供目标组件的低代码编辑。

通过页面跳转能够实现组件应用界面(低代码编辑)与组件开发界面(高代码编辑)之间的切换，实现由低代码编辑快速切换到高代码编辑，提高低代码物料的编辑效率。

进一步的，在获取编译后的目标代码之后，还包括：

将存储为第一数量个编译文件的目标代码，进行合并压缩，得到第二数量个压缩编译文件的目标代码，其中，第二数量小于第一数量。

通过Codesandbox工具可以得到编译后的目标代码，目标代码包含第一数量个文件。该第一数量个文件没有经过混淆压缩。为了方便管理和存储，将第一数量的编译文件通过合并压缩，生成第二数量个压缩编译文件，进而减少编译文件的数量以及数据量。可选的，将存储为第一数量个编译文件的目标代码压缩为一个压缩编译文件的目标代码。

可选的，使用esbuild工具作为打包器。使用esbuild工具将第一数量个编译文件合并为一个压缩编译文件。合并时esbuild工具采用混淆压缩方式，得到一个压缩编译文件。进行合并后，一个压缩编译文件对应一个目标组件。在目标组件加载过程中，通过一个压缩编译文件便可完成一个目标组件的加载，使得加载更加便捷。

其中，esbuild工具是一个JavaScript打包器，可以将多个js文件合并为一个js文件，并提供压缩混淆功能。默认情况下，esbuild工具需要下载到本地执行。此外，官方还提供了可以在浏览器内运行的版本，该版本可以作为本发明实施例使用的版本。

本发明实施例的技术方案，通过浏览器中的组件开发界面获取目标组件源代码，然后在浏览器中利用预设工具对源代码进行编译，得到目标代码。目标代码可以快速回传到组件应用界面中，在组件应用界面中根据目标代码生成目标组件。在此基础上，用户可以在组件应用界面中以低代码形式对目标组件进行编辑操作。相对于现有技术中在本地编码和编译打包，并需要排期部署，本发明实施例的技术方案，能够通过浏览器在组件开发界面中获取源代码，并通过浏览器支持的预设工具实现源代码的快速编译，得到目标代码。在得到目标代码后，在组件应用界面中运行目标代码，为用户提供目标组件的低代码编辑环境，实现目标组件的快速生成和编辑，提高低代码物料的编辑效率。

本发明实施例将开发编译打包流程从本地开发改进为在浏览器中开发。通过浏览器为用户提供在线的组件代码编辑和配置。本发明实施例中可以由开发人员在组件开发界面中进行高代码编辑，形成目标组件的源代码。通过集成开发工具导出目标代码。在组件应用界面中形成目标组件。组件应用界面显示目标组件后，用户只需要拖拽组件应用界面中目标组件的可操作控件，即可对目标组件的参数进行配置，实现目标组件的低代码编辑。由于集成开发工具提供了沙箱功能，开发人员在浏览器中构建组件时，可以通过沙箱功能实时查看组件预览效果，实现物料快速预览，提高组件验证速率。

图5是本发明实施例提供的一种组件编辑装置的结构示意图。如图5所示，该装置包括：源代码获取模块21、目标代码获取模块22、物料注册模块23、目标组件编辑模块24。

源代码获取模块21，用于在浏览器的组件开发界面中获取目标组件的源代码；

目标代码获取模块22，用于通过预设工具对所述源代码进行编译，获取编译后的目标代码；

目标组件生成模块23，用于在所述浏览器的组件应用界面中，根据所述目标代码生成目标组件；

目标组件编辑模块24，用于在所述组件应用界面中接收用户对所述目标组件的编辑操作。

在上述实施例的基础上，可选的，还包括跳转模块，用于：

响应于组件用户在所述浏览器的组件应用界面中触发的组件编辑事件，从所述浏览器的组件应用界面跳转至所述浏览器的组件开发界面。

在上述实施例的基础上，可选的，目标代码获取模块22用于：

在所述浏览器中通过预先导入的集成开发工具对所述源代码进行编译，得到目标代码；

通过预设数据传输接口从所述集成开发工具中导出所述目标代码。

在上述实施例的基础上，可选的，还包括工具导入模块，用于：

获取开源的集成开发项目；

对所述集成开发项目进行功能删减，得到集成开发工具；

在所述浏览器中导入所述集成开发工具。

在上述实施例的基础上，可选的，目标组件生成模块23用于：

在所述浏览器中通过组件执行器执行所述目标代码，生成与所述目标组件对应的组件构造函数；

将所述组件构造函数注册至组件应用界面中的组件列表，并生成与所述目标组件对应的可操作控件以及组件配置信息；

所述浏览器的组件应用界面包括组件区域；

在所述组件区域中输出所述目标组件的可操作控件。

在上述实施例的基础上，可选的，目标组件编辑模块24用于：

所述组件应用界面还包括展示区域和配置区域；

响应于所述用户在所述组件区域对所述可操作控件的拖拽操作，根据所述目标组件的构造函数在所述展示区域渲染所述构造函数对应的组件样式，所述拖拽操作为将所述可操作控件从所述组件区域拖拽到所述展示区域；

在所述配置区域中输出所述目标组件的组件配置信息，接收所述用户对所述配置信息的配置操作。

在上述实施例的基础上，可选的，还包括合并压缩模块，用于：

将存储为第一数量个编译文件的目标代码，进行合并压缩，得到第二数量个压缩编译文件的目标代码，其中，第二数量小于第一数量。

本发明实施例的技术方案，源代码获取模块21，用于在浏览器的组件开发界面中获取目标组件的源代码；目标代码获取模块22，用于通过预设工具对所述源代码进行编译，获取编译后的目标代码；目标组件生成模块23，用于在所述浏览器的组件应用界面中，根据所述目标代码生成目标组件；目标组件编辑模块24，用于在所述组件应用界面中接收用户对所述目标组件的编辑操作。相对于现有技术中在本地编码和编译打包，并需要排期部署，本发明实施例的技术方案，能够通过浏览器在组件开发界面中获取源代码，并通过浏览器支持的预设工具实现源代码的快速编译，得到目标代码。在得到目标代码后，在组件应用界面中运行目标代码，为用户提供目标组件的低代码编辑环境，实现目标组件的快速生成和编辑，提高低代码物料的编辑效率。

本发明实施例所提供的组件编辑装置可执行本发明任意实施例所提供的组件编辑方法，具备执行方法相应的功能模块和有益效果。

图6是本发明实施例提供的一种电子设备的结构示意图。电子设备10旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备(如头盔、眼镜、手表等)和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本发明的实现。

如图6所示，电子设备10包括至少一个处理器11，以及与至少一个处理器11通信连接的存储器，如只读存储器(ROM)12、随机访问存储器(RAM)13等，其中，存储器存储有可被至少一个处理器执行的计算机程序，处理器11可以根据存储在只读存储器(ROM)12中的计算机程序或者从存储单元18加载到随机访问存储器(RAM)13中的计算机程序，来执行各种适当的动作和处理。在RAM 13中，还可存储电子设备10操作所需的各种程序和数据。处理器11、ROM 12以及RAM 13通过总线14彼此相连。输入/输出(I/O)接口15也连接至总线14。

电子设备10中的多个部件连接至I/O接口15，包括：输入单元16，例如键盘、鼠标等；输出单元17，例如各种类型的显示器、扬声器等；存储单元18，例如磁盘、光盘等；以及通信单元19，例如网卡、调制解调器、无线通信收发机等。通信单元19允许电子设备10通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

处理器11可以是各种具有处理和计算能力的通用和/或专用处理组件。处理器11的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的处理器、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。处理器11执行上文所描述的各个方法和处理，例如组件编辑方法。

在一些实施例中，组件编辑方法可被实现为计算机程序，其被有形地包含于计算机可读存储介质，例如存储单元18。在一些实施例中，计算机程序的部分或者全部可以经由ROM 12和/或通信单元19而被载入和/或安装到电子设备10上。当计算机程序加载到RAM 13并由处理器11执行时，可以执行上文描述的组件编辑方法的一个或多个步骤。备选地，在其他实施例中，处理器11可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行组件编辑方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本发明的组件编辑方法的计算机程序可以采用一个或多个编程语言的任何组合来编写。这些计算机程序可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器，使得计算机程序当由处理器执行时使流程图和/或框图中所规定的功能/操作被实施。计算机程序可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

本发明实施例还提供了一种计算机可读存储介质，计算机可读存储介质存储有计算机指令，计算机指令用于使处理器执行一种组件编辑方法，该方法包括：

在浏览器的组件开发界面中获取目标组件的源代码；

在所述浏览器中通过预设工具对所述源代码进行编译，获取编译后的目标代码；

在所述浏览器的组件应用界面中，根据所述目标代码生成目标组件；

在所述组件应用界面中接收用户对所述目标组件的编辑操作。

在上述实施例的基础上，可选的，在浏览器的组件开发界面中获取目标组件的源代码之前，还包括：

响应于组件用户在所述浏览器的组件应用界面中触发的组件编辑事件，从所述浏览器的组件应用界面跳转至所述浏览器的组件开发界面。

在上述实施例的基础上，可选的，通过预设工具对所述源代码进行编译，获取编译后的目标代码，包括：

在所述浏览器中通过预先导入的集成开发工具对所述源代码进行编译，得到目标代码；

通过预设数据传输接口从所述集成开发工具中导出所述目标代码。

在上述实施例的基础上，可选的，在预先导入的集成开发工具中，对所述源代码进行编译之前，还包括：

获取开源的集成开发项目；

对所述集成开发项目进行功能删减，得到集成开发工具；

在所述浏览器中导入所述集成开发工具。

在上述实施例的基础上，可选的，在所述浏览器的组件应用界面中，根据所述目标代码生成目标组件，包括：

在所述浏览器中通过组件执行器执行所述目标代码，生成与所述目标组件对应的组件构造函数；

将所述组件构造函数注册至组件应用界面中的组件列表，并生成与所述目标组件对应的可操作控件以及组件配置信息；

所述浏览器的组件应用界面包括组件区域；

在所述组件区域中输出所述目标组件的可操作控件。

在上述实施例的基础上，可选的，在所述组件应用界面中接收用户对所述目标组件的编辑操作，包括：

所述组件应用界面还包括展示区域和配置区域；

响应于所述用户在所述组件区域对所述可操作控件的拖拽操作，根据所述目标组件的构造函数在所述展示区域渲染所述构造函数对应的组件样式，所述拖拽操作为将所述可操作控件从所述组件区域拖拽到所述展示区域；

在所述配置区域中输出所述目标组件的组件配置信息，接收所述用户对所述配置信息的配置操作。

在上述实施例的基础上，可选的，在获取编译后的目标代码之后，还包括：

将存储为第一数量个编译文件的目标代码，进行合并压缩，得到第二数量个压缩编译文件的目标代码，其中，第二数量小于第一数量。

在本发明的上下文中，计算机可读存储介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的计算机程序。计算机可读存储介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。备选地，计算机可读存储介质可以是机器可读信号介质。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在电子设备上实施此处描述的系统和技术，该电子设备具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给电子设备。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)、区块链网络和互联网。

计算系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，又称为云计算服务器或云主机，是云计算服务体系中的一项主机产品，以解决了传统物理主机与VPS服务中，存在的管理难度大，业务扩展性弱的缺陷。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发明中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本发明的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (10)

1.一种组件编辑方法，其特征在于，包括：

在浏览器的组件开发界面中获取目标组件的源代码；

在所述浏览器中通过预设工具对所述源代码进行编译，获取编译后的目标代码；

在所述浏览器的组件应用界面中，根据所述目标代码生成目标组件；

在所述组件应用界面中接收用户对所述目标组件的编辑操作。

2.根据权利要求1所述的方法，其特征在于，在浏览器的组件开发界面中获取目标组件的源代码之前，还包括：

响应于组件用户在所述浏览器的组件应用界面中触发的组件编辑事件，从所述浏览器的组件应用界面跳转至所述浏览器的组件开发界面。

3.根据权利要求1所述的方法，其特征在于，在所述浏览器中通过预设工具对所述源代码进行编译，获取编译后的目标代码，包括：

在所述浏览器中通过预先导入的集成开发工具对所述源代码进行编译，得到目标代码；

通过预设数据传输接口从所述集成开发工具中导出所述目标代码。

4.根据权利要求3所述的方法，其特征在于，在所述浏览器中通过预先导入的集成开发工具对所述源代码进行编译之前，还包括：

获取开源的集成开发项目；

对所述集成开发项目进行功能删减，得到集成开发工具；

在所述浏览器中导入所述集成开发工具。

5.根据权利要求1所述的方法，其特征在于，在所述浏览器的组件应用界面中，根据所述目标代码生成目标组件，包括：

在所述浏览器中通过组件执行器执行所述目标代码，生成与所述目标组件对应的组件构造函数；

将所述组件构造函数注册至组件应用界面中的组件列表，并生成与所述目标组件对应的可操作控件以及组件配置信息；

所述浏览器的组件应用界面包括组件区域；

在所述组件区域中输出所述目标组件的可操作控件。

6.根据权利要求5所述的方法，其特征在于，在所述组件应用界面中接收用户对所述目标组件的编辑操作，包括：

所述组件应用界面还包括展示区域和配置区域；

响应于所述用户在所述组件区域对所述可操作控件的拖拽操作，根据所述目标组件的构造函数在所述展示区域渲染所述构造函数对应的组件样式，所述拖拽操作为将所述可操作控件从所述组件区域拖拽到所述展示区域；

在所述配置区域中输出所述目标组件的组件配置信息，接收所述用户对所述配置信息的配置操作。

7.根据权利要求6所述的方法，其特征在于，在获取编译后的目标代码之后，还包括：

将存储为第一数量个编译文件的目标代码，进行合并压缩，得到第二数量个压缩编译文件的目标代码，其中，第二数量小于第一数量。

8.一种组件编辑装置，其特征在于，包括：

源代码获取模块，用于在浏览器的组件开发界面中获取目标组件的源代码；

目标代码获取模块，用于在所述浏览器中通过预设工具对所述源代码进行编译，获取编译后的目标代码；

目标组件生成模块，用于在所述浏览器的组件应用界面中，根据所述目标代码生成目标组件；

目标组件编辑模块，用于在所述组件应用界面中接收用户对所述目标组件的编辑操作。

9.一种电子设备，其特征在于，所述电子设备包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-7中任一项所述的组件编辑方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使处理器执行时实现权利要求1-7中任一项所述的组件编辑方法。