CN118192965A - Page component processing method, device, computer equipment, storage medium and product - Google Patents

Abstract

The application relates to a page component processing method, a page component processing device, computer equipment, a storage medium and a page component processing product. The method comprises the following steps: responding to an installation instruction for installing a third party component library, and storing respective component code files of at least one third party page component in the third party component library into a third party component folder under a program project catalog of an application program; responding to an execution instruction of a logic file which is preconfigured under an execution program project directory, and determining a target folder matched with a third party component folder in a native component folder under the program project directory by executing the logic file; and storing the respective component code files of at least one third-party page component in the third-party component folder into the target folder. By adopting the method, operation and maintenance resources can be saved.

Description

Page component processing method, device, computer equipment, storage medium and product

Technical Field

The present application relates to the field of page technology, and in particular to a page component method, apparatus, computer equipment, storage medium and computer program product.

Background technique

With the development of computer technology, in the design of application pages such as mini-programs, component-based development is usually adopted. The page components are referenced to the page code file through the development tool. The page code file can be run to render the page components to form a page. When designing a page, in order to improve the scalability of the page, in addition to using the basic page components, it is usually necessary to reference the third page components in the third-party component library. In existing development tools, third-party page components are usually introduced by starting the third-party support function in the development tool. The third-party support function is such as the NPM (NodePackage Manager, a package manager in Node.js, Node.js is an open source cross-platform operating environment and library) module building function. However, early versions of development tools do not provide third-party support functions, and the overall code of the application needs to be upgraded to adapt to the development tools that can provide third-party support functions, so that the third-party support function can be used to flexibly introduce third-party components.

However, upgrading application code consumes a lot of operation and maintenance resources.

Summary of the invention

Based on this, it is necessary to provide a page component processing method, device, computer equipment, computer-readable storage medium and computer program product that can save operation and maintenance resources in response to the above technical problems.

In a first aspect, the present application provides a page component processing method, comprising:

In response to an installation instruction for installing a third-party component library, storing a component code file of at least one third-party page component in the third-party component library in a third-party component folder under a program project directory of the application;

In response to an execution instruction of a preconfigured logic file under the program project directory, determining a target folder matching the third-party component folder in a native component folder under the program project directory by executing the logic file;

The component code file of at least one third-party page component in the third-party component folder is stored in the target folder; the component code file of at least one third-party page component in the target folder is used to render the page according to the page code file and the component code file of the referenced third-party component when rendering the page of the application when the page code file of the page in the application references any third-party page component.

In a second aspect, the present application further provides a page component processing device, including:

A third-party component folder management module, configured to store a component code file of at least one third-party page component in the third-party component library in a third-party component folder under a program project directory of the application program in response to an installation instruction for installing the third-party component library;

A target folder management module is used to respond to an execution instruction of a preconfigured logic file under the program project directory, determine a target folder matching the third-party component folder in a native component folder under the program project directory by executing the logic file; store a component code file of at least one third-party page component in the third-party component folder in the target folder; and a component code file of at least one third-party page component in the target folder is used to render the page according to the page code file and the component code file of the referenced third-party component when rendering the page of the application program, when the page code file of the page in the application program references any third-party page component.

In a third aspect, the present application further provides a computer device, including a memory and a processor, wherein the memory stores a computer program, and when the processor executes the computer program, the following steps are implemented:

In response to an installation instruction for installing a third-party component library, storing a component code file of at least one third-party page component in the third-party component library in a third-party component folder under a program project directory of the application;

In response to an execution instruction of a preconfigured logic file under the program project directory, determining a target folder matching the third-party component folder in a native component folder under the program project directory by executing the logic file;

The component code file of at least one third-party page component in the third-party component folder is stored in the target folder; the component code file of at least one third-party page component in the target folder is used to render the page according to the page code file and the component code file of the referenced third-party component when rendering the page of the application when the page code file of the page in the application references any third-party page component.

In a fourth aspect, the present application further provides a computer-readable storage medium having a computer program stored thereon, wherein when the computer program is executed by a processor, the following steps are implemented:

In response to an installation instruction for installing a third-party component library, storing a component code file of at least one third-party page component in the third-party component library in a third-party component folder under a program project directory of the application;

In response to an execution instruction of a preconfigured logic file under the program project directory, determining a target folder matching the third-party component folder in a native component folder under the program project directory by executing the logic file;

The component code file of at least one third-party page component in the third-party component folder is stored in the target folder; the component code file of at least one third-party page component in the target folder is used to render the page according to the page code file and the component code file of the referenced third-party component when rendering the page of the application when the page code file of the page in the application references any third-party page component.

In a fifth aspect, the present application further provides a computer program product, including a computer program, which implements the following steps when executed by a processor:

In response to an installation instruction for installing a third-party component library, storing a component code file of at least one third-party page component in the third-party component library in a third-party component folder under a program project directory of the application;

In response to an execution instruction of a preconfigured logic file under the program project directory, determining a target folder matching the third-party component folder in a native component folder under the program project directory by executing the logic file;

The component code file of at least one third-party page component in the third-party component folder is stored in the target folder; the component code file of at least one third-party page component in the target folder is used to render the page according to the page code file and the component code file of the referenced third-party component when rendering the page of the application when the page code file of the page in the application references any third-party page component.

The above-mentioned page component processing method, device, computer equipment, storage medium and product, in response to the installation instruction, store the respective component code file of at least one third-party page component in the third-party component folder under the program project directory of the application, and then, in response to the execution instruction of the execution logic file, store the respective component code file of at least one third-party page component in the third-party component folder in the target folder; because the target folder is in the native component folder under the program project directory, the components in the native component folder are adapted to the program project, and thus, when designing the page, the third-party page component in the target folder can be referenced in the page code file of the page, and then the page can be rendered based on the component code file of the referenced third-party component when rendering the page subsequently. Therefore, without upgrading the overall code file of the application, the code file of the third-party component is stored in the target folder by executing the logic file in the program project directory, so that the third-party component can be referenced in the page code file, which reduces the consumption of operation and maintenance resources compared to the method of upgrading the overall code file of the application.

BRIEF DESCRIPTION OF THE DRAWINGS

In order to more clearly illustrate the technical solutions in the embodiments of the present application or the related technologies, the drawings required for use in the embodiments or the related technical descriptions are briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

FIG1 is an application environment diagram of a page component processing method in one embodiment;

FIG2 is a schematic diagram of a flow chart of a page component processing method in one embodiment;

FIG3 is a schematic diagram of an example component code file of a third-party page component in one embodiment;

FIG4 is a schematic diagram of a display example of a third-party page component in one embodiment;

FIG5 is a simplified flow chart of page component processing steps in one embodiment;

FIG6 is a schematic diagram of the timing sequence of page component processing steps in one embodiment;

FIG7 is a structural block diagram of a page component processing device in one embodiment;

FIG. 8 is a diagram showing the internal structure of a computer device in one embodiment.

Detailed ways

In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

The page component processing method provided in the embodiment of the present application can be applied in the application environment as shown in Figure 1. Among them, the terminal 102 communicates with the server 104 through the network. The data storage system can store the data that the server 104 needs to process. The data storage system can be integrated on the server 104, or it can be placed on the cloud or other network servers. The terminal 102 can respond to the installation instruction of installing the third-party component library, obtain the component code file of at least one third-party component in the third-party component library from the server 104, and store the obtained component code file in the third-party component folder under the program project directory of the application program. The terminal 102 can respond to the execution instruction of the pre-configured logic file under the execution program directory, and by executing the logic file, in the native component folder of the program project directory, determine the target folder that matches the third-party component folder, and store the component code file of at least one third-party page component in the third-party component folder to the target folder. Among them, the terminal 102 can be a personal computer, a laptop, a smart phone or a tablet computer. The server 104 can be implemented with an independent server or a server cluster composed of multiple servers. The server 104 can run the service end in the third-party code platform.

In one embodiment, as shown in FIG. 2 , a page component processing method is provided, which is described by taking the method applied to the terminal 102 in FIG. 1 as an example, and includes the following steps 202 to 206 . Among them:

Step 202, in response to the installation instruction for installing the third-party component library, the component code file of at least one third-party page component in the third-party component library is stored in a third-party component folder under the program project directory of the application.

Among them, the third-party component library is a component library that includes at least one third-party page component. The third party is a party other than the developer of the application and the user of the application. The third party can specifically refer to a third-party code platform. An application is a computer program for completing one or more specific tasks. An application can be a native application, a web application, or a sub-application running in a native application. A native application is an application that relies on an operating system to run, and the user needs to download the installation package of the application and install it before use. A web application is a software application built based on Web (World Wide Web, Global Wide Area Network) technology that can be accessed and used over the Internet. A sub-application can be used without user installation. For example, a sub-application can be a WeChat applet running in WeChat, or an Alipay applet running in Alipay.

The developer of the application may be a development terminal used for application development. Development tools can be run on the development terminal to develop applications. For example, the development tool may be a WeChat developer tool provided by WeChat for developing WeChat mini-programs, Taro (a framework for multi-terminal development), WePY (a mini-program component development framework with Vue-like syntax), uni-app (a framework for developing cross-platform applications using Vue.js), or others. Vue is a JavaScript (a lightweight, interpreted or just-in-time compiled programming language with function priority) framework for building user interfaces. The user of the application may be a client. The third-party code platform may be a package management tool, such as NPM, PNPM (Performant NPM), Yarn (JavaScript (a lightweight, interpreted or just-in-time compiled programming language with function priority) package manager released by Facebook). The third-party component library may be a component library corresponding to a component package stored in a package management tool. The component package is a code package corresponding to a third-party component library.

The installation instruction is an instruction for installing a third-party component library. The installation instruction can specifically be a computer instruction triggered after inputting an installation command consisting of an installation command identifier and an identifier of a third-party component library in a command line tool. The installation command identifier can be a command identifier used to install a code package in a package management tool, for example, the installation command identifier can be "npm i". The identifier of a third-party component library is information used to distinguish a third-party component library from other libraries, for example, the identifier of a third-party component library can be the name of the third-party component library, the path of the third-party component library in the package management tool, or other. The installation command is used to call the installation component library service provided by a third party. For example, if the identifier of a third-party component library is "step", the installation command can be "npm i step", and the Node server providing the NPM service can receive the installation command, obtain the component package corresponding to "step" and feedback to the terminal. A command line tool is a way for a user to interact with a computer operating system, which provides a way to execute commands and programs through a text interface. The command line tool can be a built-in terminal in the WeChat developer tool.

The application's project directory is a dedicated folder configured for the application in the development tool. Different applications correspond to different project directories. The application's project directory stores resources related to the application, such as code files corresponding to various functions in the application, and resources such as pictures, videos, audio, and controls in the application.

The third-party component folder is used to store the component code files of at least one third-party page component obtained in response to the installation instruction. For example, the third-party component folder can be a node_modules folder. In the case where the development tool does not provide third-party support functions, the third-party page components in the third-party component folder cannot be directly referenced in the page code file of the application. The third-party support function is not provided in the early versions of the development tools, such as the WePY tool of version 1.x (for example, version 1.6.0, version 1.7.0), and the WeChat developer tool before version 1.02.1808300, while in the later versions of the development tools, third-party support functions can be provided. For example, in the WeChat developer tool after version 1.02.1808300, the "Build npm" function can be provided under the directory of the "Tools" tab of the menu bar. By enabling this function, the third-party page components in the third-party component folder can be directly referenced in the page code file. The page component processing method provided in the present application provides a solution for referencing third-party page components in page code files when the development tool does not provide third-party support functions.

At least one third-party page component is a third-party page component included in the third-party component library. The number of at least one third-party page component can be one or more. In the development tools of the sub-application, such as WeChat developer tools, basic page components can be provided. Basic page components such as view containers, text, carousels or others can also be custom page components created by developers in the native component folder of the program project directory of the application. Third-party page components are different from basic page components and custom page components. Third-party page components are components provided by third parties. Third-party page components can specifically be components in the ETC (Electronic Toll Collection, electronic non-stop) support function page. ETC supports functions such as ETC recharge function, ETC activation function, etc.

Component code files are code files used to render components in a page. For example, in a sub-application, component code files may include component logic code files with a file extension of ".js", component structure code files with a file extension of ".wxml", component style code files with a file extension of ".wxss", and component configuration code files with a file extension of ".json". The component code files of third-party page components also have corresponding display samples. Referring to the example diagram of component code files of third-party page components shown in Figure 3, when the component structure code file (index.wxml) corresponding to the third-party page component (steps) under the native component folder (components) under the program project directory is selected, the code content corresponding to the component structure code file can be displayed.

The display sample diagram of the third-party page component shown in Figure 4 is a sample displayed according to the component code file corresponding to the third-party page component (steps). The display samples corresponding to the third-party page components in the third-party component library can be displayed in the component sample homepage, so that the third-party page components can be displayed as display samples in a visual way, so that developers can easily determine the functions and styles of the third-party page components, and the component sample homepage can display the icons corresponding to each third-party page component. After clicking the icon corresponding to the third-party page component, the component code file of the third-party page component can be jumped to display, which is convenient for developers to use third-party page components for design.

In one embodiment, the terminal may display a command line tool associated with the development tool in the development tool for developing the application, and trigger an installation instruction for installing the third-party component library when an installation command for installing the third-party component library is detected in the command line tool.

In one embodiment, the terminal can respond to the installation instruction of installing a third-party component library, obtain the component package corresponding to the third-party component library from the third-party code platform, decompress the component package corresponding to the third-party component library, obtain the component code file of at least one third-party page component in the third-party component library, and store the obtained component code file of at least one third-party page component in the third-party component library in the third-party component folder under the program project directory of the application.

Step 204, in response to the execution instruction of the preconfigured logic file in the program project directory, a target folder matching the third-party component folder is determined in the native component folder in the program project directory by executing the logic file.

The pre-configured logic file is a file pre-configured in the program project directory to manage the third-party page components through logic code. Specifically, steps 204 to 206 can be implemented by executing the logic file. The logic file can be a JS script file written in JavaScript. The execution instruction is a computer instruction for triggering the execution of the logic file.

The native component folder is set in the program project directory and is used to store the component code files of the components. The components in the native component folder can be directly referenced in the page code files of the application's pages. The native component folder can also be called the Component folder. The target folder is a subfolder under the native component folder and can be used to store the component code files of third-party page components obtained from the third-party component folder. The folder identifier of the target folder can match the folder identifier of the third-party component folder.

In one embodiment, when there is a project configuration file in the program project directory, upon receiving a preset execution command for the logic file configuration input in the project configuration file, the terminal may trigger an execution instruction for executing the logic file.

Among them, the project configuration file is a configuration file used to describe the program project of the application. The project configuration file may include relevant information and dependencies of the program project, which can be managed and generated through the NPM tool. Relevant information of the program project includes project name, version number, author and other information. In the sub-application, the project configuration file can be called a package.json file, which is a file in JSON (JavaScript Object Notation, JS object notation) format. The preset execution command is a pre-set command for triggering the execution instruction. For example, the preset execution command can be, for example, node setting.js.

In one embodiment, the terminal may respond to an execution instruction of a preconfigured logic file under the execution program project directory, parse the logic file and then execute it, and by executing the logic file, query the folder that matches the third-party component folder from the native component folder under the program project directory to obtain the query result, and determine the target folder that matches the third-party component folder based on the query result.

Step 206, storing the component code file of at least one third-party page component in the third-party component folder into the target folder; the component code file of at least one third-party page component in the target folder is used to render the page according to the page code file and the component code file of the referenced third-party component when rendering the page of the application when the page code file of the page in the application references any third-party page component.

Among them, the page code file is used to render the page of the application. In the sub-application, each page may correspond to a page code file. The page code file may include a page logic code file, a page structure code file, a page style code file, and a page configuration code file. The page logic code file is used to control the processing logic of the page, and the file extension of this file may be ".js". The page structure code file is used to design the layout of the page, perform data binding, etc., and the file extension of this file may be ".wxml". The page style code file is used to define various style sheets used in the page, and the file extension of this file may be ".wxss". The page configuration code file is used to configure the page, and the file extension of this file may be ".json".

In one embodiment, when there is no component code file of a historically stored third-party component in the target folder, the terminal may store the component code file of at least one third-party page component of the third-party component library stored in the third-party component folder into the target folder.

In one embodiment, when there are component code files of historically stored third-party components in the target folder, the terminal may delete the component code files historically stored in the target folder, and then store the component code files of at least one third-party page component of the third-party component library stored in the third-party component folder in the target folder.

In the above-mentioned page component processing method, in response to the installation instruction, the respective component code file of at least one third-party page component is stored in the third-party component folder under the program project directory of the application, and then, in response to the execution instruction of the execution logic file, the respective component code file of at least one third-party page component in the third-party component folder is stored in the target folder; since the target folder is in the native component folder under the program project directory, the components in the native component folder are adapted to the program project, and thus, when designing the page, the third-party page component in the target folder can be referenced in the page code file of the page, and then the page can be rendered based on the component code file of the referenced third-party component when rendering the page subsequently. Therefore, without upgrading the overall code file of the application, the code file of the third-party component is stored in the target folder by executing the logic file in the program project directory, so that the third-party component can be referenced in the page code file, which reduces the consumption of operation and maintenance resources compared to the method of upgrading the overall code file of the application.

In one embodiment, step 202 includes: in response to an execution instruction of a preconfigured logic file under the execution program project directory, by executing the logic file, obtaining the path of the native component folder under the program project directory, and obtaining the folder identifier of the third-party component folder; based on the path of the native component folder, querying the native component folder for a folder that matches the folder identifier of the third-party component folder to obtain a query result; when the query result indicates that there is no folder in the native component folder that matches the folder identifier of the third-party component folder, creating a target folder in the native component folder whose folder identifier matches the folder identifier of the third-party component folder.

The path of the native component folder is used to access the native component folder. The path of the native component folder may be a file path based on a folder identifier of the native component folder. The folder identifier may be a folder name, a folder code, etc. Folder identifier matching may specifically refer to the same folder identifier.

In this embodiment, the native component folder can be accessed through the path of the native component folder, so that it can be queried whether there is a folder matching the folder identifier of the third-party component folder. If it does not exist, a target folder is created, so that a target folder can be set in the native component folder specifically corresponding to the third-party component folder, creating conditions for subsequently storing the component code files of the third-party page component in the target folder.

In one embodiment, the terminal can access the native component folder according to the path of the native component folder, obtain the folder identifier of the subfolder under the native component folder, and query the folder identifier of the subfolder for a folder that matches the folder identifier of the third-party component folder to obtain the query result.

In one embodiment, the above-mentioned page component processing method also includes: when the query result indicates that there is a folder in the native component folder that matches the folder identifier of the third-party component folder, the folder that matches the folder identifier of the third-party component folder is determined as the target folder; step 206 includes: when there is component file code in the target folder, the component file code in the target folder is deleted from the target folder; and the component code file of each third-party page component in the third-party component folder is copied to the target folder.

In this embodiment, when the query result indicates that there is a folder in the native component folder that matches the folder identifier of the third-party component folder, it means that the target folder has been created in the native component folder. At this time, the folder that matches the folder identifier of the third-party component folder is determined as the target folder without the need to create it repeatedly. After deleting the component file code existing in the target folder from the target folder, the component code file of at least one third-party page component in the third-party component folder is copied to the target folder. This can avoid the existence of duplicate component code files of third-party page components in the target folder, keep the target folder concise, and quickly update the component code files in the target folder, thereby improving the processing efficiency of component code files.

In one embodiment, when there is a component code file of a historical third-party component stored historically in the target folder, the terminal can determine the target third-party page component that matches the historical third-party component in at least one third-party page component in the third-party component folder; when the first file size of the component code file of the target third-party page component and the second file size of the component code file of the historical third-party component that matches the target third-party page component are different, after deleting the component code file of the historical third-party component in the target folder, copy the component code file of at least one third-party page component in the third-party component folder to the target folder. Among them, the file identifier of the component code file of the target third-party page component can be the same as the file identifier of the component code file of the matched historical third-party component. File identifiers include file names and file codes.

In one embodiment, when the first file size is the same as the second file size, the terminal may retain the component code file of the historical third-party component in the target folder, and copy the component code file of at least one third-party page component in the third-party component folder to the target folder.

In one embodiment, step 202 includes: in response to an installation instruction to install a third-party component library, determining a first version identifier of a component package of a third-party component library in a third-party folder under a program project directory; when it is determined through a third-party code platform that the first version identifier does not match a second version identifier of a component package of a third-party component library that was most recently updated, obtaining the component package of the third-party component library under the second version identifier from the third-party code platform, and storing the obtained component package in a third-party folder; decompressing the component package of the third-party component library under the second version identifier in the third-party folder, and storing the component code files of at least one third-party page component in the decompressed third-party component library in the third-party component folder under the program project directory of the application.

Among them, the component package is a code package formed by compressing the component code files of at least one third-party page component in the third-party component library. The first version identifier is the version identifier of the component package of the third-party component library in the third-party folder. The version identifier is used to identify the component packages of different versions of the third-party component library. Different version identifiers can indicate the update time sequence of the corresponding component packages. The version identifier can be a version number, such as V1, V2, V3, and the first version, the second version, the third version, and so on; the version identifier can also be expressed by the modification time, such as version 20240301. The second version identifier is the version identifier of the component package that was most recently updated. The first version identifier and the second version identifier do not match, which may be that the first version identifier and the second version identifier are different. The third-party folder is used to store the component packages of the third-party component library. The third-party folder can specifically be a .npm directory under the program project directory. Component packages of different version identifiers of the third-party component library can have the same component package name, so that the component package of the third-party component library can be determined in the third-party code platform.

In this embodiment, when the first version identifier of the component package of the third-party component library in the third-party folder does not match the second version identifier of the component package most recently updated in the third-party code platform, it can be determined that the component package of the third-party component library in the current third-party folder is not the latest component package. At this time, the component package with the second version identifier is obtained, and the third-party component library under the program project directory can be updated in time.

In one embodiment, the terminal can initiate a component package acquisition request to the server of the third-party code platform through the client of the third-party code platform. The server of the third-party code platform can respond to the component package acquisition request, parse the first version identifier of the component package of the third-party component library in the third-party folder under the program project directory from the component package acquisition request, and obtain the second version identifier of the component package of the third-party component library that was most recently updated in the server. When the first version identifier does not match the second version identifier, the component package of the third-party component library under the second version identifier is sent to the terminal. The client of the third-party code platform can be NPM in Node.js installed on the terminal, and the server of the third-party code platform can be a Node server.

In one embodiment, the above-mentioned page component processing method also includes the following steps: in response to a page rendering trigger event of rendering a page, obtaining a page code file of the page; when a component tag is registered for any third-party page component of at least one third-party page component under the target folder through the page configuration code file in the page code file, and the component tag is referenced through the page structure code file in the page code file, it is determined that the page code file references the third-party page component corresponding to the component tag; render the page according to the page code file and the component code file of the third-party page component corresponding to the component tag under the target folder.

The page rendering trigger event is an event that triggers the rendering of a page. The page rendering trigger event can be an automatic trigger event, for example, it is automatically triggered when staying on a preset page of the application for more than a preset time. The preset page can be, for example, a page showing a successful login, and the preset time can be 3 seconds. The page rendering trigger event can also be a manual trigger operation, for example, when clicking the icon of a sub-application in the native application, it triggers the rendering of the sub-application's homepage.

The page configuration code file is used for page configuration, and the file extension of this file can be ".json". The page structure code file is used to design the page layout, perform data binding, etc., and the file extension of this file can be ".wxml". The component tag is used to define third-party page components in the page configuration code file.

In this embodiment, the component code file of the third page component is stored in the target folder of the native component folder. By registering the component tag for the third-party page component and referencing the component tag, the third-party page component can be rendered when rendering the page, thereby improving the diversity of page display.

In one embodiment, when a component registration function identifier is identified in a page configuration code file in a page code file, and it is identified that in the function body corresponding to the component registration function identifier, the target file path of the component code file of any third-party page component in the native component folder, and the component tag for the target file path, the terminal can determine that the third-party page component corresponding to the target file path is registered with a component tag. Among them, the target file path can be a path for accessing the component code file corresponding to the third-party page component in the target folder under the native component folder. The component registration function identifier can be a component registration function name, for example, it can be usingComponents. The function body is composed of codes that define the function function.

In one embodiment, when a reference start identifier and a reference end identifier for a component tag are identified in a page structure code file in a page code file, the terminal can determine that a component tag is referenced by the page structure code file in the page code file. Among them, the reference start identifier can be composed of a reference identifier and a component tag. The reference end identifier can be composed of a reference identifier, a preset identifier and a component tag. Specifically, the reference identifier can be "< >", the component tag can be "e-step", the preset identifier can be "/", then the reference start identifier can be "<e-step>", and the reference end identifier can be "</e-step>".

In one embodiment, the step of rendering the page according to the page code file and the component code file of the third-party page component corresponding to the component tag in the target folder includes: obtaining the target attribute value assigned to the component attribute of the third-party page component corresponding to the component tag from the page structure code file of the page code file; rendering the page according to the target attribute value and the component code file of the third-party page component corresponding to the component tag in the target folder.

Among them, component attributes are used to modify components. Component attributes can be used to describe the actions, content, style, etc. displayed by the component on the page. For example, for the third-party page component steps, the attribute can be color. In the component code file, the attribute value of color can be set to the default value. The target attribute value is the value taken by the component attribute of the third-party page component in the page structure code file. For example, in the page structure code file, the target attribute value of color in the third-party page component steps can be set to #93DB70. When the page is rendered based on the component code file of the third-party page component in the target folder, the target attribute value replaces the default value of color in the component code file.

In this embodiment, when a third-party page component is referenced in a page code file, the attribute values of the component attributes in the third-party page component can be set through the page structure code file, so that the third-party page component can be personalized in the specific page, so that the rendered page can meet personalized needs.

In one embodiment, referring to the simplified flowchart of the page component processing steps as shown in FIG5 , and the timing diagram of the page component processing steps as shown in FIG6 , the above-mentioned page component processing method specifically includes the following steps.

The third-party code platform can receive and store the component package corresponding to the third-party component library. The component package may include a component code file corresponding to at least one third-party page component in the third-party component library and a component library configuration file corresponding to the third-party component library. The component library configuration file may define the component name, type, attributes and other information of at least one third-party page component in the third-party component library.

The first terminal can respond to the installation instruction of installing the third-party component library, determine the first version identification of the component package of the third-party component library in the third-party folder under the program project directory; when it is determined through the third-party code platform that the first version identification does not match the second version identification of the component package of the third-party component library that was most recently updated, obtain the component package of the third-party component library under the second version identification from the third-party code platform, and store the obtained component package in the third-party folder; decompress the component package of the third-party component library under the second version identification in the third-party folder, and store the component code file of at least one third-party page component in the decompressed third-party component library in the third-party component folder under the program project directory of the application. Among them, the first terminal can be a terminal used by the developer. The configuration of the third-party component library can be parsed through the above steps and stored in the third-party component folder of the program project directory.

The first terminal can respond to the execution instruction of the pre-configured logic file in the execution program project directory, and obtain the path of the native component folder under the program project directory and the folder identifier of the third-party component folder by executing the logic file; based on the path of the native component folder, query the folder in the native component folder that matches the folder identifier of the third-party component folder to obtain the query result.

When the query result indicates that there is a folder in the native component folder that matches the folder identifier of the third-party component folder, the first terminal may determine the folder that matches the folder identifier of the third-party component folder as the target folder; when there is component file code in the target folder, delete the component file code in the target folder from the target folder; and copy the component code file of at least one third-party page component in the third-party component folder to the target folder.

When the page code file design of the application is completed through the first terminal, the designed page code file can be applied to the second terminal. Specifically, the second terminal can obtain the page code file of the page in response to the page rendering trigger event of the rendered page; when a component tag is registered for any third-party page component in at least one third-party page component under the target folder through the page configuration code file in the page code file, and the component tag is referenced through the page structure code file in the page code file, the target attribute value assigned to the component attribute of the third-party page component corresponding to the component tag is obtained from the page structure code file of the page code file; the page is rendered according to the target attribute value and the component code file of the third-party page component corresponding to the component tag under the target folder.

Among them, when designing a page, the component call can be realized by referencing the third-party page component through the page code file. In the process of designing the page, the third-party component library in the third-party code platform can also be secondary developed and updated, so that the new third-party page component can be called when the third-party component library is reinstalled. The second terminal can be a terminal used by the user. The application can also be configured with a hot update mechanism, and when the page code file of the application is updated, it can be updated immediately on the interface of the user terminal. The front-end framework of the application can adopt frameworks such as React.js (a declarative, efficient and flexible JavaScript library for building user interfaces), Vue.js or Angular (a front-end framework for building user interfaces created by Misko Hevery and others). When designing a page, a responsive design method can be adopted, and technologies such as flow layout and elastic grid can be adopted to enable components to be adaptively displayed on devices with different screen sizes and resolutions.

It should be understood that, although the various steps in the flowcharts involved in the above-mentioned embodiments are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence according to the order indicated by the arrows. Unless there is a clear explanation in this article, the execution of these steps does not have a strict order restriction, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above-mentioned embodiments can include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily carried out in sequence, but can be executed in turn or alternately with other steps or at least a part of the steps or stages in other steps.

Based on the same inventive concept, the embodiment of the present application also provides a page component processing device for implementing the page component processing method involved above. The implementation scheme for solving the problem provided by the device is similar to the implementation scheme recorded in the above method, so the specific limitations in the one or more page component processing device embodiments provided below can refer to the limitations of the page component processing method above, and will not be repeated here.

In one embodiment, as shown in FIG. 7 , a page component processing device 700 is provided, including: a third-party component folder management module 710 and a target folder management module 720, wherein:

The third-party component folder management module 710 is used to store the component code file of at least one third-party page component in the third-party component library into the third-party component folder under the program project directory of the application program in response to the installation instruction of the third-party component library.

The target folder management module 720 is used to respond to the execution instruction of the pre-configured logic file in the execution program project directory, and determine the target folder matching the third-party component folder in the native component folder under the program project directory by executing the logic file; store the component code file of at least one third-party page component in the third-party component folder in the target folder; the component code file of at least one third-party page component in the target folder is used to render the page according to the page code file and the component code file of the referenced third-party component when rendering the page of the application program when the page code file of the page in the application program references any third-party page component.

In one embodiment, the target folder management module 720 is also used to respond to the execution instruction of the pre-configured logic file under the execution program project directory, and obtain the path of the native component folder under the program project directory and the folder identifier of the third-party component folder by executing the logic file; based on the path of the native component folder, query the folder that matches the folder identifier of the third-party component folder in the native component folder to obtain the query result; when the query result indicates that there is no folder in the native component folder that matches the folder identifier of the third-party component folder, create a target folder in the native component folder whose folder identifier matches the folder identifier of the third-party component folder.

In one embodiment, the target folder management module 720 is also used to determine the folder matching the folder identifier of the third-party component folder as the target folder when the query result indicates that there is a folder matching the folder identifier of the third-party component folder in the native component folder. When there is a component file code in the target folder, the component file code in the target folder is deleted from the target folder; and the component code file of at least one third-party page component in the third-party component folder is copied to the target folder.

In one embodiment, the third-party component folder management module 710 is also used to determine the first version identifier of the component package of the third-party component library in the third-party folder under the program project directory in response to an installation instruction for installing the third-party component library; when it is determined through the third-party code platform that the first version identifier does not match the second version identifier of the component package of the third-party component library that was most recently updated, obtain the component package of the third-party component library under the second version identifier from the third-party code platform, and store the obtained component package in the third-party folder; decompress the component package of the third-party component library under the second version identifier in the third-party folder, and store the component code file of each of at least one third-party page components in the decompressed third-party component library in the third-party component folder under the program project directory of the application.

In one embodiment, the page component processing device 700 also includes a rendering module, which is used to obtain the page code file of the page in response to a page rendering trigger event of the rendered page; when a component tag is registered for any third-party page component in at least one third-party page component under the target folder through the page configuration code file in the page code file, and the component tag is referenced through the page structure code file in the page code file, it is determined that the page code file references the third-party page component corresponding to the component tag; render the page according to the page code file and the component code file of the third-party page component corresponding to the component tag under the target folder.

In one embodiment, the rendering module is also used to obtain the target attribute value assigned to the component attribute of the third-party page component corresponding to the component tag from the page structure code file of the page code file; render the page according to the target attribute value and the component code file of the third-party page component corresponding to the component tag in the target folder.

Each module in the above-mentioned page component processing device can be implemented in whole or in part by software, hardware or a combination thereof. Each of the above-mentioned modules can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory in the computer device in the form of software, so that the processor can call and execute the operations corresponding to each of the above modules.

In one embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be shown in FIG8. The computer device includes a processor, a memory, an input/output interface, a communication interface, a display unit, and an input device. The processor, the memory, and the input/output interface are connected via a system bus, and the communication interface, the display unit, and the input device are connected to the system bus via the input/output interface. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The input/output interface of the computer device is used to exchange information between the processor and an external device. The communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner, and the wireless manner may be implemented through WIFI, a mobile cellular network, NFC (near field communication) or other technologies. When the computer program is executed by the processor, a page component processing method is implemented. The display unit of the computer device is used to form a visually visible picture, which may be a display screen, a projection device, or a virtual reality imaging device. The display screen can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device can be a touch layer covering the display screen, or a button, trackball or touchpad set on the computer device shell, or an external keyboard, touchpad or mouse.

Those skilled in the art will understand that the structure shown in FIG. 8 is merely a block diagram of a portion of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than shown in the figure, or combine certain components, or have a different arrangement of components.

In one embodiment, a computer device is further provided, including a memory and a processor, wherein a computer program is stored in the memory, and the processor implements the steps in the above method embodiments when executing the computer program.

In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the steps in the above-mentioned method embodiments are implemented.

In one embodiment, a computer program product is provided, including a computer program, which implements the steps in the above method embodiments when executed by a processor.

It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with relevant regulations.

Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to the memory, database or other medium used in the embodiments provided in this application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetoresistive random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. As an illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM). The database involved in each embodiment provided in this application may include at least one of a relational database and a non-relational database. Non-relational databases may include distributed databases based on blockchains, etc., but are not limited to this. The processor involved in each embodiment provided in this application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic device, a data processing logic device based on quantum computing, etc., but are not limited to this.

The technical features of the above embodiments may be arbitrarily combined. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

The above-described embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the present application. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the attached claims.

Claims (10)

1. A page component processing method, characterized in that the method comprises: In response to an installation instruction for installing a third-party component library, storing a component code file of at least one third-party page component in the third-party component library in a third-party component folder under a program project directory of the application; In response to an execution instruction of a preconfigured logic file under the program project directory, determining a target folder matching the third-party component folder in a native component folder under the program project directory by executing the logic file; The component code file of at least one third-party page component in the third-party component folder is stored in the target folder; the component code file of at least one third-party page component in the target folder is used to render the page according to the page code file and the component code file of the referenced third-party component when rendering the page of the application when the page code file of the page in the application references any third-party page component. 2. The method according to claim 1, characterized in that, in response to executing an execution instruction of a preconfigured logic file in the program project directory, determining a target folder matching the third-party component folder in a native component folder in the program project directory by executing the logic file comprises: In response to an execution instruction of executing a preconfigured logic file in the program project directory, the path of the native component folder in the program project directory is obtained by executing the logic file, and the folder identifier of the third-party component folder is obtained; Based on the path of the native component folder, in the native component folder, searching for a folder matching the folder identifier of the third-party component folder to obtain a query result; When the query result indicates that there is no folder in the native component folder that matches the folder identifier of the third-party component folder, a target folder whose folder identifier matches the folder identifier of the third-party component folder is created in the native component folder. 3. The method according to claim 2, characterized in that the method further comprises: When the query result indicates that there is a folder in the native component folder that matches the folder identifier of the third-party component folder, determining the folder that matches the folder identifier of the third-party component folder as the target folder; The storing the component code file of at least one third-party page component in the third-party component folder into the target folder includes: When there is a component file code in the target folder, deleting the component file code in the target folder from the target folder; Copy the component code file of at least one third-party page component in the third-party component folder to the target folder. 4. The method according to claim 1, wherein, in response to an installation instruction for installing a third-party component library, storing a component code file of at least one third-party page component in the third-party component library in a third-party component folder under a program project directory of the application program comprises: In response to an installation instruction for installing a third-party component library, determining a first version identifier of a component package of the third-party component library in a third-party folder under the program project directory; When it is determined through the third-party code platform that the first version identifier does not match the second version identifier of the component package of the most recently updated component library of the third-party component library, obtaining the component package of the third-party component library under the second version identifier from the third-party code platform, and storing the obtained component package in the third-party folder; Decompress the component package of the third-party component library under the second version identifier in the third-party folder, and store the component code files of at least one third-party page component in the third-party component library obtained by decompression in the third-party component folder under the program project directory of the application. 5. The method according to any one of claims 1 to 4, characterized in that the method further comprises: In response to a page rendering trigger event for rendering the page, obtaining a page code file of the page; When a component tag is registered for any third-party page component in at least one third-party page component under the target folder through a page configuration code file in the page code file, and the component tag is referenced through a page structure code file in the page code file, it is determined that the page code file references the third-party page component corresponding to the component tag; The page is rendered according to the page code file and the component code file of the third-party page component corresponding to the component tag in the target folder. 6. The method according to claim 5, characterized in that the rendering of the page according to the page code file and the component code file of the third-party page component corresponding to the component tag in the target folder comprises: acquiring, from the page structure code file of the page code file, a target attribute value assigned to a component attribute of a third-party page component corresponding to the component tag; The page is rendered according to the target attribute value and the component code file of the third-party page component corresponding to the component tag in the target folder. 7. A page component processing device, characterized in that the device comprises: A third-party component folder management module, configured to store a component code file of at least one third-party page component in the third-party component library in a third-party component folder under a program project directory of the application program in response to an installation instruction for installing the third-party component library; A target folder management module is used to respond to an execution instruction of a preconfigured logic file under the program project directory, determine a target folder matching the third-party component folder in a native component folder under the program project directory by executing the logic file; store a component code file of at least one third-party page component in the third-party component folder in the target folder; and a component code file of at least one third-party page component in the target folder is used to render the page according to the page code file and the component code file of the referenced third-party component when rendering the page of the application program, when the page code file of the page in the application program references any third-party page component. 8. A computer device, comprising a memory and a processor, wherein the memory stores a computer program, wherein the processor implements the steps of the method according to any one of claims 1 to 6 when executing the computer program. 9. A computer-readable storage medium having a computer program stored thereon, wherein when the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 6 are implemented. 10. A computer program product, comprising a computer program, characterized in that when the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 6 are implemented.