Code compiling method and device, equipment, medium and program product

Abstract

The invention provides a code compiling method and device, equipment, a storage medium and a program product. The method comprises the following steps: in response to a compiling instruction for a source code file of a page of an application program component, analyzing the source code file to obtain a content file, a script file and a style file of the page; in the style file, determining a grammar sugar of an element variable of a page element in the script file, and linking the style file to the element variable of the script file through the grammar sugar; generating a style variable of the element variable, and replacing the syntax sugar with the style variable to obtain a new style file; a definition object of the element variable is obtained, the definition object is inserted into the content file to obtain a new content file, and the definition object instructs to control the style variable based on the element variable; compiling to obtain an executable file based on the new content file, the script file and the new style file; by means of the method and device, the code development and maintenance efficiency can be improved while the dynamic style effect is achieved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a code compilation method, device, equipment, storage medium and program product. Background Art

[0002] In the related art, when implementing dynamic styles (Cascading Style Sheets, CSS), the written implementation code contains duplicate code with the business code. The duplicate code will cause the executable file size of the page to be too large, resulting in high development and maintenance costs, and reducing the efficiency of development and maintenance. Summary of the invention

[0003] The embodiments of the present application provide a code compilation method, device, electronic device, computer-readable storage medium and computer program product, which can reduce the cost of code development and maintenance, improve the efficiency of code development and maintenance, and code compilation efficiency while achieving dynamic style effects.

[0004] The technical solution of the embodiment of the present application is implemented as follows:

[0005] The present application provides a code compilation method, including:

[0006] In response to a compile instruction of a source code file of a page of an application component, the source code file is parsed to obtain a content file, a script file and a style file of the page;

[0007] In the style file, determining syntax sugar of element variables of page elements in the script file, wherein the style file is linked to the element variables of the script file through the syntax sugar;

[0008] Generate a style variable of the element variable, and use the style variable to replace the syntax sugar to obtain a new style file;

[0009] Obtaining a definition object of the element variable, and inserting the definition object into the content file to obtain a new content file, wherein the definition object indicates controlling the style variable based on the element variable;

[0010] An executable file is compiled based on the new content file, the script file and the new style file; wherein, during the running of the executable file, when the element variable in the script file changes, the style variable is changed based on the changed element variable through the definition object, so as to change the element style of the page element through the changed style variable.

[0011] The present application also provides a code compilation device, including:

[0012] A parsing module, for parsing the source code file in response to a compile instruction of the source code file of the page of the application component to obtain the content file, script file and style file of the page;

[0013] A determination module, configured to determine, in the style file, syntax sugar of an element variable of a page element in the script file, wherein the style file is linked to the element variable of the script file through the syntax sugar;

[0014] A replacement module, used for generating a style variable of the element variable, and replacing the syntax sugar with the style variable to obtain a new style file;

[0015] An inserting module, used for acquiring a definition object of the element variable, and inserting the definition object into the content file to obtain a new content file, wherein the definition object indicates controlling the style variable based on the element variable;

[0016] A compilation module is used to compile an executable file based on the new content file, the script file and the new style file; wherein, during the running of the executable file, when the element variable in the script file changes, the style variable is changed based on the changed element variable through the definition object, so as to change the element style of the page element through the changed style variable.

[0017] In the above scheme, the determination module is also used to construct a regular expression corresponding to the syntactic sugar of the element variable; search for target characters that conform to the regular expression in the code characters included in the style file; and use the found target characters as the syntactic sugar of the element variable of the page element in the script file.

[0018] In the above scheme, the replacement module is also used to obtain target characters and perform hash processing on the target characters to obtain a random character string; obtain definition rules for defining style variables, and generate style variables of the element variables based on the random character string and according to the definition rules.

[0019] In the above scheme, the insertion module is also used to obtain the definition rules of the definition object, and obtain the control strategy for controlling the style variables based on the element variables, and the random character string used to generate the style variables; based on the control strategy and the random character string, the definition object of the element variable is generated according to the definition rules.

[0020] In the above scheme, the insertion module is also used to determine the operating environment of the application component; when the operating environment of the application component is a web page, the control strategy is determined to be an adaptive control strategy based on relative length units.

[0021] In the above scheme, the insertion module is also used to determine the operating environment of the application component; when the operating environment of the application component is the mini-program end, the control strategy is determined to be an adaptive control strategy based on the screen width.

[0022] In the above scheme, the insertion module is also used to obtain the string positions defined in the definition rules for the control strategy and the random string respectively; fill the control strategy string and the random string into the corresponding string positions respectively to obtain the definition object of the element variable.

[0023] In the above scheme, the insertion module is also used to perform syntax parsing on the content file to obtain a syntax tree of the content file; insert the definition object into the root node of the syntax tree to obtain a new syntax tree; and convert the new syntax tree into the new content file.

[0024] In the above scheme, the compilation module is also used to perform syntax parsing on the new content file to obtain an abstract syntax tree of the new content file, and convert the abstract syntax tree into a rendering function; and to package the rendering function, the script file and the new style file to obtain the executable file.

[0025] In the above scheme, when the new content file includes new content files of multiple front-ends, the compilation module is also used to compile the executable files corresponding to the corresponding front-ends based on the new content files, the script files and the new style files of each front-end through a cross-end development framework; wherein the multiple front-ends include at least a mini-program end and a web page end.

[0026] The present application also provides an electronic device, including:

[0027] A memory for storing computer executable instructions;

[0028] The processor is used to implement the code compilation method provided in the embodiment of the present application when executing the computer executable instructions stored in the memory.

[0029] The embodiment of the present application also provides a computer-readable storage medium storing computer-executable instructions or a computer program. When the computer-executable instructions or the computer program are executed by a processor, the code compilation method provided in the embodiment of the present application is implemented.

[0030] The embodiment of the present application also provides a computer program product, including computer executable instructions or a computer program, which, when executed by a processor, implements the code compilation method provided in the embodiment of the present application.

[0031] The embodiments of the present application have the following beneficial effects:

[0032] Applying the above-mentioned embodiment of the present application, when a compilation instruction of a source code file for a page of an application component is received, the source code file is parsed to obtain the content file, script file and style file of the page; then, in the style file, the syntactic sugar of the element variable of the page element in the script file is determined, thereby generating the style variable of the element variable, and the syntactic sugar is replaced by the style variable to obtain a new style file; then, the definition object of the element variable is obtained, and the definition object is inserted into the content file to obtain a new content file; finally, based on the new content file, the script file and the new style file, an executable file is compiled.

[0033] Here, the style file is linked to the element variables of the script file through syntax sugar. When the syntax sugar is replaced by the style variables, the style variables of the style file and the element variables of the script file are also linked. In this way, when the element variables of the page elements in the script file change, through the control of the defined object, the style variables of the page elements in the style file will also change with the changes of the element variables, thereby achieving the effect that the page style can be dynamically updated with the changes of the element variables in the script file (i.e. dynamic CSS); and syntax sugar can reduce the complexity and repetition of the code that implements the same function and increase the readability of the code. In this way, it will enable developers to write code more conveniently and quickly, thereby reducing the cost of code development and maintenance, improving the efficiency of code development and maintenance, and also improving the efficiency of code compilation. BRIEF DESCRIPTION OF THE DRAWINGS

[0034] Figure 1 1 is a schematic diagram of the architecture of a code compilation system 100 provided in an embodiment of the present application;

[0035] Figure 2 is a structural diagram of an electronic device 500 for implementing a code compilation method provided in an embodiment of the present application;

[0036] Figure 3 It is a flowchart of the code compilation method provided in the embodiment of the present application;

[0037] Figure 4 It is a schematic diagram of parsing the source code file provided in the embodiment of the present application;

[0038] Figure 5 It is a flowchart of the code compilation method provided in the embodiment of the present application;

[0039] Figure 6 It is a flowchart of the code compilation method provided in the embodiment of the present application;

[0040] Figure 7It is a flowchart of the code compilation method provided in the embodiment of the present application;

[0041] Figure 8 It is a flowchart of the code compilation method provided in the embodiment of the present application;

[0042] Fig. 9 It is a flowchart of the code compilation method provided in the embodiment of the present application;

[0043] Fig.10 It is a display diagram of page elements provided in an embodiment of the present application. DETAILED DESCRIPTION

[0044] In order to make the purpose, technical solutions and advantages of the present application clearer, the present application will be further described in detail below in conjunction with the accompanying drawings. The described embodiments should not be regarded as limiting the present application. All other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of this application.

[0045] In the following description, reference is made to “some embodiments”, which describe a subset of all possible embodiments, but it will be understood that “some embodiments” may be the same subset or different subsets of all possible embodiments and may be combined with each other without conflict.

[0046] In the following description, the terms "first\second\third" involved are merely used to distinguish similar objects and do not represent a specific ordering of the objects. It can be understood that "first\second\third" can be interchanged with a specific order or sequence where permitted, so that the embodiments of the present application described here can be implemented in an order other than that illustrated or described here.

[0047] Unless otherwise defined, all technical and scientific terms used in the embodiments of the present application have the same meanings as those commonly understood by those skilled in the art. The terms used in the embodiments of the present application are only for the purpose of describing the embodiments of the present application and are not intended to limit the present application.

[0048] Before further describing the embodiments of the present application in detail, the nouns and terms involved in the embodiments of the present application are explained. The nouns and terms involved in the embodiments of the present application are subject to the following interpretations.

[0049] 1) Client: an application running in the terminal to provide various services.

[0050] 2) In response, it is used to indicate the conditions or states on which the executed operations depend. When the dependent conditions or states are met, one or more operations executed may be in real time or have a set delay. Unless otherwise specified, there is no restriction on the order of execution of the multiple operations executed.

[0051] 3) Mini Program, also known as Web Program, is a program developed based on a front-end language (such as JavaScript) that implements services in a Hypertext Markup Language (HTML) page. It is downloaded by a client (such as a browser or any client with an embedded browser core) via a network (such as the Internet) and interpreted and executed in the client's browser environment. Compared with ordinary programs, it does not require installation.

[0052] 4) Web side refers to the client of the Web application, also known as the front end or browser side, which is the user interface of the Web application accessed through a web browser. The Web side is mainly used to interact with the Web server, and to interact with the back-end server for data and page rendering through front-end technologies such as HTML, CSS and JavaScript in the browser. Generally speaking, the Web side is responsible for interacting with users and displaying the UI interface, while the back-end is responsible for processing data and other logical operations.

[0053] 5) Compilation: The process of using a compiler to generate a target program from a source program (i.e. source code) written in a source language.

[0054] 6) Application components are the basic building blocks of an application. Each application component is a different entry point for a system to enter the application. Each application component is a unique building block that helps define the overall behavior of the application.

[0055] 7) The source code file of the page is a way to display the content of the page in plain text. The source code of the page includes the Template (content), CSS (style), JavaScript (script) and other codes used in the page, as well as various tags, elements, attributes, etc., which represent the essential content of the page and are the basis for page rendering and display. Among them, Template is used to describe the structure and content of the page, and contains various tags and elements, such as titles, paragraphs, images, etc.; CSS is a language used to control the appearance and layout of the page, which defines various style rules, such as fonts, colors, backgrounds, etc.; JavaScript is a scripting language used to implement interactive and dynamic effects in the page, and can implement some advanced functions, such as form validation, dynamic content loading, etc.

[0056] 8) Cascading Style Sheets (CSS): is a computer language used to express the style of files such as HTML (an application of Standard Generalized Markup Language) or XML (a subset of Standard Generalized Markup Language).

[0057] 9) Style variables (i.e. CSS variables), CSS features, are declared with two dashes and used with the var() function. CSS variables can be declared using inline styles. Declare a CSS variable at the root node of a component, and all descendant elements of the root node can use this CSS variable. For example, a CSS variable can be:

[0058]

[0059] 10) The adaptive control strategy based on relative length units, namely REM, is suitable for the Web side. Through REM, it is possible to proportionally adjust the size of all elements in the page by only modifying the root element, and avoid the chain reaction of element size compounding layer by layer.

[0060] 11) The adaptive control strategy based on screen width, namely RPX, is applicable to the mini program side. The size of the page elements can be adaptively adjusted according to the screen width of the terminal device.

[0061] The embodiments of the present application provide a code compilation method, device, electronic device, computer-readable storage medium, and computer program product, which can reduce the cost of code development and maintenance, improve the efficiency of code development and maintenance, and code compilation efficiency while achieving the effect of dynamic style.

[0062] It should be noted that the collection and processing of relevant data in this application should be strictly in accordance with the requirements of relevant laws and regulations when applied in examples, and the informed consent or separate consent of the personal information subject should be obtained, and subsequent data use and processing should be carried out within the scope of authorization of laws and regulations and the personal information subject.

[0063] The following describes the code compilation system provided by the embodiment of the present application. Figure 1 , Figure 1 It is an architectural diagram of the code compilation system 100 provided in an embodiment of the present application. To support an exemplary application, a terminal (terminal 400-1 is shown as an example) is connected to a server 200 via a network 300. The network 300 may be a wide area network or a local area network, or a combination of the two, and data transmission is achieved using wireless or wired links.

[0064] The terminal (e.g., 400-1) is used to respond to the compilation instruction of the source code file of the page of the application component, parse the source code file, and obtain the content file, script file, and style file of the page; determine the syntax sugar of the element variable of the page element in the script file in the style file, and the style file is linked to the element variable of the script file through the syntax sugar; generate the style variable of the element variable, and replace the syntax sugar with the style variable to obtain a new style file; obtain the definition object of the element variable, and insert the definition object into the content file to obtain a new content file, the definition object indicates that the style variable is controlled based on the element variable; based on the new content file, the script file, and the new A style file is compiled into an executable file; wherein, during the running of the executable file, when the element variable in the script file changes, the style variable is changed based on the changed element variable by defining an object, so as to change the element style of the page element through the changed style variable; thereafter, the terminal (e.g., 400-1) is also used to upload the compiled executable file to the server 200; the server 200 is used to receive and store the executable file uploaded by the terminal; when a download instruction for the executable file is received from the target terminal (e.g., terminal 400-2), the executable file is sent to the target terminal to run the executable file on the target terminal.

[0065] In some embodiments, the code compilation method provided in the embodiments of the present application can be implemented by various electronic devices, for example, it can be implemented by a terminal alone, it can also be implemented by a server alone, or it can be implemented by a terminal and a server in collaboration. The code compilation method provided in the embodiments of the present application can be applied to various scenarios, including but not limited to cloud technology, artificial intelligence, smart transportation, assisted driving, games, etc.

[0066] In some embodiments, the electronic device for implementing the code compilation method provided in the embodiments of the present application may be various types of terminals or servers. Among them, the server (e.g., server 200) may be an independent physical server, or a server cluster or distributed system composed of multiple physical servers. The terminal (e.g., terminal 400-1) may be a laptop, a tablet computer, a desktop computer, etc., but is not limited thereto. The terminal and the server may be directly or indirectly connected via wired or wireless communication, which is not limited in the embodiments of the present application.

[0067] In some embodiments, the code compilation method provided in the embodiment of the present application can be implemented with the aid of cloud technology (Cloud Technology). Cloud technology refers to a hosting technology that unifies a series of resources such as hardware, software, and networks in a wide area network or a local area network to realize the calculation, storage, processing, and sharing of data. Cloud technology is a general term for network technology, information technology, integration technology, management platform technology, and application technology based on the application of cloud computing business model, which can form a resource pool, which is used on demand and is flexible and convenient. Cloud computing technology will become an important support. The background services of the technical network system require a large amount of computing resources and storage resources. As an example, a server (such as server 200) can also be a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content distribution networks (Content Delivery Network, CDN), and big data and artificial intelligence platforms.

[0068] In some embodiments, the terminal or server can implement the code compilation method provided by the embodiment of the present application by running various computer executable instructions or computer programs. For example, computer executable instructions can be commands, machine instructions or software instructions at the microprogram level. The computer program can be a native program or software module in the operating system; it can be a local (Native) application (Application, APP), that is, a program that needs to be installed in the operating system to run; it can also be a small program that can be embedded in any APP, that is, a program that can be run only by downloading it to a browser environment. In short, the above-mentioned computer executable instructions can be instructions in any form, and the above-mentioned computer program can be an application, module or plug-in in any form.

[0069] The following describes an electronic device for implementing a code compilation method provided in an embodiment of the present application. Figure 2 , Figure 2 : is a schematic diagram of the structure of an electronic device 500 for implementing a code compilation method provided in an embodiment of the present application. The electronic device 500 provided in an embodiment of the present application may be a terminal or a server. The electronic device 500 provided in an embodiment of the present application includes: at least one processor 510, a memory 550, at least one network interface 520 and a user interface 530. The various components in the electronic device 500 are coupled together through a bus system 540. It can be understood that the bus system 540 is used to achieve connection and communication between these components. In addition to the data bus, the bus system 540 also includes a power bus, a control bus and a status signal bus. However, for the sake of clarity, in Figure 2 Various buses are labeled as bus system 540 .

[0070] The processor 510 can be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc., where the general-purpose processor can be a microprocessor or any conventional processor, etc.

[0071] The user interface 530 includes one or more output devices 531 that enable presentation of media content, including one or more speakers and / or one or more visual display screens. The user interface 530 also includes one or more input devices 532, including user interface components that facilitate user input, such as a keyboard, mouse, microphone, touch screen display, camera, other input buttons and controls.

[0072] The memory 550 may be removable, non-removable, or a combination thereof. The memory 550 may include one or more storage devices physically located away from the processor 510. The memory 550 includes a volatile memory or a non-volatile memory, and may also include both a volatile memory and a non-volatile memory. The non-volatile memory may be a read-only memory (ROM), and the volatile memory may be a random access memory (RAM). The memory 550 described in the embodiments of the present application is intended to include any suitable type of memory.

[0073] In some embodiments, the memory 550 can store data to support various operations, examples of which include programs, modules, and data structures, or a subset or superset thereof, as exemplarily described below.

[0074] Operating system 551, including system programs for processing various basic system services and performing hardware-related tasks, such as framework layer, core library layer, driver layer, etc., for implementing various basic services and processing hardware-based tasks;

[0075] A network communication module 552, used to reach other electronic devices via one or more (wired or wireless) network interfaces 520, exemplary network interfaces 520 include: Bluetooth, Wireless Compatibility Certification (WiFi), and Universal Serial Bus (USB), etc.;

[0076] a presentation module 553 for enabling presentation of information via one or more output devices 531 (e.g., display screen, speaker, etc.) associated with the user interface 530 (e.g., a user interface for operating peripherals and displaying content and information);

[0077] The input processing module 554 is used to detect one or more user inputs or interactions from one of the one or more input devices 532 and translate the detected inputs or interactions.

[0078] In some embodiments, the code compilation device provided in the embodiments of the present application can be implemented in software. Figure 2 A code compiling device 555 stored in a memory 550 is shown, which may be software in the form of a program or plug-in, including the following software modules: a parsing module 5551, a determining module 5552, a replacing module 5553, an inserting module 5554, and a compiling module 5555. These modules are logical, and therefore may be arbitrarily combined or further split according to the functions implemented. The functions of each module will be described below.

[0079] The following describes the code compilation method provided by the embodiment of the present application. In some embodiments, the code compilation method provided by the embodiment of the present application can be implemented by various electronic devices, for example, it can be implemented by a terminal alone, it can also be implemented by a server alone, or it can be implemented by a terminal and a server in collaboration. Figure 3 , Figure 3 : is a flowchart of a code compilation method provided in an embodiment of the present application. The code compilation method provided in an embodiment of the present application includes:

[0080] Step 101: In response to a compile instruction of a source code file of a page of an application component, the terminal parses the source code file to obtain a content file, a script file and a style file of the page.

[0081] In actual applications, the terminal may be provided with a client supporting code compilation, and a user (e.g., a developer) may write and compile a source code file by running the client on the terminal. When the user completes writing the source code file on the terminal, the source code file may be compiled by triggering a compile instruction for the source code file.

[0082] Here, the source code file includes the source code of the page of the application component. It should be noted that the application component is the basic building block of the application, and each application component is a different entrance for a system to enter the application. Each application component is a unique building block that can help define the overall behavior of the application. For example, the application component can be a component that implements function A (such as a shopping mall function) in a mini program. It should be noted that the source code of the page is a way to display the content of the page in plain text; the source code of the page contains the Template (content), CSS (style), JavaScript (script) and other codes used in the page, as well as various tags, elements, attributes, etc., which represent the essential content of the page and are the basis for page rendering and display. Among them, Template is used to describe the structure and content of the page, and contains various tags and elements, such as titles, paragraphs, images, etc.; CSS is a language used to control the appearance and layout of the page, which defines various style rules, such as fonts, colors, backgrounds, etc.; JavaScript is a scripting language used to implement interactive and dynamic effects in the page, and can implement some advanced functions, such as form validation, dynamic content loading, etc.

[0083] In step 101, when the source code file of the page is compiled, the source code file is first parsed to obtain the content file (i.e., Template), script file (i.e., JavaScript), and style file (i.e., CSS) of the page. Figure 4 As shown, the parseComponent method can be used to split the source code file into three parts: Template, JavaScript, and CSS.

[0084] Step 102: In the style file, determine the syntax sugar of the element variable of the page element in the script file.

[0085] The style file is linked to the element variables of the script file through syntax sugar.

[0086] In an embodiment of the present application, the style file includes syntactic sugar of the element variables of the page elements in the script file. The syntactic sugar is used to link the element variables of the script file and the style file, that is, the style file can be linked to the element variables of the script file through syntactic sugar. In this way, when the element variable (value) of the page element in the script file changes, the style variable (value) of the page element in the style file will also change with the change of the element variable (value), so that the CSS can be dynamically updated with the change of the JavaScript variable (i.e., dynamic CSS); and syntactic sugar can reduce the complexity and repetitiveness of the code that implements the same function, and increase the readability of the code, so that it can not only make it more convenient and quick for developers to write code, but also reduce the cost of code development and maintenance.

[0087] In step 102, the syntax sugar of the element variable of the page element in the script file is determined from the style file. As an example, the syntax sugar may be height:v-px("height"). Wherein, height is the element variable of the page element in the script file. In actual applications, the element variable of the page element may also include width, color, etc.

[0088] In some embodiments, the terminal can determine the syntactic sugar of the element variable of the page element in the script file in the style file in the following manner: construct a regular expression corresponding to the syntactic sugar of the element variable; search for target characters that match the regular expression in the code characters included in the style file; and use the found target characters as the syntactic sugar of the element variable of the page element in the script file.

[0089] Here, the syntactic sugar can be determined from the style file in a regular way. First, the terminal needs to construct a regular expression corresponding to the syntactic sugar of the element variable, and then find the target character that meets the regular expression in the code characters included in the sample file. The target character found is the syntactic sugar of the element variable of the page element in the script file. It should be noted that a style file includes the syntactic sugar of the element variable of at least one page element, so the syntactic sugar found can be one or more.

[0090] Step 103: Generate a style variable for the element variable, and use the style variable to replace the syntax sugar to obtain a new style file.

[0091] After determining the syntax sugar of the element variable, a style variable (i.e., CSS variable) of the element variable is generated in step 103. In some embodiments, the terminal can generate the style variable of the element variable in the following manner: obtain the target character, and perform hash processing on the target character to obtain a random string; obtain a definition rule for defining the style variable, and generate the style variable of the element variable based on the random string and the definition rule.

[0092] Here, the definition of style variables is implemented according to the definition rules of style variables. The definition rules of style variables are: two connecting lines --* should be added in front of the variable name *, that is, var(--*). In an embodiment of the present application, the variable name is a random string, and the random string can be obtained by hashing the target characters, and the target characters can include at least one character. In this way, the style variable of the generated element variable can be: element variable:var(--random string). For example, the element variable is height, and the random string is AlMeGW, then the style variable of the element variable is: height:var(--AlMeGW).

[0093] In step 103, after the style variables of the element variables are generated, the syntactic sugar in the style file is replaced with the style variables, that is, the position of the syntactic sugar in the style file is replaced with the style variables. Since the style file is linked to the element variables of the script file through syntactic sugar, when the syntactic sugar is replaced with the style variables, the style variables of the style file and the element variables of the script file are also linked. At this time, the following effect can be achieved: when the element variable (value) of the page element in the script file changes, the style variable (value) of the page element in the style file will also change with the change of the element variable (value), that is, the CSS can be dynamically updated with the change of the JavaScript variable (dynamic CSS). In this way, a new style file is obtained by replacing the syntactic sugar in the style file with the style variables.

[0094] Step 104: Obtain a definition object of the element variable, and insert the definition object into the content file to obtain a new content file.

[0095] Among them, the definition object indicates that the style variable is controlled based on the element variable.

[0096] Here, in addition to obtaining a new style file, the content file needs to be processed to obtain a new content file. In step 104, the definition object of the element variable can be obtained first, and the definition object can be customized by the developer. The definition object indicates that the style variable is controlled based on the element variable, which actually indicates that when the value of the element variable changes, the value of the style variable is adjusted based on the value of the element variable using a defined control strategy.

[0097] In some embodiments, the terminal can obtain the definition object of the element variable in the following manner: obtain the definition rules of the definition object, and obtain the control strategy for controlling the style variable based on the element variable, and the random string used to generate the style variable; based on the control strategy and the random string, generate the definition object of the element variable according to the definition rules.

[0098] Here, the definition object is defined based on the definition rule, and the definition rule can be preset by the user. The definition rule defines the string position of each string in the definition object, that is, the definition rule defines the control policy and the string position of the random string in the definition object. For example, the definition rule can be: `$control policy`:'random string', and the definition rule is in the form of a key-value pair, wherein `$control policy` is the key in the key-value pair, and 'random string' is the value in the key-value pair. It should be noted that the random string is the random string mentioned above for generating style variables.

[0099] As an example, the definition object can be: `${height / COMPILE_ROOT_VALUE}COMPILE_UNIT`:'AlMeGWcWk3pwenz'. Among them, `${height / COMPILE_ROOT_VALUE}COMPILE_UNIT` is a control strategy for controlling style variables based on element variables (i.e. height), and 'AlMeGWcWk3pwenz' is a random string used to generate style variables. Here, the control strategy is set according to the operating environment of the application component.

[0100] In some embodiments, based on the control policy and the random string, the terminal can generate a definition object of the element variable in accordance with the definition rules in the following manner: obtain the string positions defined for the control policy and the random string in the definition rules; fill the string of the control policy and the random string into the corresponding string positions, respectively, to obtain the definition object of the element variable. In this way, when generating the definition object of the element variable, the string of the control policy and the random string can be filled into the corresponding string positions according to the string positions defined for the control policy and the random string in the definition rules, respectively, to obtain the definition object of the element variable.

[0101] In some embodiments, the terminal may obtain a control strategy based on element variables controlling style variables in the following manner: determining the operating environment of the application component; when the operating environment of the application component is a web page, determining that the control strategy is an adaptive control strategy based on relative length units.

[0102] Here, when the operating environment of the application component is a web page (i.e., a Web terminal), the control strategy based on element variables to control style variables can be an adaptive control strategy based on relative length units (rem). As an example, COMPILE_ROOT_VALUE in the above-defined object can be replaced with the benchmark value of the Web-side adaptive rem (i.e., 23.4375), and COMPILE_UNIT can be replaced with "rem". In this way, the adaptive control strategy based on relative length units can make the style of the page elements on the Web side adaptively adjusted according to the size of the terminal screen, thereby better presenting the page elements and improving the user experience.

[0103] In some embodiments, the terminal can obtain the control strategy based on element variables controlling style variables in the following manner: determine the operating environment of the application component; when the operating environment of the application component is the mini-program end, determine that the control strategy is an adaptive control strategy based on screen width.

[0104] Here, when the operating environment of the application component is the mini-program side, the control strategy based on the element variable to control the style variable can be an adaptive control strategy based on the screen width (rpx). As an example, COMPILE_ROOT_VALUE in the above-defined object can be replaced with the benchmark value of the mini-program side adaptive rpx (i.e. 0.5), and COMPILE_UNIT can be replaced with "rpx". In this way, the adaptive control strategy based on screen width can make the style of the page elements on the mini-program side adaptively adjusted according to the size of the terminal screen, thereby better presenting the page elements and improving the user experience.

[0105] In some embodiments, the terminal may insert the definition object into the content file to obtain a new content file by: performing syntax parsing on the content file to obtain a syntax tree of the content file; inserting the definition object into the root node of the syntax tree to obtain a new syntax tree; and converting the new syntax tree into a new content file.

[0106] Here, when inserting a definition object into a content file, the content file may be first parsed to obtain a syntax tree of the content file, and the root node of the syntax tree may be determined from the syntax tree, so that the definition object may be inserted into the root node of the syntax tree to obtain a new syntax tree, and then the new syntax tree may be string-converted to obtain the new content file. It should be noted that there may be multiple definition objects, so when there are multiple definition objects, the definition objects may be merged first, and then the merged definition objects may be inserted into the content file.

[0107] As an example, the new content file (i.e. new template) can be as follows:

[0108] Web:

[0109] <div

[0110] class="div":style="{'--AlMeGWcWk3pwenz':`${(height) / 23.4375}rem`}">test< / di v>

[0111] Mini Program End:

[0112] <divclass="div":style="{'--AlMeGWcWk3pwenz':`${(height) / 0.5}rpx`}"> test

[0113] Here, an attribute: style is added to the root node of the content file, and the definition object is inserted through this attribute: style.

[0114] Step 105: Compile and obtain an executable file based on the new content file, the script file and the new style file.

[0115] When the element variable in the script file changes during the execution of the executable file, the object is defined and the style variable is changed based on the changed element variable, so as to change the element style of the page element through the changed style variable.

[0116] Here, after obtaining the new content file and the new style file, an executable file is compiled based on the new content file, the script file and the new style file. The executable file is the executable file of the page of the application component. During the running of the executable file, if the value of the element variable in the script file changes, the value of the style variable is changed based on the changed value of the element variable by defining an object, so as to change the element style of the page element through the changed value of the style variable, thereby achieving the effect of dynamic CSS.

[0117] In some embodiments, the terminal can compile an executable file based on the new content file, the script file and the new style file in the following manner: perform syntax parsing on the new content file to obtain an abstract syntax tree of the new content file, and convert the abstract syntax tree into a rendering function; package the rendering function, the script file and the new style file to obtain an executable file.

[0118] Here, during compilation, the new content file can be first compiled into a rendering function (i.e., a render function). Compiling the render function into an executable file is more flexible and can improve compilation efficiency. When compiling the new content file into a rendering function, the new content file can be first parsed to obtain an abstract syntax tree of the new content file, and then the abstract syntax tree is converted into a render function to obtain a render function compiled from the new content file. Finally, the rendering function, script file, and new style file are packaged to obtain an executable file.

[0119] In some embodiments, when the new content file includes new content files of multiple front ends, the terminal can compile an executable file based on the new content file, script file and new style file in the following manner: through a cross-end development framework, based on the new content files, script files and new style files of each front end, compile the executable file corresponding to the corresponding front end; wherein the multiple front ends include at least a mini program end and a web page end. Here, the above-mentioned packaging process can be implemented through a cross-end development framework (such as a taro framework). When the new content file is a new content file on the Web side, a Web side executable file can be obtained. When the new content file is a new content file on the mini program side, a mini program side executable file can be obtained. In this way, through cross-end development, development efficiency and compilation efficiency can be improved.

[0120] Applying the above-mentioned embodiment of the present application, when a compilation instruction of a source code file for a page of an application component is received, the source code file is parsed to obtain the content file, script file and style file of the page; then, in the style file, the syntactic sugar of the element variable of the page element in the script file is determined, thereby generating the style variable of the element variable, and the syntactic sugar is replaced by the style variable to obtain a new style file; then, the definition object of the element variable is obtained, and the definition object is inserted into the content file to obtain a new content file; finally, based on the new content file, the script file and the new style file, an executable file is compiled.

[0121] Here, the style file is linked to the element variables of the script file through syntax sugar. When the syntax sugar is replaced by the style variables, the style variables of the style file and the element variables of the script file are also linked. In this way, when the element variables of the page elements in the script file change, through the control of the defined object, the style variables of the page elements in the style file will also change with the changes of the element variables, thereby achieving the effect that the page style can be dynamically updated with the changes of the element variables in the script file (i.e. dynamic CSS); and syntax sugar can reduce the complexity and repetition of the code that implements the same function and increase the readability of the code. In this way, it will enable developers to write code more conveniently and quickly, thereby reducing the cost of code development and maintenance, improving the efficiency of code development and maintenance, and also improving the efficiency of code compilation.

[0122] The following will describe an exemplary application of the embodiment of the present application in an actual application scenario. In the related art, the relevant source code when implementing dynamic CSS may be as follows:

[0123]

[0124] Thus, there are duplicate business codes in the above source code, and the duplicate codes cause the web page file size to be too large, which not only increases the development and maintenance costs, but also the page white screen time is long, which is not conducive to user experience.

[0125] Based on this, the embodiment of the present application also provides a code compilation method. Through the embodiment of the present application, the functions implemented by the above source code can be completed by the following code:

[0126] height:v-px("height")

[0127] Thus, it can be seen that the amount of code can be reduced to 1 line. That is, through the embodiments of the present application, repeated and redundant codes can be effectively reduced, development and maintenance costs can be reduced, and developers can write codes more conveniently and quickly, thereby reducing the size of executable files, thereby shortening the page white screen time, and improving user experience.

[0128] See next Figure 5 , the code compilation method provided in the embodiment of the present application is described. The code compilation method provided in the embodiment of the present application includes:

[0129] 1. Analyze the source code file to get template and css.

[0130] 2. Analyze CSS and collect syntax sugar in CSS, for example: width:t-px(width).

[0131] 3. Generate a random hash, such as AlMeGW.

[0132] 4. Concatenate into the CSS variable width:var (--AlMeGW) that can be recognized by the browser.

[0133] 5. Use css variables to replace the original syntax sugar position and generate new css.

[0134] 6. Determine whether the current environment is a mini program or a web. If it is a web, execute step 7; if it is a mini program, execute step 8.

[0135] 7. When the current environment is web, concatenate the web string: style = {'--AlMeGW':width / 23.4375+'rem'}, where 23.4375 is the unit base of web adaptive rem, which will adapt to different types of screens.

[0136] 8. When the current environment is a mini program, concatenate the mini program string: style = {'--AlMeGW':width / 0.5+'rpx'}, where 0.5 is the unit benchmark of the mini program's adaptive rpx, which will adapt to different types of screens.

[0137] 9. Mount the string concatenated in step 7 to the template root node to generate a new Web template.

[0138] 10. Mount the string concatenated in step 8 to the root node of the applet template to generate a new applet template.

[0139] 11.Package the new Web template and new CSS to generate a Web executable file.

[0140] 12. Package the new applet template and new css to generate the applet executable file.

[0141] Next, the code compilation method provided by the embodiment of the present application is described in detail. The goal of the embodiment of the present application is to achieve the same function with the least business code. The principle of the embodiment of the present application is to operate the source code file of the application component to generate a final executable file that can be run.

[0142] For example, the source code of the application component is as follows:

[0143]

[0144] From the above source code, we can see that this is a div box of a page. In the javascript part, a js variable height is defined with a value of 100. In the css part, there is a line of syntax sugar: height:v-px("height"). In the embodiment of the present application, the operation of this line of syntax sugar code is: linking the js variable height and css, and when the js variable height changes, the height of the div box also changes, and the changed value is the value of the js variable height.

[0145] In the examples of this application, see Figure 6 For cross-end application components, the source code of the application component is compiled and packaged, and finally presented in the browser mainly through the following steps, including:

[0146] (1) Use the parseComponent method to split the source code of the application component into three parts, including template, javascript, and css. Figure 4 shown.

[0147] In actual applications, a Vite compilation plug-in can be implemented in step (1), which will be called after parseComponent splits the source code. The operation process of the plug-in is as follows: Figure 7 As shown, including:

[0148] 1.1) Analyze the CSS part and use regular expressions to find the syntax sugar v-px, such as height:v-px("height").

[0149] 1.2) Generate a random hash, such as AlMeGW.

[0150] 1.3) Splice it into a CSS variable height:var(--AlMeGW) that can be recognized by the browser, and use the CSS variable to replace the position of the CSS syntax sugar to generate new CSS.

[0151] 1.4) Collect an object and record it as ans, for example:

[0152] ans:

[0153] `${height / COMPILE_ROOT_VALUE}COMPILE_UNIT`:'AlMeGWcWk3pwenz'

[0154] };

[0155] Among them, Key (i.e., `${height / COMPILE_ROOT_VALUE}COMPILE_UNIT`) is a static string; height is a js variable in the JavaScript part; COMPILE_ROOT_VALUE and COMPILE_UNIT are static strings, which will be replaced in the (2) compile stage; value (i.e., 'AlMeGWcWk3pwenz') is a random string generated in 1.2).

[0156] 1.5) Merge the collected ans and insert them into the root node of the template part.

[0157] In actual applications, the open source plug-in posthtml-parser can be used to parse the template obtained by parseCompont into an ast syntax tree. For example, the ast can be as follows:

[0158]

[0159] In this way, we can determine that the current component has a tag, tag is div; attrs is all the attributes of div, including an attribute class. The collected object ans is traversed, spliced ​​and bound into a new attribute style, and added to the root node div of the template.

[0160] In actual applications, if the root node already has its own style, then the style can be in four forms:

[0161] style = "{style}" / / single object type;

[0162] style="{colro:color}" / / Bracket type;

[0163] style = "[style, style1]" / / array type;

[0164] style = "`color:${color}`" / / string type;

[0165] Do string concatenation processing respectively. Then merge the css variables and insert them into the root node of the template part. At this time, the new ast is as follows:

[0166]

[0167] In this way, you can see that the template part has an additional attribute style.

[0168] 1.6) Use posthtml-render to convert the new ast into a new template. Here, the new template is as follows:

[0169] <div

[0170] class="div":style="{'--AlMeGWcWk3pwenz':`${(height) / COMPILE_ROOT_VALU E}COMPILE_UNIT`}">test

[0171] This shows that a new attribute is added to the root node of the new template: style.

[0172] (2) Compile phase: Convert the template into a render function that can be executed by the browser.

[0173] In actual applications, a plug-in can be used to perform cross-end processing on the new template obtained in (1) to replace the previous static string. Figure 8 ,include:

[0174] 2.1) Determine whether the current environment is the Web side or the mini program side.

[0175] 2.2) If it is a web-based template, replace COMPILE_ROOT_VALUE in the new template with the base value of the web-based adaptive rem (i.e. 23.4375); and replace COMPILE_UNIT with "rem". In this way, a new template for the web-based template is obtained.

[0176] 2.3) If it is the mini program side, replace COMPILE_ROOT_VALUE with the mini program side adaptive rpx benchmark value (i.e. 0.5); replace COMPILE_UNIT with "rpx". In this way, the new template of the mini program side is obtained.

[0177] The new template generated after the replacement is completed is as follows:

[0178] Web:

[0179] <div

[0180] class="div":style="{'--AlMeGWcWk3pwenz':`${(height) / 23.4375}rem`}">test< / di v>

[0181] Mini Program End:

[0182] <divclass="div":style="{'--AlMeGWcWk3pwenz':`${(height) / 0.5}rpx`}">test

[0183] 2.4) Use vite to compile the new template obtained in 2.3) to get the corresponding render function.

[0184] 3) Through the cross-end taro framework, package the render functions of each end to obtain the corresponding executable files, such as Fig. 9 As shown in the figure, the executable file of the Web can be run in h5, and the executable file of the mini program can be run in the mini program.

[0185] See also Fig.10 , Fig.10 is a schematic diagram of the display of page elements provided by an embodiment of the present application. Here, when the executable code compiled based on the above process is run, the page elements presented to the user can be as follows: Fig.10 As shown in (1); if the value of the js variable height changes after two seconds, for example, from 100 to 200, then the page elements displayed on the page after two seconds will be as follows Fig.10 As shown in (2), the change of CSS complies with dynamic update.

[0186] At this point, when you open the console to view the element styles of the page elements, you can see:

[0187]

[0188] It can be understood that, on a terminal screen with a screen width of 375px, the actual rendered height is 200px, that is, the value of the js variable height, so the height of the page element is 200 / 23.4375=8.533333.

[0189] Similarly, the effect is the same in the mini program. On a mobile phone screen with a width of 375px, the actual rendered height of the div box is 200px; if the model is switched to a tablet with a width of 768px, the actual rendered height of the div box is 409px, which means that the mini program also supports adaptation.

[0190] Applying the above embodiments of the present application, 1) it can effectively reduce repeated and redundant codes, reduce development and maintenance costs, and make it more convenient and quick for developers to write codes, thereby reducing the size of executable files, thereby shortening the page white screen time and improving user experience. 2) Support cross-end: it can be used on both the mini program and the Web end; 3) Support cross-end adaptation: use the web's adaptive rem unit on the Web end, and use the mini program's adaptive rpx unit on the mini program end. 4) Implement dynamic CSS: link CSS and JavaScript together, and CSS variables can be dynamically updated as JavaScript variables change. 5) It can be applied to applications written in JavaScript; 6) It can be applied in VUE2 scenarios.

[0191] The following further describes the exemplary structure of the code compiling device 555 provided in the embodiment of the present application implemented as a software module. In some embodiments, Figure 2 As shown, the software modules stored in the code compilation device 555 of the memory 550 may include: a parsing module 5551, which is used to parse the source code file in response to the compilation instruction of the source code file of the page of the application component to obtain the content file, script file and style file of the page; a determination module 5552, which is used to determine the syntax sugar of the element variable of the page element in the script file in the style file, and the style file is linked to the element variable of the script file through the syntax sugar; a replacement module 5553, which is used to generate a style variable of the element variable, and use the style variable to replace the syntax sugar, A new style file is obtained; an insertion module 5554 is used to obtain a definition object of the element variable and insert the definition object into the content file to obtain a new content file, wherein the definition object indicates that the style variable is controlled based on the element variable; a compilation module 5555 is used to compile an executable file based on the new content file, the script file and the new style file; wherein, during the running of the executable file, when the element variable in the script file changes, the style variable is changed based on the changed element variable through the definition object, so as to change the element style of the page element through the changed style variable.

[0192] In some embodiments, the determination module 5552 is also used to construct a regular expression corresponding to the syntactic sugar of the element variable; search for target characters that conform to the regular expression in the code characters included in the style file; and use the found target characters as the syntactic sugar of the element variable of the page element in the script file.

[0193] In some embodiments, the replacement module 5553 is also used to obtain target characters and perform hash processing on the target characters to obtain a random string; obtain definition rules for defining style variables, and based on the random string, generate style variables of the element variables according to the definition rules.

[0194] In some embodiments, the insertion module 5554 is also used to obtain the definition rules of the definition object, and obtain the control strategy for controlling the style variables based on the element variables, and a random string for generating the style variables; based on the control strategy and the random string, the definition object of the element variable is generated according to the definition rules.

[0195] In some embodiments, the insertion module 5554 is also used to determine the operating environment of the application component; when the operating environment of the application component is a web page, the control strategy is determined to be an adaptive control strategy based on relative length units.

[0196] In some embodiments, the insertion module 5554 is also used to determine the operating environment of the application component; when the operating environment of the application component is a mini-program end, the control strategy is determined to be an adaptive control strategy based on screen width.

[0197] In some embodiments, the insertion module 5554 is also used to obtain the string positions defined in the definition rules for the control strategy and the random string respectively; fill the control strategy string and the random string into the corresponding string positions respectively to obtain the definition object of the element variable.

[0198] In some embodiments, the insertion module 5554 is also used to perform syntax parsing on the content file to obtain a syntax tree of the content file; insert the definition object into the root node of the syntax tree to obtain a new syntax tree; and convert the new syntax tree into the new content file.

[0199] In some embodiments, the compilation module 5555 is also used to perform syntax parsing on the new content file to obtain an abstract syntax tree of the new content file, and convert the abstract syntax tree into a rendering function; and to package the rendering function, the script file, and the new style file to obtain the executable file.

[0200] In some embodiments, when the new content file includes new content files of multiple front-ends, the compilation module 5555 is also used to compile the executable files corresponding to the corresponding front-ends based on the new content files, the script files and the new style files of each front-end through a cross-end development framework; wherein the multiple front-ends include at least a mini-program end and a web page end.

[0201] Applying the above-mentioned embodiment of the present application, when a compilation instruction of a source code file for a page of an application component is received, the source code file is parsed to obtain the content file, script file and style file of the page; then, in the style file, the syntactic sugar of the element variable of the page element in the script file is determined, thereby generating the style variable of the element variable, and the syntactic sugar is replaced by the style variable to obtain a new style file; then, the definition object of the element variable is obtained, and the definition object is inserted into the content file to obtain a new content file; finally, based on the new content file, the script file and the new style file, an executable file is compiled.

[0202] Here, the style file is linked to the element variables of the script file through syntax sugar. When the syntax sugar is replaced by the style variables, the style variables of the style file and the element variables of the script file are also linked. In this way, when the element variables of the page elements in the script file change, through the control of the defined object, the style variables of the page elements in the style file will also change with the changes of the element variables, thereby achieving the effect that the page style can be dynamically updated with the changes of the element variables in the script file (i.e. dynamic CSS); and syntax sugar can reduce the complexity and repetition of the code that implements the same function and increase the readability of the code. In this way, it will enable developers to write code more conveniently and quickly, thereby reducing the cost of code development and maintenance, improving the efficiency of code development and maintenance, and also improving the efficiency of code compilation.

[0203] The embodiment of the present application also provides a computer program product, which includes computer executable instructions or computer programs, and the computer executable instructions or computer programs are stored in a computer-readable storage medium. The processor of the electronic device reads the computer executable instructions or computer program from the computer-readable storage medium, and the processor executes the computer executable instructions or computer program, so that the electronic device executes the code compilation method provided in the embodiment of the present application.

[0204] An embodiment of the present application also provides a computer-readable storage medium, which stores computer-executable instructions or a computer program. When the computer-executable instructions or the computer program are executed by a processor, the processor will execute the code compilation method provided in the embodiment of the present application.

[0205] In some embodiments, the computer-readable storage medium may be a memory such as RAM, ROM, flash memory, magnetic surface memory, optical disk, or CD-ROM; or may be various devices including one or any combination of the above memories.

[0206] In some embodiments, computer executable instructions may be in the form of a program, software, software module, script or code, written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and may be deployed in any form, including as a stand-alone program or as a module, component, subroutine or other unit suitable for use in a computing environment.

[0207] As an example, computer-executable instructions may, but need not, correspond to a file in a file system, may be stored as part of a file that stores other programs or data, such as in one or more scripts in a HyperText Markup Language (HTML) document, in a single file dedicated to the program in question, or in multiple coordinated files (e.g., files storing one or more modules, subroutines, or code portions).

[0208] As an example, computer executable instructions may be deployed to be executed on one electronic device, or on multiple electronic devices located at one site, or on multiple electronic devices distributed at multiple sites and interconnected by a communication network.

[0209] The above is only an embodiment of the present application and is not intended to limit the protection scope of the present application. Any modifications, equivalent substitutions and improvements made within the spirit and scope of the present application are included in the protection scope of the present application.

Claims

1. A code compilation method, characterized in that: The method comprises: In response to a compile instruction of a source code file of a page of an application component, the source code file is parsed to obtain a content file, a script file and a style file of the page; In the style file, determining syntax sugar of element variables of page elements in the script file, wherein the style file is linked to the element variables of the script file through the syntax sugar; Generate a style variable of the element variable, and use the style variable to replace the syntax sugar to obtain a new style file; Obtaining a definition object of the element variable, and inserting the definition object into the content file to obtain a new content file, wherein the definition object indicates controlling the style variable based on the element variable; An executable file is compiled based on the new content file, the script file and the new style file; wherein, during the running of the executable file, when the element variable in the script file changes, the style variable is changed based on the changed element variable through the definition object, so as to change the element style of the page element through the changed style variable.

2. The method according to claim 1, characterized in that Determining the syntax sugar of the element variable of the page element in the script file in the style file includes: Constructing a regular expression corresponding to the syntax sugar of the element variable; Searching for a target character that matches the regular expression among the code characters included in the pattern file; The found target character is used as syntax sugar for the element variable of the page element in the script file.

3. The method according to claim 1, characterized in that The generating of the style variable of the element variable comprises: Obtaining a target character and performing hash processing on the target character to obtain a random character string; A definition rule for defining a style variable is obtained, and based on the random character string, the style variable of the element variable is generated according to the definition rule.

4. The method according to claim 1, characterized in that The obtaining of the definition object of the element variable includes: Acquire a definition rule of the definition object, and acquire a control strategy for controlling the style variable based on the element variable, and a random character string for generating the style variable; Based on the control strategy and the random character string, a definition object of the element variable is generated according to the definition rule.

5. The method according to claim 4, characterized in that The acquiring a control strategy for controlling the style variable based on the element variable includes: determining an operating environment for the application component; When the operating environment of the application component is a web page, the control strategy is determined to be an adaptive control strategy based on relative length units.

6. The method according to claim 4, characterized in that The acquiring a control strategy for controlling the style variable based on the element variable includes: determining an operating environment for the application component; When the operating environment of the application component is a mini-program end, the control strategy is determined to be an adaptive control strategy based on screen width.

7. The method according to claim 4, characterized in that The generating the definition object of the element variable based on the control strategy and the random character string according to the definition rule includes: Obtaining the positions of the character strings respectively defined for the control strategy and the random character string in the definition rule; The control strategy character string and the random character string are respectively filled into corresponding character string positions to obtain the definition object of the element variable.

8. The method according to claim 1, characterized in that The step of inserting the definition object into the content file to obtain a new content file comprises: Performing syntax analysis on the content file to obtain a syntax tree of the content file; Inserting the definition object into the root node of the syntax tree to obtain a new syntax tree; The new syntax tree is converted into the new content file.

9. The method according to claim 1, characterized in that The step of compiling the executable file based on the new content file, the script file and the new style file includes: Performing syntax parsing on the new content file to obtain an abstract syntax tree of the new content file, and converting the abstract syntax tree into a rendering function; The rendering function, the script file, and the new style file are packaged to obtain the executable file.

10. The method according to claim 1, characterized in that When the new content file includes multiple front-end new content files, the executable file is compiled based on the new content file, the script file and the new style file, including: Compile the executable file corresponding to the corresponding front end based on the new content file, the script file and the new style file of each front end through the cross-end development framework; Among them, the multiple front ends include at least a mini-program end and a web page end.

11. A code compiling device, characterized in that: The device comprises: A parsing module, for parsing the source code file in response to a compile instruction of the source code file of the page of the application component to obtain the content file, script file and style file of the page; A determination module, configured to determine, in the style file, syntax sugar of an element variable of a page element in the script file, wherein the style file is linked to the element variable of the script file through the syntax sugar; A replacement module, used for generating a style variable of the element variable, and replacing the syntax sugar with the style variable to obtain a new style file; An inserting module, used for acquiring a definition object of the element variable, and inserting the definition object into the content file to obtain a new content file, wherein the definition object indicates controlling the style variable based on the element variable; A compilation module is used to compile an executable file based on the new content file, the script file and the new style file; wherein, during the running of the executable file, when the element variable in the script file changes, the style variable is changed based on the changed element variable through the definition object, so as to change the element style of the page element through the changed style variable.

12. An electronic device, characterized in that: The electronic device comprises: A memory for storing computer executable instructions; A processor, configured to implement the code compiling method according to any one of claims 1 to 10 when executing the computer executable instructions stored in the memory.

13. A computer-readable storage medium storing computer-executable instructions or a computer program, characterized in that: When the computer executable instructions or computer programs are executed by a processor, the code compiling method according to any one of claims 1 to 10 is implemented.

14. A computer program product comprising computer executable instructions or a computer program, characterized in that When the computer executable instructions or computer programs are executed by a processor, the code compiling method according to any one of claims 1 to 10 is implemented.

Images