A page generation method, device, equipment and storage medium

Abstract

An embodiment of the present application provides a page generation method, device, equipment, and storage medium. The method includes: obtaining component code of a first component and first framework code of a first framework on which the component code depends, encapsulating the component code and the first framework code to obtain a second component, thereby generating a target page according to the second component and obtaining second framework code of a second framework, and displaying the target page based on the second framework, thereby enriching the applicable scenarios of UI components.

Description

Technical Field

[0001] This application relates to the field of computer technology, and particularly to a page generation method, apparatus, device, and storage medium. Background Art

[0002] Currently, when developing front-end World Wide Web (web) pages, it is usually necessary to write dedicated user interface (UI) components according to the business and use these UI components in each web page. For example, if web page A needs a UI component for selecting a date, at this time, developers can develop this UI component and apply it to web page A. If this UI component is developed based on the front-end framework React and web page A is also developed based on the front-end framework React, then this UI component can be introduced into web page A. However, if web page A is developed based on the front-end framework VUE, then this UI component cannot be introduced into web page A. In other words, the web page and the UI component need to use the same front-end framework, which results in a single applicable scenario for the UI component and cannot be applied to more application scenarios. Summary of the Invention

[0003] Embodiments of this application provide a page generation method, apparatus, device, and storage medium, which enrich the applicable scenarios of UI components.

[0004] In a first aspect, a page generation method is provided, and the method includes:

[0005] Obtain the component code of a first component and the first framework code of a first framework on which the component code depends; the component code includes at least one of the following: the style code corresponding to the first component, the behavioral logic code corresponding to the first component;

[0006] Package the component code and the first framework code to obtain a second component;

[0007] Obtain the second framework code of a second framework; where the first framework is different from the second framework;

[0008] Generate a target page according to the second component and the second framework code;

[0009] Display the target page based on the second framework.

[0010] In a second aspect, a page generation apparatus is provided, and the page generation apparatus includes a first acquisition unit, a packaging unit, a second acquisition unit, a generation unit, and a display module.

[0011] A first acquisition unit, configured to acquire the component code of a first component and the first framework code of a first framework on which the component code depends; the component code includes at least one of the following: the style code corresponding to the first component, the behavioral logic code corresponding to the first component;

[0012] An encapsulation unit, configured to encapsulate the component code and the first framework code to obtain a second component;

[0013] A second acquisition unit, configured to acquire the second framework code of a second framework; wherein, the first framework is different from the second framework;

[0014] A generation unit, configured to generate a target page according to the second component and the second framework code;

[0015] A display module, configured to display the target page based on the second framework.

[0016] In a third aspect, a page generation device is provided, which is characterized by including a processor, a memory, a communication interface, and one or more programs, wherein the one or more programs are stored in the memory and are generated to be executed by the processor to execute the instructions of the steps in any method of the first aspect.

[0017] In a fourth aspect, a computer-readable storage medium is provided, and the computer-readable storage medium is used to store a computer program, and the stored computer program is executed by a processor to implement the method described in any one of the first aspect.

[0018] It can be seen that in the above technical solution, by encapsulating the component code of the first component and the first framework code of the first framework on which the component code depends, a second component is obtained. Furthermore, a target page can be generated according to the second component and the second framework code of the second framework obtained, and the target page is displayed based on the second framework, thereby realizing that the component code depending on the first framework code of the first framework can run together with the second framework code of the second framework different from the first framework and generate a target page. In other words, the UI component using the first framework code can run in the target page using the second framework code, making the applicable scenarios of the UI component richer and also reducing the development and maintenance costs of the UI component. Description of the Drawings

[0019] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the drawings in the following description are only some embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0020] Figure 1AA flowchart of a page generation method provided by an embodiment of the present application;

[0021] Figure 1B A flowchart of another page generation method provided by an embodiment of the present application;

[0022] Figure 2 A schematic diagram of a target page element corresponding to a second component provided by an embodiment of the present application;

[0023] Figure 3 A page generation device provided by an embodiment of the present application;

[0024] Figure 4 A schematic diagram of the structure of a page generation device provided by an embodiment of the present application. Detailed implementation manners

[0025] Next, the technical solutions in the embodiments of the present application will be clearly and completely described with reference to the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present application without creative efforts shall fall within the protection scope of the present application.

[0026] Currently, when developing a front-end Web page, it is usually necessary to write a dedicated UI component according to the business and use the UI component in each Web page. For example, Web page A requires a UI component for selecting a date. At this time, a developer can develop the UI component and apply the UI component to Web page A. If the UI component is developed based on the front-end framework React and Web page A is also developed based on the front-end framework React, then the UI component can be introduced into Web page A. However, if Web page A is developed based on the front-end framework VUE, then the UI component cannot be introduced into Web page A, and it is necessary to re-develop a UI component for selecting a date based on the front-end framework VUE. In other words, the Web page and the UI component need to use the same front-end framework, which results in a single applicable scenario for the UI component, inability to be applicable to more application scenarios, and high component development and maintenance costs.

[0027] To solve the above technical problems, the present application proposes a page generation method, and the embodiments of the present application will be introduced in detail below.

[0028] It should be understood that the technical solution of the embodiment of the present application can be applied to an electronic device, which can be a mobile phone, a tablet computer, a wearable device (such as a watch), a vehicle-mounted device, an augmented reality (AR) / virtual reality (VR) device, a laptop computer, an ultra-mobile personal computer (UMPC), a personal computer (PC), a netbook, a personal digital assistant (PDA), etc. mobile terminals, Internet of Things (IoT) devices. The embodiment of the present application does not impose any restrictions on the specific type of the electronic device.

[0029] In addition, in the present application, a compiler (or compilation chain tool) etc. may also run on the electronic device, which is not restricted herein.

[0030] See Figure 1A or Figure 1B , such as Figure 1A or Figure 1B As shown, the method includes but is not limited to the following steps:

[0031] 101. The electronic device obtains the component code of the first component and the first framework code of the first framework on which the component code depends.

[0032] Among them, the first component is a UI component. The UI component is a graphical user interface (GUI) control for a Web page. It can be understood that in the present application, the first component may include form components or other components, which are not restricted herein. The form components may include at least one of: check boxes, radio boxes, drop-down selection boxes, etc. Of course, the form components may also include form buttons, such as submit buttons, reset buttons, general buttons, etc.

[0033] Exemplarily, the first component is a time selection component. Among them, the time selection component may be a DataPicker class implemented using the first framework code.

[0034] Optionally, the component code includes at least one of the following: the style code corresponding to the first component, the behavioral logic code corresponding to the first component. Among them, the style code is used to implement the style when the first component is displayed on the user interface. For example, the style code can be implemented through cascading style sheets (CSS). It can be understood that the style can be information such as size, center point, resolution, color, etc. The behavioral logic code is used to implement the functions that can be triggered by the user's operations on the content of the first component after the content of the first component is displayed on the user interface. For example, if the first component is a time selection component, running the behavioral logic code of the date selection component can obtain the time information selected by the selection operation when detecting the selection operation on the time selection control in the time selection component, and can implement the display function of the time information, etc. Among them, the behavioral logic code can be implemented through JS (JavaScript), for example.

[0035] Optionally, the first framework can be one of the following: the front-end framework React, the front-end framework VUE, the front-end framework Angular, the front-end framework Angular. The first framework code can be the framework code corresponding to the front-end framework React, the framework code corresponding to the front-end framework VUE, the framework code corresponding to the front-end framework Angular, or the framework code corresponding to the front-end framework Svelte, etc., which is not limited here.

[0036] 102. The electronic device encapsulates the component code and the first framework code to obtain a second component.

[0037] Among them, the second component is a web component. A web component is a set of specifications and application programming interfaces (APIs) defined by the W3C, which allows the creation of custom elements and then the use of them in web pages.

[0038] Optionally, step 102 may include: the electronic device obtains a module bundling tool; the electronic device uses the module bundling tool to encapsulate the component code and the first framework code to obtain a second component. Among them, the module bundling tool can be Rollup, for example. It can be understood that the electronic device can use Rollup to bundle the component code and the first framework code to obtain the second component in the form of a code file, and this code file can be a JS file.

[0039] It can be seen that in the above technical solution, by obtaining the module bundling tool, the electronic device can use the module bundling tool to encapsulate the component code and the first framework code to obtain a second component, and further, the component code can still rely on the first framework code to run, avoiding the problem that the component code cannot run properly in the target page using the second framework code.

[0040] 103. The electronic device obtains the second framework code of the second framework.

[0041] Optionally, the second framework may be one of the following: front-end framework React, front-end framework VUE, front-end framework Angular, front-end framework Angular. The second framework code may be the framework code corresponding to the front-end framework React, the framework code corresponding to the front-end framework VUE, the framework code corresponding to the front-end framework Angular, or the framework code corresponding to the front-end framework Svelte, etc., which is not limited herein.

[0042] Optionally, the first framework is different from the second framework. That the first framework is different from the second framework can be understood as: the versions of the first framework code and the second framework code are different, or the types of the first framework code and the second framework code are different, which is not limited herein.

[0043] Exemplarily, the version of the first framework code is higher than or lower than the version of the second framework code. For example, the version of the first framework code is version 16, and the version of the second framework code is version 17.

[0044] Also exemplarily, the first framework code is the framework code corresponding to the front-end framework React, and the second framework code may be the framework code corresponding to the front-end framework VUE; or, the first framework code is the framework code corresponding to the front-end framework VUE, and the second framework code may be the framework code corresponding to the front-end framework React; or, the first framework code is the framework code corresponding to the front-end framework Angular, and the second framework code may be the framework code corresponding to the front-end framework React; or, the first framework code is the framework code corresponding to the front-end framework React, and the second framework code may be the framework code corresponding to the front-end framework Angular, etc.

[0045] 104. The electronic device generates a target page according to the second component and the second framework code.

[0046] Among them, the target page is a web page. It can be understood that the target page may include the target page elements corresponding to the second component and other page elements except the target page elements. For example, refer to Figure 2 , Figure 2 is a schematic diagram of the target page elements corresponding to a second component provided by an embodiment of the present application. For example, Figure 2As shown, the target page element may include a time selection control, and the time selection control may include a year selection control, a month selection control, etc. The user can select the year, month, etc., which is not limited here. A control is any visible control or element that can be seen on the user interface. For example, controls such as pictures, input boxes, text boxes, buttons, labels, etc. Some of these controls respond to user operations. For example, clicking on the year selection control can select the year.

[0047] It should be noted that in this application, the target page element corresponding to the second component runs depending on the first framework code of the first framework, and other page elements except this target page element run depending on the second framework code of the second framework. It can be understood that the source file code corresponding to the target page can be implemented through hyper text markup language (HTML), cascading style sheets (CSS), JS, etc.

[0048] Optionally, step 104 may include: the electronic device calls the second component during the process of loading the target page element to render the target page element; the electronic device depends on the second framework code during the process of loading other page elements to render other page elements.

[0049] Among them, the second component is mounted on the target page in the form of a preset tag. The preset tag is a custom element specified by the web component, such as <data-picker>。It is understandable that developers can define custom elements, such as <data-picker>。

[0050] Exemplarily, the way for the second component to be mounted on the target page in the form of a preset tag can be seen in the following code:

[0051]

[0052] It can be understood that when the second component is mounted on the target page in the form of a preset tag, for the target page, the preset tag is the same as the native element of the hyper text markup language (HTML) corresponding to the target page, and developers can directly introduce and use the second component in the form of a tag. In other words, when <data-picker>When mounted on the target page, the electronic device can pass through in the target page by <data-picker>a label to load the DataPicker class, that is, the electronic device can pass through in the target page by <data-picker>A tag is used to load the target page element. For other page elements, the electronic device uses native HTML elements to load other page elements.

[0053] Optionally, the electronic device loads the target page element, including: the electronic device loads the target page element in a preset tag form.

[0054] Optionally, the electronic device calls the second component to render the target page element, including: during the process of calling the second component, the electronic device obtains the style information corresponding to the target page element from the component code; the electronic device depends on the first framework code to render the target page element according to the style information.

[0055] Among them, the style information may include, for example, at least one of the following: size information, font color, font size, etc.

[0056] Optionally, the electronic device obtains the style information corresponding to the target page element from the component code, including: the electronic device depends on the first framework code to parse the component code to obtain the style information corresponding to the target page element. That is, the electronic device depends on the first framework code to parse the component code to obtain the style information corresponding to the target page element from the style code corresponding to the first component.

[0057] It can be seen that in the above technical solution, the electronic device can call the second component to render the target page element during the process of loading the target page element, and depend on the second framework code to render other page elements during the process of loading other page elements, that is, it realizes that the UI components using the first framework code can run in the page using the second framework code, making the applicable scenarios of the UI components richer and also reducing the development and maintenance costs of the UI components.

[0058] Optionally, this solution may further include: when the electronic device monitors that the style information corresponding to the preset tag changes, it processes the target page element in a preset manner; among them, the electronic device processes the target page element in a preset manner, including: the electronic device obtains the changed style information corresponding to the preset tag; the electronic device calls the second component to re-render the target page element depending on the first framework code and according to the changed style information corresponding to the preset tag. It can be understood that developers can preset the specific manner of processing the target page element when monitoring that the style information corresponding to the preset tag changes. Secondly, when developers re-adjust the style information corresponding to the preset tag, for the electronic device, it can process the target page element in a preset manner when monitoring that the style information corresponding to the preset tag changes.

[0059] Among them, the style information corresponding to the preset tag may include, for example, at least one of the following: position information, size information, stacking order information, type information, etc.

[0060] Exemplarily, when <data-picker>When using a label to load the DataPicker, the style information corresponding to the preset label can be referred to the following code:

[0061] <data-picker style=”position:absolute;top:352.2px;left:280px;z-index:200;”type=”date”value=””>

[0062] #shadow-root(open)

[0063]

[0064] Combined with this code, it can be seen that the position information is absolute, and the size information can include the height information of the target page element, that is, top: 352.2px. The size information can also include the offset information between the left margin boundary of the target page element and the left boundary of its containing block, that is, left: 280px. The stacking order information can include the stacking order set by the z-index property, that is, z-index: 200. Among them, the z-index property sets the stacking order of the target page element. The type information can include the form element type that returns the date field.

[0065] It can be seen that in the above technical solution, when the style code corresponding to the second component is changed alone, the second component can still run normally in the target page using the second framework code.

[0066] Optionally, the component code includes a time label, the target page includes the target page element corresponding to the second component, and the target page element includes a time selection control and a time display area; after the electronic device displays the target page based on the second framework, this solution further includes:; the electronic device responds to the selection operation on the time selection control, and obtains the time information selected by the selection operation; the electronic device replaces the time attribute information of the time label with the time information, and calls the second component to load the time information onto the time display area for display.

[0067] Among them, the electronic device calls the second component to load the time information onto the time display area for display, which can include: the electronic device runs the behavior logic code by calling the second component to load the time information onto the time display area for display.

[0068] It can be seen that in the above technical solution, after the user makes a time selection on the target page, the electronic device can respond to the selection operation on the time selection control and obtain the time information selected by the selection operation, so that the time attribute information of the time label can be replaced with the time information, and the second component can be called to load the time information onto the time display area for display. In other words, in the case where the second component runs normally in the target page using the second framework code, the adjustment of the time information can be achieved by calling the second component.

[0069] See Figure 3 , Figure 3 This application provides an embodiment of a page generation device. The page generation device 300 may include a first acquisition unit 301, a packaging unit 302, a second acquisition unit 303, a generation unit 304, and a display unit 305. The device according to the embodiment of the present invention may be disposed in an electronic device.

[0070] Optionally, the first acquisition unit 301 is configured to acquire the component code of the first component and the first framework code of the first framework on which the component code depends; the component code includes at least one of the following: the style code corresponding to the first component, the behavior logic code corresponding to the first component; the packaging unit 302 is configured to package the component code and the first framework code to obtain a second component; the second acquisition unit 303 is configured to acquire the second framework code of the second framework; wherein, the first framework is different from the second framework; the generation unit 304 is configured to generate a target page according to the second component and the second framework code; the display unit 305 is configured to display the target page based on the second framework.

[0071] Optionally, when packaging the component code and the first framework code to obtain a second component, the packaging unit 302 is specifically configured to acquire a module packaging tool; and use the module packaging tool to package the component code and the first framework code to obtain a second component.

[0072] Optionally, the target page includes target page elements corresponding to the second component and other page elements except the target page elements. When generating the target page according to the second component and the second framework code, the generation unit 304 is specifically configured to call the second component during the process of loading the target page elements to render the target page elements; and depend on the second framework code during the process of loading the other page elements to render the other page elements.

[0073] Optionally, the second component is mounted on the target page in a preset tag form; when loading the target page elements, the generation unit 304 is specifically configured to load the target page elements in a preset tag form.

[0074] Optionally, when calling the second component to render the target page elements, the generation unit 304 is specifically configured to obtain the style information corresponding to the target page elements from the component code during the process of calling the second component; and depend on the first framework code to render the target page elements according to the style information.

[0075] Optionally, when obtaining the style information corresponding to the target page elements from the component code, the generation unit 304 is specifically configured to depend on the first framework code to parse the component code to obtain the style information corresponding to the target page elements.

[0076] Optionally, the page generation device further includes a processing unit 306, configured to process a target page element in a preset manner when it is monitored that the style information corresponding to a preset tag changes; wherein, when processing the target page element in the preset manner, the processing unit 306 is specifically configured to obtain the changed style information corresponding to the preset tag through a first obtaining unit 301; and call a second component to re-render the target page element depending on the first framework code and according to the changed style information corresponding to the preset tag.

[0077] Optionally, the component code includes a time tag; the target page includes a target page element corresponding to a second component, and the target page element includes a time selection control and a time display area; after the target page is displayed based on a second framework, the first obtaining unit 301 is configured to obtain the time information selected by a selection operation in response to a selection operation on the time selection control; and the display unit 305 is configured to replace the time attribute information of the time tag with the time information through the processing unit 306, and call the second component to load the time information onto the time display area for display.

[0078] For the specific implementation of each unit in the embodiments of the present invention, reference may be made to the description of the relevant content in the foregoing embodiments. The technical effects achieved are the same as those in the foregoing embodiments and will not be elaborated herein.

[0079] See Figure 4 , Figure 4 It is a schematic structural diagram of a page generation device provided by an embodiment of the present application. The page generation device may be an electronic device. The page generation device at least includes a processor 401, a communication interface 402, and a memory 403. In one embodiment, the processor 401, the communication interface 402, and the memory 403 may be connected through a bus or other means. In the embodiment of the present application, the connection through the bus is taken as an example. In one embodiment, the processor 401 (or the Central Processing Unit (CPU)) is the computing core and control core of the page generation device. It can parse various instructions in the page generation device and process various data of the page generation device. For example, the CPU can be used to parse the power-on and power-off instructions sent by the user to the page generation device and control the page generation device to perform power-on and power-off operations. Another example is that the CPU can transmit various interaction data between the internal structures of the page generation device, and so on. The communication interface 402 may include a standard wired interface and a wireless interface (such as WI-FI, a mobile communication interface, etc.) in one embodiment. Under the control of the processor 401, it can be used to send and receive data. The communication interface 402 can also be used for the transmission and interaction of internal data of the page generation device. The memory 403 (Memory) is the memory device in the page generation device, used to store programs and data. It can be understood that the memory 403 here can include both the built-in memory of the page generation device and, of course, the extended memory supported by the page generation device. The memory 403 provides a storage space, and the operating system of the page generation device is stored in this storage space, which may include but is not limited to: Android system, iOS system, Windows Phone system, etc. The present application does not make any limitations on this.

[0080] In the embodiment of the present application, the processor 401 performs the following operations by running the executable program code in the memory 403:

[0081] Obtain the component code of the first component and the first framework code of the first framework on which the component code depends; the component code includes at least one of the following: the style code corresponding to the first component, the behavior logic code corresponding to the first component;

[0082] Package the component code and the first framework code to obtain a second component;

[0083] Obtain the second framework code of the second framework; wherein, the first framework is different from the second framework;

[0084] Generate a target page according to the second component and the second framework code;

[0085] Display the target page based on the second framework.

[0086] In one embodiment, when encapsulating component code and first framework code to obtain a second component, the processor 401 specifically performs the following operations by running the executable program code in the memory 403:

[0087] Obtain a module packaging tool;

[0088] Use the module packaging tool to encapsulate the component code and the first framework code to obtain a second component.

[0089] In one embodiment, the target page includes target page elements corresponding to the second component and other page elements other than the target page elements. When generating the target page according to the second component and the second framework code, the processor 401 specifically performs the following operations by running the executable program code in the memory 403:

[0090] Call the second component during the process of loading the target page elements to render the target page elements;

[0091] Depend on the second framework code during the process of loading other page elements to render other page elements.

[0092] In one embodiment, the second component is mounted on the target page in a preset tag form. When loading the target page elements, the processor 401 specifically performs the following operations by running the executable program code in the memory 403:

[0093] Load the target page elements in a preset tag form.

[0094] In one embodiment, when calling the second component to render the target page elements, the processor 401 specifically performs the following operations by running the executable program code in the memory 403:

[0095] During the process of calling the second component, obtain the style information corresponding to the target page elements from the component code;

[0096] Depend on the first framework code to render the target page elements according to the style information.

[0097] In one embodiment, when obtaining the style information corresponding to the target page elements from the component code, the processor 401 specifically performs the following operations by running the executable program code in the memory 403:

[0098] Depend on the first framework code to parse the component code to obtain the style information corresponding to the target page elements.

[0099] In one embodiment, the processor 401 also performs the following operations by running the executable program code in the memory 403:

[0100] When it is monitored that the style information corresponding to the preset tag changes, process the target page element in a preset manner;

[0101] Among them, processing the target page element in a preset manner includes:

[0102] Obtain the changed style information corresponding to the preset tag;

[0103] Call the second component to re-render the target page element depending on the first framework code and according to the changed style information corresponding to the preset tag.

[0104] In one embodiment, the component code includes a time tag, the target page includes the target page element corresponding to the second component, and the target page element includes a time selection control and a time display area; after the target page is displayed based on the second framework, the processor 401 further performs the following operations by running the executable program code in the memory 403:

[0105] In response to a selection operation on the time selection control, obtain the time information selected by the selection operation;

[0106] Replace the time attribute information of the time tag with the time information, and call the second component to load the time information onto the time display area for display.

[0107] For the specific implementation of the aforementioned processor 401, reference may be made to the description of the relevant content in the foregoing embodiments. The technical effects achieved by it are the same as those of the foregoing embodiments, and will not be elaborated herein.

[0108] The embodiments of the present application further provide a computer-readable storage medium, in which a computer program is stored, and the computer program is adapted to be loaded and executed by a processor to perform the page generation method in the foregoing method embodiments.

[0109] The embodiments of the present application further provide a computer program product or a computer program, the computer program product or the computer program includes computer instructions, and the computer instructions are stored in a computer-readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the foregoing page generation method.

[0110] It should be noted that, for the foregoing method embodiments, for the sake of simple description, they are all expressed as a series of action combinations. However, those skilled in the art should know that the present application is not limited by the described action sequence, because according to the present application, some steps may be in other sequences or performed simultaneously. Secondly, those skilled in the art should also know that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily essential to the present application.

[0111] The steps in the method of the embodiment of the present application can be adjusted, combined, and deleted according to actual needs.

[0112] The modules in the device of the embodiment of the present application can be combined, divided, and deleted according to actual needs.

[0113] Those of ordinary skill in the art can understand that all or part of the steps in the various methods of the above embodiments can be completed by instructing relevant hardware through a program, and this program can be stored in a computer-readable storage medium. The readable storage medium can include: a flash drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disc, etc.

[0114] The above-disclosed is only a preferred embodiment of the present application. Of course, the scope of rights of the present application cannot be limited thereby. Those of ordinary skill in the art can understand all or part of the processes of implementing the above embodiments, and the equivalent changes made according to the claims of the present application still fall within the scope covered by the application.

Claims

1. A page generation method, characterized in that, The method includes: Obtaining the component code of the first component and the first framework code of the first framework on which the component code depends; the component code includes at least one of the following: the style code corresponding to the first component, the behavioral logic code corresponding to the first component; Encapsulating the component code and the first framework code to obtain a second component, where the second component is a web component; Obtaining the second framework code of the second framework; wherein, the first framework is different from the second framework; Generating a target page according to the second component and the second framework code; the second component is mounted on the target page in the form of a preset tag, and the preset tag is consistent with the native element of the hypertext markup language corresponding to the target page. The target page includes the target page elements corresponding to the second component and other page elements except the target page elements. The target page elements depend on the first framework code to run, and the other page elements depend on the second framework code to run; Loading the target page elements in the form of the preset tag; When it is monitored that the style information corresponding to the preset tag changes, obtaining the changed style information corresponding to the preset tag; Invoking the second component to re-render the target page elements depending on the first framework code and according to the changed style information corresponding to the preset tag; Displaying the target page based on the second framework.

2. The method according to claim 1, wherein The encapsulating the component code and the first framework code to obtain a second component includes: Obtaining a module bundling tool; Using the module bundling tool to encapsulate the component code and the first framework code to obtain the second component.

3. The method according to claim 1, wherein The generating a target page according to the second component and the second framework code includes: Invoking the second component during the process of loading the target page elements to render the target page elements; Depending on the second framework code during the process of loading the other page elements to render the other page elements.

4. The method according to claim 3, wherein The invoking the second component to render the target page elements includes: During the process of invoking the second component, obtaining the style information corresponding to the target page elements from the component code; Depending on the first framework code to render the target page elements according to the style information.

5. The method according to claim 4, characterized in that, The obtaining the style information corresponding to the target page elements from the component code includes: Depending on the first framework code to parse the component code to obtain the style information corresponding to the target page elements.

6. The method according to claim 1, wherein The component code includes a time tag; the target page includes the target page elements corresponding to the second component, and the target page elements include a time selection control and a time display area; After displaying the target page based on the second framework, the method further includes: In response to a selection operation on the time selection control, obtaining the time information selected by the selection operation; Replacing the time attribute information of the time tag with the time information, and invoking the second component to load the time information onto the time display area for display.

7. A page generation device, characterized in that, Comprising a processor, a memory, a communication interface, and one or more programs, wherein the one or more programs are stored in the memory and are generated to be executed by the processor to execute the steps in the method according to any one of claims 1-6.

8. A computer-readable storage medium, characterized in that, The computer-readable storage medium is used to store a computer program, and the stored computer program is executed by a processor to implement the method according to any one of claims 1-6.

9. A computer program product comprising computer instructions, characterized in that, The computer instructions are stored in a computer-readable storage medium and are adapted to be read and executed by a processor of a computer device, so that the computer device executes the method according to any one of claims 1-6.

Images