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

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

Info

Publication number
WO2023078053A1
WO2023078053A1 PCT/CN2022/125152 CN2022125152W WO2023078053A1 WO 2023078053 A1 WO2023078053 A1 WO 2023078053A1 CN 2022125152 W CN2022125152 W CN 2022125152W WO 2023078053 A1 WO2023078053 A1 WO 2023078053A1
Authority
WO
WIPO (PCT)
Prior art keywords
component
target
information
end framework
style
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.)
Ceased
Application number
PCT/CN2022/125152
Other languages
English (en)
French (fr)
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.)
Beijing ByteDance Network Technology Co Ltd
Original Assignee
Beijing ByteDance Network 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 Beijing ByteDance Network Technology Co Ltd filed Critical Beijing ByteDance Network Technology Co Ltd
Publication of WO2023078053A1 publication Critical patent/WO2023078053A1/zh
Anticipated expiration legal-status Critical
Ceased legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; 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 OR CALCULATING; 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 OR CALCULATING; 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

Definitions

  • the present disclosure relates to the field of computer technology, in particular, to a code generation method, device, computer equipment, storage medium, computer program product and program.
  • front-end frameworks are usually used for web design. There are many front-end frameworks that are widely used at present, such as Vue, React, etc.
  • Embodiments of the present disclosure at least provide a code generation method, device, computer equipment, storage medium, computer program product and program.
  • an embodiment of the present disclosure provides a code generation method, including:
  • the component configuration object corresponding to the web application to be connected to the target front-end framework;
  • the component configuration object includes a component style template and a component state template;
  • the target interface branch code that matches the identification information of the target front-end framework, and based on the pre-set for each interface branch code The first component status information and the target interface branch code are used to configure the component status template to obtain the second component status information adapted to the target front-end framework;
  • the component style information and the second component state information are integrated by compiling and building scripts to obtain component codes mapped to the target interface branch codes.
  • the component style template is configured using a pre-developed style compatible plug-in to obtain component style information adapted to the target front-end framework, including:
  • the style rule name and style rule value conversion is performed on the initial style information to obtain component style information matching the target front-end framework.
  • information configuration is performed on the component state template to obtain the The status information of the second component adapted by the front-end framework, including:
  • target component state information Using the target component state information, perform information configuration on the component state template to obtain second component state information adapted to the target front-end framework.
  • the The method after determining the target interface branch code that matches the identification information of the target front-end framework based on the pre-developed interface branch codes for each front-end framework and the identification information of the target front-end framework, the The method also includes:
  • information configuration is performed on the component state template to obtain second component state information adapted to the target front-end framework.
  • the method further includes:
  • obtaining the component configuration object corresponding to the web application to be connected to the target front-end framework includes:
  • the component style information and the second component state information are integrated by compiling and building scripts to obtain the component code mapped to the target interface branch code, including:
  • the component style information, the second component state information and the component view information are integrated by compiling and building the script to obtain the component code mapped with the target interface branch code.
  • an embodiment of the present disclosure further provides a code generation device, including:
  • An acquisition module configured to acquire a component configuration object corresponding to a web application to be connected to a target front-end framework;
  • the component configuration object includes a component style template and a component state template;
  • the first configuration module is configured to use a pre-developed style-compatible plug-in to configure information on the component style template to obtain component style information adapted to the target front-end framework;
  • the second configuration module is configured to determine the target interface branch code that matches the identification information of the target front-end framework based on the pre-developed interface branch codes for each front-end framework and the identification information of the target front-end framework, and based on each
  • the first component state information preset by an interface branch code and the target interface branch code are configured to configure the component state template to obtain the second component state information adapted to the target front-end framework;
  • An integration module configured to integrate the component style information and the second component state information by using a compilation and construction script to obtain component codes mapped to the target interface branch codes.
  • an embodiment of the present disclosure further provides a computer device, including: a processor, a memory, and a bus, the memory stores machine-readable instructions executable by the processor, and when the computer device is running, the processing The processor communicates with the memory through a bus, and when the machine-readable instructions are executed by the processor, the above-mentioned first aspect, or the steps in any possible implementation manner of the first aspect are executed.
  • a computer device including: a processor, a memory, and a bus
  • the memory stores machine-readable instructions executable by the processor, and when the computer device is running, the processing
  • the processor communicates with the memory through a bus, and when the machine-readable instructions are executed by the processor, the above-mentioned first aspect, or the steps in any possible implementation manner of the first aspect are executed.
  • embodiments of the present disclosure further provide a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the above-mentioned first aspect, or any of the first aspects of the first aspect, may be executed. Steps in one possible implementation.
  • the embodiments of the present disclosure further provide a computer program product, including a computer program, and when the computer program is executed by a processor, the steps in the above-mentioned first aspect or any possible implementation manner of the first aspect are executed.
  • the embodiments of the present disclosure further provide a computer program, which executes the steps in the above first aspect or any possible implementation manner of the first aspect when the computer program is run by a processor.
  • the pre-developed style-compatible plug-in can be compatible with the style rule conversion of each front-end framework
  • the component style template can be configured by using the pre-developed style-compatible plug-in, which can be adapted to the target front-end framework component style information; by integrating the interface branch codes for each front-end framework, using the pre-developed interface branch codes for each front-end framework and the identification information of the target front-end framework, the target that matches the identification information of the target front-end framework can be obtained
  • the interface branch code and then according to the first component state information preset for each interface branch code, the second component state information adapted to the target front-end framework can be obtained.
  • FIG. 1 shows a flowchart of a code generation method provided by an embodiment of the present disclosure
  • FIG. 2 shows a flow chart of another code generation method provided by an embodiment of the present disclosure
  • FIG. 3 shows a structural diagram of a code generation device provided by an embodiment of the present disclosure
  • Fig. 4 shows a schematic diagram of a computer device provided by an embodiment of the present disclosure.
  • front-end frameworks are usually used for web design. There are many front-end frameworks that are widely used at present, such as Vue, React, etc.
  • the pre-developed style-compatible plug-in can be compatible with the style rule conversion of each front-end framework
  • the component style template can be configured by using the pre-developed style-compatible plug-in to obtain the The component style information of the target front-end framework
  • the identification information of the target front-end framework can be obtained
  • the matching target interface branch code, and then according to the first component state information preset for each interface branch code, can obtain the second component state information adapted to the target front-end framework.
  • Plug-ins and interface branch codes can get component codes connected to any front-end framework.
  • Using highly compatible style-compatible plug-ins and pre-integrated interface branch codes can reduce code development costs and improve component code generation efficiency.
  • the execution subject of the code generation method provided in the embodiments of the present disclosure is generally a computer device with certain computing capabilities.
  • the developed scaffolding tool generates the software development kit (Software Development Kit, SDK) of the web application that can be connected to the front-end framework, that is, the component code.
  • SDK Software Development Kit
  • the method includes S101-S104, wherein:
  • S101 Obtain a component configuration object corresponding to a web application to be connected to a target front-end framework; the component configuration object includes a component style template and a component state template.
  • the target front-end framework can be written based on Javascript language, which can be used to extend the writing method of Javascript scripting language or Cascading Style Sheets (Cascading Style Sheets, CSS) or Hyper Text Markup Language (Hyper Text Markup Language, HTML), such as Vue, React, etc. .
  • This project template can be It is a fixed directory structure, which includes some configuration information with default values.
  • the project templates obtained here can include component style templates, component state templates, component view templates, and compilation and construction scripts.
  • the component style template may be a style file directory of the component, and the component style template may include pre-configured initial style information, where the initial style information may be in less language format.
  • the developer can edit the initial style information to obtain the initial style information of the custom configuration.
  • the initial style information in the component style template (pre-configured initial style information and/or custom-configured initial style information) can be converted to style rules through the style compatibility plug-in, and the CSS language format conforming to the style specifications of each front-end framework can be obtained style information for .
  • the component state template may be a logical file directory of the component, and a Javascript script may be preset in the component state template. Developers can use Javascript scripts to define state processing logic inside all components.
  • the component view template can be the view file directory of the component, and the view template files corresponding to each front-end framework can be preset in the component view template, for example, the React front-end framework corresponds to the .jsx file, the Vue front-end framework corresponds to the . standard/byte standard) for .wxml files.
  • the component view template can be used to define the hierarchical relationship of each component, mainly including the hierarchical relationship between components and subcomponents in the target front-end framework.
  • the compilation and construction script can be a preset compilation and construction script program, and the component code is constructed by integrating various information (component style information, component status information, etc.).
  • a pre-developed application program API interface library and a pre-developed style-compatible plug-in are also included.
  • the API interface library includes interface branch codes for each front-end framework.
  • the interface branch codes facing each front-end framework can respectively pass in the component status information for configuring and updating the component status information.
  • component status information corresponding to each front-end framework is passed into each interface branch code, that is, the first component status information mentioned later.
  • other interface branch codes other than the interface branch code corresponding to the target front-end framework can be deleted, and only the interface branch code corresponding to the target front-end framework is retained.
  • the interface branch code corresponding to the target front-end framework can transfer the first component status information to the native application program interface carried by the target front-end framework.
  • the style compatibility plug-in that is, the less plug-in, can be used to pre-configure the initial style information according to the type of the front-end framework, and perform style rule conversion on the pre-configured initial style information and/or the custom-configured initial style information, that is, the name of the style rule and style rule value conversion.
  • the input is the source file of the initial style information.
  • the input here can be in the less language format
  • the output is the component style information compatible with the front-end framework.
  • the output here can be in the css language format.
  • S102 Using a pre-developed style-compatible plug-in, perform information configuration on the component style template to obtain component style information adapted to the target front-end framework.
  • the initial style information obtained by customizing and/or pre-configuring the component style template can be obtained first; then use the pre-developed style compatible plug-in to convert the style rule name and style rule value for the initial style information , get the component style information matching the target front-end framework.
  • the less plug-in can first convert the initial style information from the less language format to the css language format.
  • the initial style information before compilation is:
  • style rule conversion on the initial style information, that is, style rule name and style rule value conversion, for example, the initial style information before compilation is:
  • S103 Based on the pre-developed interface branch codes for each front-end framework and the identification information of the target front-end framework, determine the target interface branch code that matches the identification information of the target front-end framework, and pre-determine based on each interface branch code
  • the set first component status information and the target interface branch code are configured to configure the component status template to obtain the second component status information adapted to the target front-end framework.
  • the interface branch codes for each front-end framework are integrated in the pre-developed API interface library, and each interface branch code corresponds to a front-end framework.
  • the state information of the first component of the corresponding front-end framework is also preset in each interface branch code.
  • the first component status information may refer to the processing logic information between each component, such as a time or a timer, which has its own value, and each value has a corresponding processing logic when it is changed.
  • the identification information of the target front-end framework such as the name
  • the identification information of the target front-end framework can be obtained, and then according to the identification information of the target front-end framework, the target interface branch code matching the identification information of the target front-end framework is searched from the API interface library.
  • the target interface branch code based on the first component state information of the front-end framework and the target interface branch code preset for each interface branch code, determine the target component state information corresponding to the target interface branch code, and then use the target component state information , perform information configuration on the component state template, and obtain the second component state information adapted to the target front-end framework.
  • state information of the target component that is passed into the branch code of the target interface can be passed into the native application program interface carried by the target front-end framework.
  • S104 Use the compilation and construction script to integrate the component style information and the second component state information to obtain component codes mapped to the target interface branch codes.
  • the target scaffolding command can be executed, and the above-mentioned component style information and the second component state information can be integrated by compiling and building scripts.
  • the component view information may be customized by the user in the component view template.
  • the set component view information may be different.
  • Component view information can refer to the hierarchical relationship between components and subcomponents, and the way of transferring information between upper and lower components.
  • the hierarchical relationship between components can affect the state processing information between components. Therefore, during implementation, component view information can be bound with component state information.
  • component style information corresponding to the target front-end framework the second component state information and the component view information, the component code mapped with the target interface branch code is generated.
  • the target interface branch code can also be called to run the component code and update the internal state parameters of the target component.
  • Project templates are configured with component style templates, component state templates, component view templates, and compile and build scripts.
  • Configuration information can be set by default on the component style template, component state template and component view template. It is also possible to obtain the user's ability to edit the layout component style information of the web reader in the component style template, edit the layout of the web reader in the component state template, cut chapters and turn pages, and other interactive logical state information, and in the component view template Describe the hierarchical relationship between components according to the language specification of each front-end framework.
  • the target interface branch code corresponding to the name of the target front-end framework can be determined, and then, use the first component state information passed in the target interface branch code to configure the component state template , to obtain the state information of the second component adapted to the target front-end framework.
  • the writing order of each step does not mean a strict execution order and constitutes any limitation on the implementation process.
  • the specific execution order of each step should be based on its function and possible
  • the inner logic is OK.
  • the embodiment of the present disclosure also provides a code generating device corresponding to the code generating method. Since the problem-solving principle of the device in the embodiment of the present disclosure is similar to the above-mentioned code generating method in the embodiment of the present disclosure, the implementation of the device Reference can be made to the implementation of the method, and repeated descriptions will not be repeated.
  • FIG. 3 it is a schematic structural diagram of a code generation device provided by an embodiment of the present disclosure.
  • the device includes: an acquisition module 301, a first configuration module 302, a second configuration module 303, and an integration module 304; wherein,
  • An acquisition module 301 configured to acquire a component configuration object corresponding to a web application to be accessed into a target front-end framework;
  • the component configuration object includes a component style template and a component state template;
  • the first configuration module 302 is configured to use a pre-developed style-compatible plug-in to configure information on the component style template to obtain component style information adapted to the target front-end framework;
  • the second configuration module 303 is configured to determine the target interface branch code that matches the identification information of the target front-end framework based on the pre-developed interface branch codes for each front-end framework and the identification information of the target front-end framework, and based on the identification information for the target front-end framework
  • the first component state information preset by each interface branch code and the target interface branch code are configured to configure the component state template to obtain the second component state information adapted to the target front-end framework;
  • the integration module 304 is configured to integrate the component style information and the second component state information by using a compilation and construction script to obtain component codes mapped to the target interface branch codes.
  • the first configuration module 302 is specifically used for:
  • the style rule name and style rule value conversion is performed on the initial style information to obtain component style information matching the target front-end framework.
  • the second configuration module 303 is specifically used for:
  • target component state information Using the target component state information, perform information configuration on the component state template to obtain second component state information adapted to the target front-end framework.
  • the device further includes:
  • a deletion module configured to delete interface branch codes other than the target interface branch codes from the pre-developed interface branch codes facing each front-end framework;
  • the second configuration module 303 is specifically used for:
  • information configuration is performed on the component state template to obtain second component state information adapted to the target front-end framework.
  • the device further includes:
  • the calling module is used to call the target interface branch code, run the component code, and update the internal state parameters of the target component.
  • the acquiring module 301 is specifically used for:
  • the integration module 304 is specifically used for:
  • the component style information, the second component state information and the component view information are integrated by compiling and building the script to obtain the component code mapped with the target interface branch code.
  • FIG. 4 it is a schematic structural diagram of a computer device 400 provided by an embodiment of the present disclosure, including a processor 401 , a memory 402 , and a bus 403 .
  • the memory 402 is used to store execution instructions, including a memory 4021 and an external memory 4022; the memory 4021 here is also called an internal memory, and is used to temporarily store calculation data in the processor 401 and exchange data with an external memory 4022 such as a hard disk.
  • the processor 401 exchanges data with the external memory 4022 through the memory 4021.
  • the processor 401 communicates with the memory 402 through the bus 403, so that the processor 401 executes the following instructions:
  • the component configuration object corresponding to the web application to be connected to the target front-end framework;
  • the component configuration object includes a component style template and a component state template;
  • the target interface branch code that matches the identification information of the target front-end framework, and based on the pre-set for each interface branch code The first component status information and the target interface branch code are used to configure the component status template to obtain the second component status information adapted to the target front-end framework;
  • the component style information and the second component state information are integrated by compiling and building scripts to obtain component codes mapped to the target interface branch codes.
  • Embodiments of the present disclosure further provide a computer-readable storage medium, on which a computer program is stored, and when the computer program is run by a processor, the steps of the code generation method described in the foregoing method embodiments are executed.
  • the storage medium may be a volatile or non-volatile computer-readable storage medium.
  • the embodiment of the present disclosure also provides a computer program product, the computer product is loaded with program code, and the instructions included in the program code can be used to execute the steps of the code generation method described in the above method embodiment, for details, please refer to the above method implementation example, which will not be repeated here.
  • the above-mentioned computer program product may be specifically realized by means of hardware, software or a combination thereof.
  • the computer program product is embodied as a computer storage medium, and in another optional embodiment, the computer program product is embodied as a software product, such as SDK and the like.
  • Embodiments of the present disclosure further provide a computer program, which executes the steps of the code generation method described in the foregoing method embodiments when the computer program is run by a processor.
  • the units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place, or may be distributed to multiple network units. Part or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.
  • each functional unit in each embodiment of the present disclosure may be integrated into one processing unit, each unit may exist separately physically, or two or more units may be integrated into one unit.
  • the functions are realized in the form of software function units and sold or used as independent products, they can be stored in a non-volatile computer-readable storage medium executable by a processor.
  • the technical solution of the present disclosure is essentially or the part that contributes to the prior art or the part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including Several instructions are used to make a computer device (which may be a personal computer, a server, or a network device, etc.) execute all or part of the steps of the methods described in various embodiments of the present disclosure.
  • the aforementioned storage media include: U disk, mobile hard disk, read-only memory (Read-Only Memory, ROM), random access memory (Random Access Memory, RAM), magnetic disk or optical disc and other media that can store program codes. .

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

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

Claims (12)

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

Applications Claiming Priority (2)

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

Publications (1)

Publication Number Publication Date
WO2023078053A1 true WO2023078053A1 (zh) 2023-05-11

Family

ID=79746099

Family Applications (1)

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

Country Status (2)

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

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116627391A (zh) * 2023-07-21 2023-08-22 上海秉匠信息科技有限公司 一种ui组件探测方法、装置、设备及存储介质
CN118034674A (zh) * 2024-01-03 2024-05-14 中国人寿保险股份有限公司 业务功能开发方法、装置、计算机设备和存储介质
CN119127149A (zh) * 2024-11-12 2024-12-13 之江实验室 设备后端的深度学习框架适配方法、装置以及设备

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113986248B (zh) * 2021-11-03 2023-05-16 抖音视界有限公司 一种代码生成方法、装置、计算机设备及存储介质
KR20240150838A (ko) * 2023-04-10 2024-10-17 쿠팡 주식회사 프론트엔드 프레임워크 제공 방법 및 그 시스템
CN116775022A (zh) * 2023-06-19 2023-09-19 北京全网数商科技股份有限公司 基于vue的前端应用组件开发方法

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20160357526A1 (en) * 2015-06-02 2016-12-08 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 车巴达（苏州）网络科技有限公司 网页开发方法、装置、终端、服务器和存储介质
CN113553035A (zh) * 2021-07-08 2021-10-26 北京计算机技术及应用研究所 一种通用的前端ui组件库的设计和构建方法
CN113986248A (zh) * 2021-11-03 2022-01-28 北京字节跳动网络技术有限公司 一种代码生成方法、装置、计算机设备及存储介质

Family Cites Families (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR100420473B1 (ko) * 2000-12-30 2004-03-02 학교법인 명지학원 관동대학교 개조 컴포넌트에 의한 바이너리 컴포넌트의 재정의 방법
CA2807494C (en) * 2010-08-05 2020-02-11 Thomson Reuters Enterprise Centre Gmbh Method and system for integrating web-based systems with local document processing applications
CN108495192B (zh) * 2018-03-13 2021-04-23 武汉斗鱼网络科技有限公司 页面编辑处理方法及装置
CN111381741A (zh) * 2020-03-05 2020-07-07 山东浪潮通软信息科技有限公司 工具栏插件化方法、装置及系统
CN112631563A (zh) * 2020-12-09 2021-04-09 北京飞讯数码科技有限公司 基于框架的系统开发方法、装置、计算机设备及存储介质
CN112631590B (zh) * 2020-12-31 2023-11-03 抖音视界有限公司 组件库生成方法、装置、电子设备和计算机可读介质
CN112948734A (zh) * 2021-02-25 2021-06-11 平安普惠企业管理有限公司 项目样式整合适配方法、装置、设备及存储介质
CN113031932B (zh) * 2021-03-11 2023-10-20 腾讯科技（深圳）有限公司 项目开发方法、装置、电子设备及存储介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20160357526A1 (en) * 2015-06-02 2016-12-08 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 车巴达（苏州）网络科技有限公司 网页开发方法、装置、终端、服务器和存储介质
CN113553035A (zh) * 2021-07-08 2021-10-26 北京计算机技术及应用研究所 一种通用的前端ui组件库的设计和构建方法
CN113986248A (zh) * 2021-11-03 2022-01-28 北京字节跳动网络技术有限公司 一种代码生成方法、装置、计算机设备及存储介质

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116627391A (zh) * 2023-07-21 2023-08-22 上海秉匠信息科技有限公司 一种ui组件探测方法、装置、设备及存储介质
CN116627391B (zh) * 2023-07-21 2023-10-27 上海秉匠信息科技有限公司 一种ui组件探测方法、装置、设备及存储介质
CN118034674A (zh) * 2024-01-03 2024-05-14 中国人寿保险股份有限公司 业务功能开发方法、装置、计算机设备和存储介质
CN119127149A (zh) * 2024-11-12 2024-12-13 之江实验室 设备后端的深度学习框架适配方法、装置以及设备

Also Published As

Publication number Publication date
CN113986248B (zh) 2023-05-16
CN113986248A (zh) 2022-01-28

Similar Documents

Publication Publication Date Title
WO2023078053A1 (zh) 一种代码生成方法、装置、计算机设备及存储介质
US10990367B2 (en) Application development method, tool, and device, and storage medium
US8375351B2 (en) Extensible rapid application development for disparate data sources
US8756407B2 (en) Configuration rule prototyping tool
US9880820B2 (en) Programming language with extensions using dynamic keywords
CN113076096B (zh) 一种桌面应用程序开发方法、装置、设备及存储介质
WO2019233293A1 (zh) 一种应用程序的开发方法和装置
CN114217789B (zh) 功能组件拓展方法、装置、设备、存储介质及程序产品
CN110895471A (zh) 安装包生成方法、装置、介质及电子设备
CN114461210A (zh) 基于vue组件化页面开发方法、装置、设备及存储介质
CN105144091B (zh) 针对基于程序的命令行的用户界面模型生成
CN114879978A (zh) 软件包依赖关系的处理方法、计算设备及可读存储介质
CN116185416A (zh) 算子的接口文件生成方法、装置、设备及存储介质
CN110262784A (zh) 一种云笔记实现方法及装置
CN117149162A (zh) 一种sdk自动生成方法、装置、电子设备及存储介质
CN116909569A (zh) deb软件包的制作方法、装置、设备及存储介质
JP7014960B2 (ja) 情報処理装置、サーバ、その処理方法及びプログラム
CN107239265A (zh) Java函数与C函数的绑定方法及装置
CN118626697B (zh) 多数据源可视化方法、装置、设备及存储介质
CN117519691B (zh) 应用程序处理方法、装置、计算机设备和存储介质
CN114398036A (zh) 前端web项目转换为vue项目的方法、装置、设备及介质
Kujala Development of a modern full stack web application
CN112988136B (zh) 一种用户界面编辑方法及装置
CN114816475A (zh) 一种嵌入式操作系统的更新方法、装置、设备和介质
WO2023128793A1 (ru) Система и способ динамической визуализации элементов программного обеспечения

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 22889078

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205A DATED 130824)

122 Ep: pct application non-entry in european phase

Ref document number: 22889078

Country of ref document: EP

Kind code of ref document: A1