CN113986248B - 一种代码生成方法、装置、计算机设备及存储介质 - Google Patents

一种代码生成方法、装置、计算机设备及存储介质 Download PDF

Info

Publication number
CN113986248B
CN113986248B CN202111293366.9A CN202111293366A CN113986248B CN 113986248 B CN113986248 B CN 113986248B CN 202111293366 A CN202111293366 A CN 202111293366A CN 113986248 B CN113986248 B CN 113986248B
Authority
CN
China
Prior art keywords
component
target
information
style
interface branch
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
Application number
CN202111293366.9A
Other languages
English (en)
Other versions
CN113986248A (zh
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.)
Douyin Vision Co Ltd
Original Assignee
Douyin Vision 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 Douyin Vision Co Ltd filed Critical Douyin Vision Co Ltd
Priority to CN202111293366.9A priority Critical patent/CN113986248B/zh
Publication of CN113986248A publication Critical patent/CN113986248A/zh
Priority to PCT/CN2022/125152 priority patent/WO2023078053A1/zh
Application granted granted Critical
Publication of CN113986248B publication Critical patent/CN113986248B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation
    • G06F8/44—Encoding
    • G06F8/447—Target code generation
    • 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/35—Creation or generation of source code model driven
    • 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/36—Software reuse
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

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

Abstract

本公开提供了一种代码生成方法、装置、计算机设备及存储介质，其中，该方法包括：获取待接入目标前端框架的网页应用对应的组件配置对象；利用预先开发的样式兼容插件，对组件样式模板进行信息配置，得到组件样式信息；基于预先开发的接口分支代码以及目标前端框架的标识信息，确定目标接口分支代码，并基于针对每个接口分支代码预先设置的第一组件状态信息以及目标接口分支代码，对组件状态模板进行信息配置，得到第二组件状态信息；利用编译构建脚本对组件样式信息和第二组件状态信息进行整合，得到组件代码。本公开实施例中使用较高兼容性的样式兼容插件以及预先集成的接口分支代码，可以减少代码的开发成本，从而提高代码生成效率。

Description

一种代码生成方法、装置、计算机设备及存储介质
技术领域
本公开涉及计算机技术领域，具体而言，涉及一种代码生成方法、装置、计算机设备及存储介质。
背景技术
在网页应用开发工程中，通常利用前端框架进行网页设计。目前被广泛使用的前端框架有很多种，例如Vue、React等。
不同前端框架之间在编程语言、配置、运行方式等方面是存在差异的，为了实现开发的组件(即软件开发工具包)能够接入到各个前端框架中，通常有两种解决方案：一种是通过开发代码转换工具实现组件在不同前端框架之间的代码转换，但是代码转换工具通常是定向转换的，因此不同前端框架之间需要开发多套代码转换工具；另一种是提升组件的兼容性，但是这种方式需要额外的开发成本才能实现组件与前端框架内的数据通信。上述两种解决方案的开发成本较高。
发明内容
本公开实施例至少提供一种代码生成方法、装置、计算机设备及存储介质。
第一方面，本公开实施例提供了一种代码生成方法，包括：
获取待接入目标前端框架的网页应用对应的组件配置对象；所述组件配置对象包括组件样式模板和组件状态模板；
利用预先开发的样式兼容插件，对所述组件样式模板进行信息配置，得到与所述目标前端框架适配的组件样式信息；
基于预先开发的面向各前端框架的接口分支代码以及所述目标前端框架的标识信息，确定与所述目标前端框架的标识信息匹配的目标接口分支代码，并基于针对每个接口分支代码预先设置的第一组件状态信息以及所述目标接口分支代码，对所述组件状态模板进行信息配置，得到与所述目标前端框架适配的第二组件状态信息；
利用编译构建脚本对所述组件样式信息和所述第二组件状态信息进行整合，得到与所述目标接口分支代码映射的组件代码。
一种可选的实施方式中，利用预先开发的样式兼容插件，对所述组件样式模板进行信息配置，得到与所述目标前端框架适配的组件样式信息，包括：
获取对所述样式组件模板进行自定义配置和/或预先配置得到的初始样式信息；
利用预先开发的样式兼容插件，对所述初始样式信息进行样式规则名称和样式规则取值转换，得到与所述目标前端框架匹配的组件样式信息。
一种可选的实施方式中，基于针对每个接口分支代码预先设置的前端框架的第一组件状态信息以及所述目标接口分支代码，对所述组件状态模板进行信息配置，得到与所述目标前端框架适配的第二组件状态信息，包括：
基于针对每个接口分支代码预先设置的前端框架的第一组件状态信息以及所述目标接口分支代码，确定所述目标接口分支代码对应的目标组件状态信息；
利用所述目标组件状态信息，对所述组件状态模板进行信息配置，得到与所述目标前端框架适配的第二组件状态信息。
一种可选的实施方式中，基于预先开发的面向各前端框架的接口分支代码以及所述目标前端框架的标识信息，确定与所述目标前端框架的标识信息匹配的目标接口分支代码之后，所述方法还包括：
从所述预先开发的面向各前端框架的接口分支代码中，删除除所述目标接口分支代码以外的其他接口分支代码；
基于针对每个接口分支代码预先设置的第一组件状态信息以及所述目标接口分支代码，对所述组件状态模板进行信息配置，得到与所述目标前端框架适配的第二组件状态信息，包括：
基于针对所述目标接口分支代码预先设置的第一组件状态信息以及所述目标接口分支代码，对所述组件状态模板进行信息配置，得到与所述目标前端框架适配的第二组件状态信息。
一种可选的实施方式中，在得到所述与所述目标应用程序接口映射的组件代码之后，所述方法还包括：
调用所述目标应用程序接口，运行所述组件代码，对所述目标组件的内部状态参数进行更新。
一种可选的实施方式中，获取待接入目标前端框架的网页应用对应的组件配置对象，包括：
利用项目脚手架创建与目标前端框架对应的项目模板；
获取所述项目模板中配置的待接入目标前端框架的网页应用对应的组件配置对象。
一种可选的实施方式中，利用编译构建脚本对所述组件样式信息和所述目标组件状态信息进行整合，得到与所述目标接口分支代码映射的组件代码，包括：
获取针对所述目标前端框架中的各个组件进行自定义配置得到的组件视图信息；
利用编译构建脚本对所述组件样式信息、所述第二组件状态信息以及所述组件视图信息进行整合，得到与所述目标接口分支代码映射的组件代码。
第二方面，本公开实施例还提供一种代码生成装置，包括：
获取模块，用于获取待接入目标前端框架的网页应用对应的组件配置对象；所述组件配置对象包括组件样式模板和组件状态模板；
第一配置模块，用于利用预先开发的样式兼容插件，对所述组件样式模板进行信息配置，得到与所述目标前端框架适配的组件样式信息；
第二配置模块，用于基于预先开发的面向各前端框架的接口分支代码以及所述目标前端框架的标识信息，确定与所述目标前端框架的标识信息匹配的目标接口分支代码，并基于针对每个接口分支代码预先设置的第一组件状态信息以及所述目标接口分支代码，对所述组件状态模板进行信息配置，得到与所述目标前端框架适配的第二组件状态信息；
整合模块，用于利用编译构建脚本对所述组件样式信息和所述第二组件状态信息进行整合，得到与所述目标应用程序接口映射的组件代码。
第三方面，本公开实施例还提供一种计算机设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当计算机设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。
第四方面，本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。
本公开实施例提供的代码生成方法，预先开发的样式兼容插件可以兼容对各个前端框架的样式规则转换，利用预先开发的样式兼容插件对组件样式模板进行信息配置，可以得到适配于目标前端框架的组件样式信息；通过将面向各个前端框架的接口分支代码集成起来，利用预先开发的面向各前端框架的接口分支代码以及目标前端框架的标识信息，可以得到与目标前端框架的标识信息匹配的目标接口分支代码，进而根据针对每个接口分支代码预先设置的第一组件状态信息，可以得到适配于目标前端框架的第二组件状态信息，因此，针对任何前端框架，利用上述样式兼容插件和接口分支代码，可以得到接入到任何前端框架的组件代码，使用较高兼容性的样式兼容插件以及预先集成的接口分支代码，可以减少代码的开发成本，从而提高组件代码的生成效率。
为使本公开的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
附图说明
为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，此处的附图被并入说明书中并构成本说明书中的一部分，这些附图示出了符合本公开的实施例，并与说明书一起用于说明本公开的技术方案。应当理解，以下附图仅示出了本公开的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1示出了本公开实施例所提供的一种代码生成方法的流程图；
图2示出了本公开实施例所提供的另一种代码生成方法的流程图；
图3示出了本公开实施例所提供的一种代码生成装置的结构图；
图4示出了本公开实施例所提供的一种计算机设备的示意图。
具体实施方式
为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。
在网页应用开发工程中，通常利用前端框架进行网页设计。目前被广泛使用的前端框架有很多种，例如Vue、React等。
不同前端框架之间在编程语言、配置、运行方式等方面是存在差异的，为了实现开发的组件(即软件开发工具包)能够接入到各个前端框架中，通常有两种解决方案：一种是通过开发代码转换工具实现组件在不同前端框架之间的代码转换，但是代码转换工具通常是定向转换的，因此不同前端框架之间需要开发多套代码转换工具；另一种是提升组件的兼容性，但是这种方式需要额外的开发成本才能实现组件与前端框架内的数据通信。上述两种解决方案的开发成本较高。
基于此，本公开实施例提供的代码生成方法，预先开发的样式兼容插件可以兼容对各个前端框架的样式规则转换，利用预先开发的样式兼容插件对组件样式模板进行信息配置，可以得到适配于目标前端框架的组件样式信息；通过将面向各个前端框架的接口分支代码集成起来，利用预先开发的面向各前端框架的接口分支代码以及目标前端框架的标识信息，可以得到与目标前端框架的标识信息匹配的目标接口分支代码，进而根据针对每个接口分支代码预先设置的第一组件状态信息，可以得到适配于目标前端框架的第二组件状态信息，因此，针对任何前端框架，利用上述样式兼容插件和接口分支代码，可以得到接入到任何前端框架的组件代码，使用较高兼容性的样式兼容插件以及预先集成的接口分支代码，可以减少代码的开发成本，从而提高组件代码的生成效率。
针对以上方案所存在的缺陷以及解决方案，均是发明人在经过实践并仔细研究后得出的结果，因此，上述问题的发现过程以及下文中本公开针对上述问题所提出的解决方案，都应该是发明人在本公开过程中对本公开做出的贡献。
应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
为便于对本实施例进行理解，首先对本公开实施例所公开的一种代码生成方法进行详细介绍，本公开实施例所提供的代码生成方法的执行主体一般为具有一定计算能力的计算机设备。
前端框架中封装了可以简化网页设计的功能，例如，对超文本标记语言的文档操作、各种控件(按钮、表单等)功能，通过前端框架可以开发出在本公开实施例中，是使用预先开发的脚手架工具生成可以接入到前端框架的网页应用的软件开发工具包(SDK)，即组件代码。
下面将具体介绍使用预先开发的项目脚手架工具生成代码的过程。
参见图1所示，为本公开实施例提供的代码生成方法的流程图，所述方法包括S101～S104，其中：
S101：获取待接入目标前端框架的网页应用对应的组件配置对象；所述组件配置对象包括组件样式模板和组件状态模板。
目标前端框架可以是基于Javascript语言编写的，可用于扩展Javascript脚本语言或层叠样式表(Cascading Style Sheets，CSS)或超文本标记语言(Hyper Text MarkupLanguage，HTML)的编写方式，例如Vue、React等。
这里，如图2所示，可以利用预先开发好的项目脚手架工具创建与目标前端框架对应的项目模板，具体地，可以利用项目脚手架工具从远端服务器获取一个项目模板到本地，这个项目模板可以是一个固定的目录结构，里面包括一些有默认值的配置信息，这里获取到的项目模板中可以包括组件样式模板、组件状态模板、组件视图模板和编译构建脚本。
其中，组件样式模板可以为组件的样式文件目录，组件样式模板中可以包括预先配置的初始样式信息，这里的初始样式信息可以是less语言格式的。开发人员可以对初始样式信息进行编辑，得到自定义配置的初始样式信息。组件样式模板中的初始样式信息(预先配置的初始样式信息和/或自定义配置的初始样式信息)可以经样式兼容插件进行样式规则转换，得到符合各个前端框架的样式规范的、css语言格式的的样式信息。
组件状态模板可以为组件的逻辑文件目录，组件状态模板中可以预先设置一个Javascript脚本。开发人员可以使用Javascript脚本定义所有组件内部的状态处理逻辑。
组件视图模板可以为组件的视图文件目录，组件视图模板中可以预先设置有各个前端框架对应的视图模板文件，例如，React前端框架对应.jsx文件，vue前端框架对应.vue文件，小程序(微信标准/字节标准)对应.wxml文件。组件视图模板可以用于定义各个组件的层级关系，主要包括目标前端框架中的组件、子组件之间的层级关系。
编译构建脚本可以为预设的编译构建脚本程序，通过对各类信息(组件样式信息、组件状态信息等)进行整合，构建组件代码。
在本公开实施例中，还包括预先开发的应用程序API接口库、预先开发的样式兼容插件。其中，API接口库中包括面向各前端框架的接口分支代码。
其中，在项目脚手架的开发阶段，面向各前端框架的接口分支代码中可以分别传入组件状态信息，用于进行组件状态信息的配置和更新。这里，各个接口分支代码中传入了对应各个前端框架的组件状态信息，即后文中提及的第一组件状态信息。在项目脚手架的编译阶段，可以根据输入的目标前端框架的标识信息(例如名称)，删除目标前端框架对应的接口分支代码以外的其他接口分支代码，仅保留目标前端框架对应的接口分支代码。在项目脚手架的执行阶段，也就是生成网页应用的组件代码阶段，目标前端框架对应的接口分支代码可以把第一组件状态信息传入到目标前端框架所携带的原生应用程序接口中。
样式兼容插件，即less插件，可以用于根据前端框架的类型，预先配置初始样式信息，以及对预先配置的初始样式信息和/或自定义配置的初始样式信息进行样式规则转换，即样式规则名称和样式规则取值转换。使用样式兼容插件时，输入为初始样式信息的源文件，这里的输入可以是less语言格式的，输出为针对前端框架做兼容适配的组件样式信息，这里的输出可以是css语言格式的。
S102：利用预先开发的样式兼容插件，对所述组件样式模板进行信息配置，得到与所述目标前端框架适配的组件样式信息。
在具体实施中，可以先获取对样式组件模板进行自定义配置和/或预先配置得到的初始样式信息；然后利用预先开发的样式兼容插件，对初始样式信息进行样式规则名称和样式规则取值转换，得到与目标前端框架匹配的组件样式信息。
在本公开实施例中，less插件可以先将初始样式信息由less语言格式转换成css语言格式，例如，编译前初始样式信息为：
Figure BDA0003335718190000091
编译后为：
.class-a.class-b{
   font:14px；
}
然后在对初始样式信息进行样式规则转换，即样式规则名称和样式规则取值转换，例如，编译前初始样式信息为：
Figure BDA0003335718190000101
编译后为：
.class-a.class-b{
   font-size:14rpx；
}
S103：基于预先开发的面向各前端框架的接口分支代码以及所述目标前端框架的标识信息，确定与所述目标前端框架的标识信息匹配的目标接口分支代码，并基于针对每个接口分支代码预先设置的第一组件状态信息以及所述目标接口分支代码，对所述组件状态模板进行信息配置，得到与所述目标前端框架适配的第二组件状态信息。
这里，在预先开发的API接口库中集成了面向各个前端框架的接口分支代码，每个接口分支代码对应一个前端框架。每个接口分支代码中还预先设置了对应的前端框架的第一组件状态信息。其中，第一组件状态信息可以指各个组件之间的处理逻辑信息，比如一个时间或者计时器，会有自己的数值，每个数值在更迭时会有对应的处理逻辑。
这里，可以获取目标前端框架的标识信息，比如名称，然后根据目标前端框架的标识信息，从API接口库中查找与目标前端框架的标识信息匹配的目标接口分支代码。
在该过程中，还可以将除目标接口分支代码以外的其他接口分支代码删除，仅保留目标接口分支代码。
在一种实施方式中，可以基于针对每个接口分支代码预先设置的前端框架的第一组件状态信息以及目标接口分支代码，确定目标接口分支代码对应的目标组件状态信息，然后利用目标组件状态信息，对组件状态模板进行信息配置，得到与目标前端框架适配的第二组件状态信息。
这里，可以将传入目标接口分支代码中的目标组件状态信息传入至目标前端框架所携带的原生应用程序接口中。
S104：利用编译构建脚本对所述组件样式信息和所述第二组件状态信息进行整合，得到与所述目标接口分支代码映射的组件代码。
这里，可以执行目标脚手架命令，利用编译构建脚本对上述组件样式信息和第二组件状态信息进行整合。
在一种实施方式中，还可以获取针对目标前端框架中的各个组件进行自定义配置得到的组件视图信息；然后利用编译构建脚本对组件样式信息、第二组件状态信息以及组件视图信息进行整合，得到与目标接口分支代码映射的组件代码。
这里，组件视图信息可以是用户在组件视图模板中自定义设置的。针对不同的前端框架，设置的组件视图信息可以是不同的。
组件视图信息可以指各个组件、子组件之间的层级关系，以及上下级组件之间传递信息的方式。组件之间的层级关系可以影响组件之间的状态处理信息。因此，在实施过程中，可以将组件视图信息与组件状态信息进行绑定。进而，根据目标前端框架对应的组件样式信息、第二组件状态信息以及组件视图信息，生成与目标接口分支代码映射的组件代码。
在得到与目标应用程序接口映射的组件代码之后，还可以调用目标应用程序接口，运行组件代码，对目标组件的内部状态参数进行更新。
下面以开发网页阅读器为例，介绍利用预先开发的脚手架工具生成接入到各个前端框架的网页阅读器的代码的过程。
首先，可以使用预先开发好的项目脚手架工具创建名称为reader-sdk的前端项目。
然后从远端服务器获取一个项目模板拉取到本地。项目模板中配置有组件样式模板、组件状态模板、组件视图模板和编译构建脚本。组件样式模板、组件状态模板和组件视图模板上可以默认设置有配置信息。也可以获取用户可以在组件样式模板中编辑网页阅读器的布局组件样式信息，在组件状态模板中编辑网页阅读器的排版、切章翻页等各类交互的逻辑状态信息，在组件视图模板中按照各个前端框架的语言规范描述组件之间的层级关系。
其中，在对组件样式模板进行信息配置的时候，可以获取用户在less插件提供的各个配置文件中添加自定义的组件样式信息，例如字体大小等。
在对组件状态模板进行信息配置的时候，还可以利用预先开发的面向各个前端框架的接口分支代码中传入的组件状态信息，对组件状态模板进行信息配置。
这里，可以基于获取的目标前端框架的名称，确定与目标前端框架的名称对应的目标接口分支代码，然后，利用目标接口分支代码中传入的第一组件状态信息，对组件状态模板进行信息配置，得到与目标前端框架适配的第二组件状态信息。
最后，可以执行项目脚手架命令，利用编译构建脚本对组件样式信息、组件状态信息、组件视图信息进行整合，得到与目标接口分支代码映射的组件代码，也就是SDK。
本领域技术人员可以理解，在具体实施方式的上述方法中，各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定，各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。
基于同一发明构思，本公开实施例中还提供了与代码生成方法对应的代码生成装置，由于本公开实施例中的装置解决问题的原理与本公开实施例上述代码生成方法相似，因此装置的实施可以参见方法的实施，重复之处不再赘述。
参照图3所示，为本公开实施例提供的一种代码生成装置的架构示意图，所述装置包括：获取模块301、第一配置模块302、第二配置模块303、整合模块304；其中，
获取模块301，用于获取待接入目标前端框架的网页应用对应的组件配置对象；所述组件配置对象包括组件样式模板和组件状态模板；
第一配置模块302，用于利用预先开发的样式兼容插件，对所述组件样式模板进行信息配置，得到与所述目标前端框架适配的组件样式信息；
第二配置模块303，用于基于预先开发的面向各前端框架的接口分支代码以及所述目标前端框架的标识信息，确定与所述目标前端框架的标识信息匹配的目标接口分支代码，并基于针对每个接口分支代码预先设置的第一组件状态信息以及所述目标接口分支代码，对所述组件状态模板进行信息配置，得到与所述目标前端框架适配的第二组件状态信息；
整合模块304，用于利用编译构建脚本对所述组件样式信息和所述第二组件状态信息进行整合，得到与所述目标应用程序接口映射的组件代码。
一种可选的实施方式中，第一配置模块302，具体用于：
获取对所述样式组件模板进行自定义配置和/或预先配置得到的初始样式信息；
利用预先开发的样式兼容插件，对所述初始样式信息进行样式规则名称和样式规则取值转换，得到与所述目标前端框架匹配的组件样式信息。
一种可选的实施方式中，第二配置模块303，具体用于：
基于针对每个接口分支代码预先设置的前端框架的第一组件状态信息以及所述目标接口分支代码，确定所述目标接口分支代码对应的目标组件状态信息；
利用所述目标组件状态信息，对所述组件状态模板进行信息配置，得到与所述目标前端框架适配的第二组件状态信息。
一种可选的实施方式中，所述装置还包括：
删除模块，用于从所述预先开发的面向各前端框架的接口分支代码中，删除除所述目标接口分支代码以外的其他接口分支代码；
第二配置模块303，具体用于：
基于针对所述目标接口分支代码预先设置的第一组件状态信息以及所述目标接口分支代码，对所述组件状态模板进行信息配置，得到与所述目标前端框架适配的第二组件状态信息。
一种可选的实施方式中，所述装置还包括：
调用模块，用于调用所述目标应用程序接口，运行所述组件代码，对所述目标组件的内部状态参数进行更新。
一种可选的实施方式中，获取模块301，具体用于：
利用项目脚手架创建与目标前端框架对应的项目模板；
获取所述项目模板中配置的待接入目标前端框架的网页应用对应的组件配置对象。
一种可选的实施方式中，整合模块304，具体用于：
获取针对所述目标前端框架中的各个组件进行自定义配置得到的组件视图信息；
利用编译构建脚本对所述组件样式信息、所述第二组件状态信息以及所述组件视图信息进行整合，得到与所述目标接口分支代码映射的组件代码。
关于装置中的各模块的处理流程、以及各模块之间的交互流程的描述可以参照上述方法实施例中的相关说明，这里不再详述。
基于同一技术构思，本公开实施例还提供了一种计算机设备。参照图4所示，为本公开实施例提供的计算机设备400的结构示意图，包括处理器401、存储器402、和总线403。其中，存储器402用于存储执行指令，包括内存4021和外部存储器4022；这里的内存4021也称内存储器，用于暂时存放处理器401中的运算数据，以及与硬盘等外部存储器4022交换的数据，处理器401通过内存4021与外部存储器4022进行数据交换，当计算机设备400运行时，处理器401与存储器402之间通过总线403通信，使得处理器401在执行以下指令：
获取待接入目标前端框架的网页应用对应的组件配置对象；所述组件配置对象包括组件样式模板和组件状态模板；
利用预先开发的样式兼容插件，对所述组件样式模板进行信息配置，得到与所述目标前端框架适配的组件样式信息；
基于预先开发的面向各前端框架的接口分支代码以及所述目标前端框架的标识信息，确定与所述目标前端框架的标识信息匹配的目标接口分支代码，并基于针对每个接口分支代码预先设置的第一组件状态信息以及所述目标接口分支代码，对所述组件状态模板进行信息配置，得到与所述目标前端框架适配的第二组件状态信息；
利用编译构建脚本对所述组件样式信息和所述第二组件状态信息进行整合，得到与所述目标接口分支代码映射的组件代码。
本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法实施例中所述的代码生成方法的步骤。其中，该存储介质可以是易失性或非易失的计算机可读取存储介质。
本公开实施例还提供一种计算机程序产品，该计算机产品承载有程序代码，所述程序代码包括的指令可用于执行上述方法实施例中所述的代码生成方法的步骤，具体可参见上述方法实施例，在此不再赘述。
其中，上述计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中，所述计算机程序产品具体体现为计算机存储介质，在另一个可选实施例中，计算机程序产品具体体现为软件产品，例如软件开发包(Software Development Kit，SDK)等等。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在本公开所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-OnlyMemory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
最后应说明的是：以上所述实施例，仅为本公开的具体实施方式，用以说明本公开的技术方案，而非对其限制，本公开的保护范围并不局限于此，尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应以所述权利要求的保护范围为准。

Claims (9)

1.一种代码生成方法，其特征在于，包括：
获取待接入目标前端框架的网页应用对应的组件配置对象；所述组件配置对象包括组件样式模板和组件状态模板；
获取对所述组件样式模板进行自定义配置和/或预先配置得到的初始样式信息；
利用预先开发的样式兼容插件，对所述初始样式信息进行样式规则名称和样式规则取值转换，得到与所述目标前端框架匹配的组件样式信息；
基于预先开发的面向各前端框架的接口分支代码以及所述目标前端框架的标识信息，确定与所述目标前端框架的标识信息匹配的目标接口分支代码，并基于针对每个接口分支代码预先设置的第一组件状态信息以及所述目标接口分支代码，对所述组件状态模板进行信息配置，得到与所述目标前端框架适配的第二组件状态信息；
利用编译构建脚本对所述组件样式信息和所述第二组件状态信息进行整合，得到与所述目标接口分支代码映射的组件代码。
2.根据权利要求1所述的方法，其特征在于，基于针对每个接口分支代码预先设置的前端框架的第一组件状态信息以及所述目标接口分支代码，对所述组件状态模板进行信息配置，得到与所述目标前端框架适配的第二组件状态信息，包括：
基于针对每个接口分支代码预先设置的前端框架的第一组件状态信息以及所述目标接口分支代码，确定所述目标接口分支代码对应的目标组件状态信息；
利用所述目标组件状态信息，对所述组件状态模板进行信息配置，得到与所述目标前端框架适配的第二组件状态信息。
3.根据权利要求1所述的方法，其特征在于，基于预先开发的面向各前端框架的接口分支代码以及所述目标前端框架的标识信息，确定与所述目标前端框架的标识信息匹配的目标接口分支代码之后，所述方法还包括：
从所述预先开发的面向各前端框架的接口分支代码中，删除除所述目标接口分支代码以外的其他接口分支代码；
基于针对每个接口分支代码预先设置的第一组件状态信息以及所述目标接口分支代码，对所述组件状态模板进行信息配置，得到与所述目标前端框架适配的第二组件状态信息，包括：
基于针对所述目标接口分支代码预先设置的第一组件状态信息以及所述目标接口分支代码，对所述组件状态模板进行信息配置，得到与所述目标前端框架适配的第二组件状态信息。
4.根据权利要求1所述的方法，其特征在于，在得到所述与所述目标接口分支代码映射的组件代码之后，所述方法还包括：
调用所述目标接口，运行所述组件代码，对所述目标接口分支代码对应的目标组件的内部状态参数进行更新。
5.根据权利要求1所述的方法，其特征在于，获取待接入目标前端框架的网页应用对应的组件配置对象，包括：
利用项目脚手架创建与目标前端框架对应的项目模板；
获取所述项目模板中配置的待接入目标前端框架的网页应用对应的组件配置对象。
6.根据权利要求1所述的方法，其特征在于，利用编译构建脚本对所述组件样式信息和所述第二组件状态信息进行整合，得到与所述目标接口分支代码映射的组件代码，包括：
获取针对所述目标前端框架中的各个组件进行自定义配置得到的组件视图信息；
利用编译构建脚本对所述组件样式信息、所述第二组件状态信息以及所述组件视图信息进行整合，得到与所述目标接口分支代码映射的组件代码。
7.一种代码生成装置，其特征在于，包括：
获取模块，用于获取待接入目标前端框架的网页应用对应的组件配置对象；所述组件配置对象包括组件样式模板和组件状态模板；
第一配置模块，用于获取对所述组件样式模板进行自定义配置和/或预先配置得到的初始样式信息；利用预先开发的样式兼容插件，对所述初始样式信息进行样式规则名称和样式规则取值转换，得到与所述目标前端框架匹配的组件样式信息；
第二配置模块，用于基于预先开发的面向各前端框架的接口分支代码以及所述目标前端框架的标识信息，确定与所述目标前端框架的标识信息匹配的目标接口分支代码，并基于针对每个接口分支代码预先设置的第一组件状态信息以及所述目标接口分支代码，对所述组件状态模板进行信息配置，得到与所述目标前端框架适配的第二组件状态信息；
整合模块，用于利用编译构建脚本对所述组件样式信息和所述第二组件状态信息进行整合，得到与所述目标接口分支代码映射的组件代码。
8.一种计算机设备，其特征在于，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当计算机设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行如权利要求1至6任一项所述的代码生成方法的步骤。
9.一种计算机可读存储介质，其特征在于，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如权利要求1至6任一项所述的代码生成方法的步骤。
CN202111293366.9A 2021-11-03 2021-11-03 一种代码生成方法、装置、计算机设备及存储介质 Active CN113986248B (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN202111293366.9A CN113986248B (zh) 2021-11-03 2021-11-03 一种代码生成方法、装置、计算机设备及存储介质
PCT/CN2022/125152 WO2023078053A1 (zh) 2021-11-03 2022-10-13 一种代码生成方法、装置、计算机设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111293366.9A CN113986248B (zh) 2021-11-03 2021-11-03 一种代码生成方法、装置、计算机设备及存储介质

Publications (2)

Publication Number Publication Date
CN113986248A CN113986248A (zh) 2022-01-28
CN113986248B true CN113986248B (zh) 2023-05-16

Family

ID=79746099

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111293366.9A Active CN113986248B (zh) 2021-11-03 2021-11-03 一种代码生成方法、装置、计算机设备及存储介质

Country Status (2)

Country Link
CN (1) CN113986248B (zh)
WO (1) WO2023078053A1 (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113986248B (zh) * 2021-11-03 2023-05-16 抖音视界有限公司 一种代码生成方法、装置、计算机设备及存储介质
CN116627391B (zh) * 2023-07-21 2023-10-27 上海秉匠信息科技有限公司 一种ui组件探测方法、装置、设备及存储介质

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2012033511A1 (en) * 2010-08-05 2012-03-15 Thomson Reuters Global Resources Method and system for integrating web-based systems with local document processing applications
CN108495192A (zh) * 2018-03-13 2018-09-04 武汉斗鱼网络科技有限公司 页面编辑处理方法及装置
CN111381741A (zh) * 2020-03-05 2020-07-07 山东浪潮通软信息科技有限公司 工具栏插件化方法、装置及系统
CN112631563A (zh) * 2020-12-09 2021-04-09 北京飞讯数码科技有限公司 基于框架的系统开发方法、装置、计算机设备及存储介质
CN112631590A (zh) * 2020-12-31 2021-04-09 北京字节跳动网络技术有限公司 组件库生成方法、装置、电子设备和计算机可读介质
CN112948734A (zh) * 2021-02-25 2021-06-11 平安普惠企业管理有限公司 项目样式整合适配方法、装置、设备及存储介质
CN113031932A (zh) * 2021-03-11 2021-06-25 腾讯科技（深圳）有限公司 项目开发方法、装置、电子设备及存储介质
CN113553035A (zh) * 2021-07-08 2021-10-26 北京计算机技术及应用研究所 一种通用的前端ui组件库的设计和构建方法

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR100420473B1 (ko) * 2000-12-30 2004-03-02 학교법인 명지학원 관동대학교 개조 컴포넌트에 의한 바이너리 컴포넌트의 재정의 방법
US9547482B2 (en) * 2015-06-02 2017-01-17 Sap Portals Israel Ltd. Declarative design-time experience platform for code generation
CN110647320A (zh) * 2019-08-14 2020-01-03 平安普惠企业管理有限公司 项目框架的构建方法、装置、计算机设备和存储介质
CN112596714A (zh) * 2020-12-10 2021-04-02 车巴达（苏州）网络科技有限公司 网页开发方法、装置、终端、服务器和存储介质
CN113986248B (zh) * 2021-11-03 2023-05-16 抖音视界有限公司 一种代码生成方法、装置、计算机设备及存储介质

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2012033511A1 (en) * 2010-08-05 2012-03-15 Thomson Reuters Global Resources Method and system for integrating web-based systems with local document processing applications
CN108495192A (zh) * 2018-03-13 2018-09-04 武汉斗鱼网络科技有限公司 页面编辑处理方法及装置
CN111381741A (zh) * 2020-03-05 2020-07-07 山东浪潮通软信息科技有限公司 工具栏插件化方法、装置及系统
CN112631563A (zh) * 2020-12-09 2021-04-09 北京飞讯数码科技有限公司 基于框架的系统开发方法、装置、计算机设备及存储介质
CN112631590A (zh) * 2020-12-31 2021-04-09 北京字节跳动网络技术有限公司 组件库生成方法、装置、电子设备和计算机可读介质
CN112948734A (zh) * 2021-02-25 2021-06-11 平安普惠企业管理有限公司 项目样式整合适配方法、装置、设备及存储介质
CN113031932A (zh) * 2021-03-11 2021-06-25 腾讯科技（深圳）有限公司 项目开发方法、装置、电子设备及存储介质
CN113553035A (zh) * 2021-07-08 2021-10-26 北京计算机技术及应用研究所 一种通用的前端ui组件库的设计和构建方法

Non-Patent Citations (4)

* Cited by examiner, † Cited by third party
Title
A distributed modular platform for the development of cloud based applications;G. Fylaktopoulos等;Future Generation Computer Systems;第78卷;第127-141页 *
Bootstrap在前端开发中的优势;高榕岭;计算机光盘软件与应用(第01期);第74,76页 *
基于MVVM模式的前端框架插件库设计与实现;校丽丽;中国优秀硕士学位论文全文数据库 信息科技辑(第1期);I138-371 *
针对百度品牌专区业务的前端框架的设计与实现;许珊;中国优秀硕士学位论文全文数据库 信息科技辑(第2期);I138-902 *

Also Published As

Publication number Publication date
WO2023078053A1 (zh) 2023-05-11
CN113986248A (zh) 2022-01-28

Similar Documents

Publication Publication Date Title
CN113986248B (zh) 一种代码生成方法、装置、计算机设备及存储介质
CN112015396B (zh) 基于dsl的智能合约代码生成方法、装置、设备及存储介质
CN111683066B (zh) 异构系统集成方法、装置、计算机设备和存储介质
US20170300305A1 (en) Executable guidance experiences based on implicitly generated guidance models
CN111158687B (zh) Java插件的界面生成方法、装置、计算机设备和存储介质
CN109766085B (zh) 一种处理枚举类型代码的方法及装置
CN112131837A (zh) 业务报告配置方法、装置、计算机设备和存储介质
CN114139502A (zh) 文档内容处理方法、装置、设备及存储介质
CN111309332A (zh) 文件内容按需加载方法、装置及电子设备、存储介质
WO2024066825A1 (zh) 页面项目开发方法、装置、设备、介质及产品
CN112861059A (zh) 可视化组件生成方法、装置、计算机设备及可读存储介质
CN117111909A (zh) 代码自动化生成方法、系统、计算机设备及存储介质
Pons et al. Design structure matrix generation from open-source mbse tools
CN110532526A (zh) 数据转化方法、电子装置及计算机可读存储介质
CN112527320B (zh) 一种基于浏览器部署应用系统的方法、装置及存储介质
CN103713864B (zh) 帐票输出装置和帐票输出方法
Gonçalves et al. From software extensions to product lines of dataflow programs
CN114391151A (zh) 增强自然语言生成平台
JP6700559B2 (ja) 情報処理装置と、その処理方法及びプログラム
CN105912338A (zh) 面向用户操作流程的软件设计方法
Prasanthan et al. Low Code Backend As A Service Platform
CN112988136A (zh) 一种用户界面编辑方法及装置
CN116594600A (zh) 数据组合自动生成科技文献方法、装置、存储介质及设备
CN117806630A (zh) 基于模型文件和可视化界面的应用程序构建方法、装置、设备及存储介质
CN112416351A (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
CB02 Change of applicant information
CB02 Change of applicant information

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.

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.

GR01 Patent grant
GR01 Patent grant