Component Update Method, Device, Computer Equipment and Storage Medium

By associating the new presentation layer with the original component, the target component is obtained, which solves the problem of low update efficiency of traditional UI component styles, and implements a method of quickly updating UI component styles, improving update efficiency.

CN114691172BActive Publication Date: 2025-06-17INDUSTRIAL AND COMMERCIAL BANK OF CHINA
View PDF 2 Cites 0 Cited by

Patent Information

Application Number
CN202210321901.5
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2022-03-30
Publication Date
2025-06-17
Estimated Expiration
2042-03-30

AI Technical Summary

Technical Problem

The traditional UI component style update method is inefficient and requires the entire process of development, testing and release, resulting in low update efficiency.

Method used

By obtaining the original component and the new display layer, transmitting links and hiding the interface display of the original display layer, obtaining the target display layer, and then associating the original functional layer with the target display layer, obtaining the target component.

Benefits of technology

It realizes updating the UI component style without redeveloping the target component functions, improving update efficiency, and without testing the target component functions, it can be published directly.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN114691172B_ABST
    Figure CN114691172B_ABST
Patent Text Reader

Abstract

The present application relates to a component update method, apparatus, computer device, and storage medium. It relates to the field of artificial intelligence technology. The method includes: obtaining an original component and a new display layer; the original component includes an original display layer and an original function layer; performing a transmission link between the new display layer and the original display layer, and hiding the interface display of the original display layer to obtain a target display layer; associating the original function layer with the target display layer to obtain a target component. Using this method can improve the efficiency of updating the UI component style.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

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

[0002] With the development of UI component (User Interface Module) technology, the original UI component styles often do not meet new business requirements. When facing new business requirements, developers need to update the original UI component styles.

[0003] The traditional method for updating UI component styles is that developers download the original component code and modify it according to the format of business requirements, or rewrite a UI component that meets the business requirements, so as to complete the update of UI component styles. However, whether modifying the code of the original UI component, selecting a new UI component, or rewriting a UI component, the entire process of development, testing, and release must be carried out, resulting in low efficiency in updating UI component styles. Summary of the Invention

[0004] Based on this, it is necessary to provide a component update method, apparatus, computer device, computer-readable storage medium, and computer program product for the above technical problems.

[0005] In a first aspect, this application provides a component update method. The method includes:

[0006] Obtain an original component and a new presentation layer; the original component includes an original presentation layer and an original function layer;

[0007] Transmission-link the new presentation layer and the original presentation layer, and hide the interface display of the original presentation layer to obtain a target presentation layer;

[0008] Associate the original function layer with the target presentation layer to obtain a target component.

[0009] Optionally, the transmission-linking the new presentation layer and the original presentation layer includes:

[0010] Transmission-link the new presentation layer and the original presentation layer based on the construction frameworks of the original presentation layer and the new presentation layer.

[0011] Optionally, the transmission-linking the new presentation layer and the original presentation layer based on the construction frameworks of the original presentation layer and the new presentation layer includes:

[0012] When the construction frameworks of the original display layer and the new display layer are the same, the new display layer and the original display layer are transmission-linked through a synchronous transmission link framework.

[0013] Optionally, the transmission-linking of the new display layer and the original display layer based on the construction frameworks of the original display layer and the new display layer includes:

[0014] When the construction frameworks of the original display layer and the new display layer are different, obtain a connection component;

[0015] Transmission-link the new display layer and the original display layer to the connection component respectively.

[0016] Optionally, the associating the original function layer with the target display layer to obtain a target component includes:

[0017] Associate the original function layer with the target display layer through a function layer positioning algorithm to obtain a target component.

[0018] Optionally, the method further includes:

[0019] Obtain a test instruction;

[0020] Input the test instruction into the original component to obtain an original result, and input the test instruction into the target component to obtain a target result;

[0021] When the original result is inconsistent with the target result, return to execute the step of transmission-linking the new display layer and the original display layer and hiding the interface display of the original display layer to obtain a target display layer until the original result is consistent with the target result, and output the target component corresponding to the target result that is consistent with the original result.

[0022] In a second aspect, the present application also provides a component update device. The device includes:

[0023] A first acquisition module, configured to acquire an original component and a new display layer; the original component includes an original display layer and an original function layer;

[0024] A link module, configured to transmission-link the new display layer and the original display layer and hide the interface display of the original display layer to obtain a target display layer;

[0025] An association module, configured to associate the original function layer with the target display layer to obtain a target component.

[0026] Optionally, the link module is specifically configured to:

[0027] Based on the construction framework of the original presentation layer and the construction framework of the new presentation layer, the new presentation layer and the original presentation layer are transmission-linked.

[0028] Optionally, the linking module is specifically configured to:

[0029] When the construction frameworks of the original presentation layer and the new presentation layer are the same, the new presentation layer and the original presentation layer are transmission-linked through a synchronous transmission link framework.

[0030] Optionally, the linking module is specifically configured to:

[0031] When the construction frameworks of the original presentation layer and the new presentation layer are different, obtain a connection component;

[0032] The new presentation layer and the original presentation layer are respectively transmission-linked with the connection component.

[0033] Optionally, the association module is specifically configured to:

[0034] Associate the original function layer with the target presentation layer through a function layer positioning algorithm to obtain a target component.

[0035] Optionally, the device further includes:

[0036] A second acquisition module, configured to acquire a test instruction;

[0037] An input module, configured to input the test instruction into the original component to obtain an original result, and input the test instruction into the target component to obtain a target result;

[0038] An iteration module, configured to, when the original result is inconsistent with the target result, return to execute the step of transmission-linking the new presentation layer and the original presentation layer and hiding the interface display of the original presentation layer to obtain a target presentation layer, until the original result is consistent with the target result, and output the target component corresponding to the target result consistent with the original result.

[0039] In a third aspect, the present application further provides a computer device. The computer device includes a memory and a processor, the memory stores a computer program, and when the processor executes the computer program, the following steps are implemented:

[0040] Obtain an original component and a new presentation layer; the original component includes an original presentation layer and an original function layer;

[0041] Transmit - link the new display layer and the original display layer, and hide the interface display of the original display layer to obtain a target display layer;

[0042] Associate the original function layer with the target display layer to obtain a target component.

[0043] Optionally, the step of transmit - linking the new display layer and the original display layer includes:

[0044] Based on the construction frameworks of the original display layer and the new display layer, transmit - link the new display layer and the original display layer.

[0045] Optionally, the step of, based on the construction frameworks of the original display layer and the new display layer, transmit - linking the new display layer and the original display layer includes:

[0046] When the construction frameworks of the original display layer and the new display layer are the same, transmit - link the new display layer and the original display layer through a synchronous transmission - link framework.

[0047] Optionally, the step of, based on the construction frameworks of the original display layer and the new display layer, transmit - linking the new display layer and the original display layer includes:

[0048] When the construction frameworks of the original display layer and the new display layer are different, obtain a connection component;

[0049] Transmit - link the new display layer and the original display layer with the connection component respectively.

[0050] Optionally, the step of associating the original function layer with the target display layer to obtain a target component includes:

[0051] Associate the original function layer with the target display layer through a function - layer positioning algorithm to obtain a target component.

[0052] Optionally, the method further includes:

[0053] Obtain a test instruction;

[0054] Input the test instruction into the original component to obtain an original result, and input the test instruction into the target component to obtain a target result;

[0055] In the case where the original result is inconsistent with the target result, return to execute the step of transmitting and linking the new display layer and the original display layer, and hiding the interface display of the original display layer to obtain the target display layer, until the original result is consistent with the target result, and output the target component corresponding to the target result that is consistent with the original result.

[0056] Fourthly, the present application also provides a computer-readable storage medium. The computer-readable storage medium stores a computer program thereon, and when the computer program is executed by a processor, the following steps are implemented:

[0057] Obtain an original component and a new display layer; the original component includes an original display layer and an original function layer;

[0058] Transmit and link the new display layer and the original display layer, and hide the interface display of the original display layer to obtain a target display layer;

[0059] Associate the original function layer with the target display layer to obtain a target component.

[0060] Optionally, the transmitting and linking the new display layer and the original display layer includes:

[0061] Based on the construction framework of the original display layer and the construction framework of the new display layer, transmit and link the new display layer and the original display layer.

[0062] Optionally, the transmitting and linking the new display layer and the original display layer based on the construction framework of the original display layer and the construction framework of the new display layer includes:

[0063] In the case where the construction framework of the original display layer and the construction framework of the new display layer are the same, transmit and link the new display layer and the original display layer through a synchronous transmission link framework.

[0064] Optionally, the transmitting and linking the new display layer and the original display layer based on the construction framework of the original display layer and the construction framework of the new display layer includes:

[0065] In the case where the construction framework of the original display layer and the construction framework of the new display layer are different, obtain a connection component;

[0066] Transmit and link the new display layer and the original display layer to the connection component respectively.

[0067] Optionally, the associating the original function layer with the target display layer to obtain a target component includes:

[0068] Associate the original functional layer with the target display layer through a functional layer positioning algorithm to obtain a target component.

[0069] Optionally, the method further includes:

[0070] Obtain a test instruction;

[0071] Input the test instruction into the original component to obtain an original result, and input the test instruction into the target component to obtain a target result;

[0072] In the case where the original result is inconsistent with the target result, return to execute the step of transmitting and linking the new display layer and the original display layer, and hiding the interface display of the original display layer to obtain a target display layer until the original result is consistent with the target result, and output the target component corresponding to the target result that is consistent with the original result.

[0073] In a fifth aspect, the present application further provides a computer program product. The computer program product includes a computer program, and when the computer program is executed by a processor, the following steps are implemented:

[0074] Obtain an original component and a new display layer; the original component includes an original display layer and an original functional layer;

[0075] Transmit and link the new display layer and the original display layer, and hide the interface display of the original display layer to obtain a target display layer;

[0076] Associate the original functional layer with the target display layer to obtain a target component.

[0077] Optionally, the transmitting and linking the new display layer and the original display layer includes:

[0078] Based on the construction framework of the original display layer and the construction framework of the new display layer, transmit and link the new display layer and the original display layer.

[0079] Optionally, the transmitting and linking the new display layer and the original display layer based on the construction framework of the original display layer and the construction framework of the new display layer includes:

[0080] In the case where the construction framework of the original display layer and the construction framework of the new display layer are the same, transmit and link the new display layer and the original display layer through a synchronous transmission link framework.

[0081] Optionally, the transmitting and linking the new display layer and the original display layer based on the construction framework of the original display layer and the construction framework of the new display layer includes:

[0082] When the construction frameworks of the original display layer and the new display layer are different, obtain connection components;

[0083] Transmission-link the new display layer and the original display layer to the connection components respectively.

[0084] Optionally, the associating the original functional layer with the target display layer to obtain a target component includes:

[0085] Associate the original functional layer with the target display layer through a functional layer positioning algorithm to obtain a target component.

[0086] Optionally, the method further includes:

[0087] Obtain a test instruction;

[0088] Input the test instruction into the original component to obtain an original result, and input the test instruction into the target component to obtain a target result;

[0089] When the original result is inconsistent with the target result, return to execute the step of transmission-linking the new display layer and the original display layer and hiding the interface display of the original display layer to obtain a target display layer until the original result is consistent with the target result, and output the target component corresponding to the target result that is consistent with the original result.

[0090] The above component update method, device, computer device, and storage medium obtain an original component and a new display layer; the original component includes an original display layer and an original functional layer; transmission-link the new display layer and the original display layer and hide the interface display of the original display layer to obtain a target display layer; associate the original functional layer with the target display layer to obtain a target component. By associating the new display layer with the original component to obtain a target component, it can not only update the interface display of the display layer but also continue to use the functions of the original component, without the need to re-develop the functions of the target component and without the need to test the functions of the target component, and it can be directly released, thereby improving the efficiency of updating the UI component style. Description of the Drawings

[0091] Figure 1 It is a schematic flowchart of a component update method in an embodiment;

[0092] Figure 2 It is a schematic flowchart of the step of transmission-linking the original display layer and the detailed display layer in an embodiment;

[0093] Figure 3 It is a schematic flowchart of a component update example in an embodiment;

[0094] Figure 4 is a structural block diagram of a component update device in an embodiment;

[0095] Figure 5 is an internal structure diagram of a computer device in an embodiment. Detailed implementation manners

[0096] In order to make the objectives, technical solutions and advantages of the present application clearer and more understandable, the present application will be further described in detail below with reference to 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.

[0097] The component update method provided by the embodiments of the present application can be applied to a terminal, can also be applied to a server, and can also be applied to a system including a terminal and a server, and is implemented through the interaction between the terminal and the server. Among them, the terminal may include, but is not limited to, various personal computers, laptop computers, tablet computers, etc. The terminal is used to obtain an original component and a new display layer, obtain a target display layer by transmitting and linking the new display layer with the original display layer of the original component and hiding the interface display of the original display layer; associate the target display layer with the original function layer to obtain a target component, so that when the development of the target component is completed, it is not necessary to test it and it can be directly released, thereby improving the efficiency of updating the UI component style.

[0098] In one embodiment, as Figure 1 shown, a component update method is provided. Taking the application of this method to a terminal as an example, the method includes the following steps:

[0099] Step S101, obtain an original component and a new display layer.

[0100] Among them, the original component includes an original display layer and an original function layer.

[0101] In this embodiment, the terminal selects the component to be updated in the component library according to the instruction of the user to select the component style as the original component, and then creates a new display layer according to the component style required by the user, and uses the newly created display layer as the new display layer.

[0102] The original component may be, but is not limited to, a UI component (User Interface Module), the original component includes an original display layer and an original function layer, the original display layer includes the interface display parameters of the original display layer, and the new display layer includes the interface display parameters of the new display layer. The display layer is a combination of codes for implementing the component interface display (i.e., the interface display of the front-end part of the UI component), and the function layer is a combination of codes that can implement the component functions.

[0103] The interface display of the original display layer is different from that of the new display layer, but the part of the user input instructions that can be displayed is the same. For example, the interface display of the original display layer is a rectangular amount input box, a rectangular password input box, a rectangular deposit button, and a rectangular cancel button; while the interface display of the new display layer can be an amount input box of any shape or design style, a password input box of any shape or design style, a deposit button of any shape or design style, and a cancel button of any shape or design style.

[0104] The new display layer can be constructed by, but not limited to, MVVM (Model-View-ViewModel, software architecture design pattern) development frameworks such as Vue (Vue.js, a progressive front-end framework for building user interfaces) and React (React, a front-end development framework).

[0105] Step S102: Establish a transmission link between the new display layer and the original display layer, and hide the interface display of the original display layer to obtain the target display layer.

[0106] In this embodiment, the variable acquisition module is used to acquire relevant instructions input by the user in the interface display. The interface display can be, but not limited to, an amount input box, a password input box, a submit button, a cancel button, a close button, etc. The terminal establishes a transmission link between the variable acquisition module of the new display layer and the variable acquisition module of the original display layer, sets the display parameter in the interface display parameters of the original display layer to 0 (i.e., hides the interface display of the original display layer), and sets the display parameter in the interface display parameters of the new display layer to 1 (i.e., displays the interface display of the new display layer) to obtain the target display layer. In this way, only the interface display of the new display layer is shown on the interface display of the terminal. When the user inputs an instruction at the interface display of the target display layer, the original display layer can synchronously acquire the instruction parameter. The specific transmission link steps will be described in detail later.

[0107] For example, if the interface display of the original display layer is a rectangular amount input box and the interface display of the new display layer is an oval amount input box, then the interface display of the target display layer shown on the terminal interface display is an oval amount input box.

[0108] In another embodiment, the interface display of the target display layer shown on the terminal interface display is an amount input box. When the input amount in the amount input box of the target display layer is 600, the variable acquisition module of the target display layer acquires an amount input value of 600 and synchronously assigns this value to the original display layer, that is, the variable acquisition module of the original display layer synchronously acquires an amount input value of 600.

[0109] Step S103: Associate the original function layer with the target display layer to obtain the target component.

[0110] In this embodiment, the terminal marks the original function layer as the target function layer, associates the target function layer with the target display layer to obtain a target component. When the user inputs a relevant instruction in the target display layer, the variable acquisition module of the target display layer acquires the input instruction and sends the acquired input instruction parameters to the original function layer (i.e., the target function layer). The original function layer receives the input instruction parameters and executes the operations corresponding to the input instruction parameters to obtain an instruction result. The specific association steps will be described in detail later.

[0111] For example, the interface display of the target display layer is an amount input box and a deposit button. When the user inputs an amount of 600 in the amount input box of the target display layer and clicks the deposit button, the variable acquisition module of the target display layer acquires the amount input value with a value of 600 and sends the numerical parameter and the deposit instruction parameter to the original function layer. After receiving the numerical parameter and the deposit instruction parameter, the original function layer sends an "OPEN" instruction to the control device of the deposit port to open the deposit area; and sends a "standby memory card information rewriting" instruction to the control device of the card insertion area to make the card insertion area standby for the memory card information rewriting operation.

[0112] Based on the above solution, by developing a new display layer and associating the new display layer with the original component to obtain a target component, the target component can still continue to use the functions of the original component without having to test the functions of the target component and can be directly released, thus improving the efficiency of updating the UI component style.

[0113] Optionally, establishing a transmission link between the new display layer and the original display layer includes: establishing a transmission link between the new display layer and the original display layer based on the construction frameworks of the original display layer and the new display layer.

[0114] In this embodiment, the terminal acquires the construction frameworks of the original display layer and the new display layer and determines whether the construction frameworks of the original display layer and the new display layer are the same. The terminal can determine the linking method between the new display layer and the original display layer according to the judgment result.

[0115] Based on the above solution, by associating the new display layer with the original component to obtain a target component, it is possible to update the interface display of the display layer and continue to use the functions of the original component without having to re-develop the functions of the target component and without having to test the functions of the target component and can be directly released, thus improving the efficiency of updating the UI component style.

[0116] Optionally, based on the construction frameworks of the original presentation layer and the new presentation layer, the new presentation layer and the original presentation layer are transmission-linked, including: when the construction frameworks of the original presentation layer and the new presentation layer are the same, the new presentation layer and the original presentation layer are transmission-linked through a synchronous transmission link framework.

[0117] In this embodiment, when the construction frameworks of the original presentation layer and the new presentation layer are the same, the variable acquisition module of the original presentation layer and the variable acquisition module of the new presentation layer are transmission-linked through a synchronous transmission link framework. So that when the variable acquisition module of the new presentation layer obtains a user instruction, the original presentation layer synchronously obtains the user instruction through the synchronous transmission link framework. The synchronous transmission link framework is the same as the construction frameworks of the original presentation layer and the new presentation layer. The synchronous construction framework is a framework with a transmission link function, which can be, but is not limited to, MVVM development frameworks such as Vue and React. The synchronous transmission link framework establishes a transmission link relationship between the original presentation layer and the new presentation layer. This transmission link relationship is a monitoring mechanism used to monitor the input information of the new presentation layer and synchronously transmit the input information to the original presentation layer.

[0118] For example, if the construction framework of the new presentation layer is the Vue framework and the construction framework of the original presentation layer is the Vue framework, then the synchronous construction framework is also the Vue framework. The terminal transmission-links the new presentation layer and the original presentation layer through the Vue framework. Since the construction frameworks of the new presentation layer and the original presentation layer are the same, after the new presentation layer and the original presentation layer are transmission-linked, when the user inputs an instruction at the interface display of the new presentation layer, the variable acquisition module of the new presentation layer obtains the input instruction. The synchronous transmission link framework monitors the input instruction and synchronously transmits the input instruction to the variable acquisition module of the original presentation layer, that is, the original presentation layer and the new presentation layer synchronously obtain the input instruction.

[0119] Based on the above solution, the presentation layer and the original presentation layer are transmission-linked through a synchronous transmission link framework to ensure that the obtained target presentation layer can synchronously obtain user instructions with the original presentation layer.

[0120] Optionally, as Figure 2 shown, based on the construction frameworks of the original presentation layer and the new presentation layer, the new presentation layer and the original presentation layer are transmission-linked, including:

[0121] Step S201, when the construction frameworks of the original presentation layer and the new presentation layer are different, obtain a connection component.

[0122] Step S202, transmission-link the new presentation layer and the original presentation layer to the connection component respectively.

[0123] In this embodiment, when the construction frameworks of the original display layer and the new display layer of the terminal are different, the connection component can be obtained and the connection component is respectively transmission-linked with the new display layer and the original display layer. The connection component can be established by editing through, but not limited to, js (Java Script, a scripting language running on browsers). The connection component can implement two functions. One is that it can connect two display layers constructed by different construction frameworks. The other is to monitor the changes of the two display layers in real time. When a user instruction is obtained in one of the display layers, the connection component synchronously assigns the user instruction to the other display layer.

[0124] For example, for this patent, the connection component respectively transmission-links the new display layer and the original display layer, and monitors the changes of the new display layer in real time. When the user inputs an instruction at the interface display of the new display layer, the variable acquisition module of the new display layer acquires the input instruction. The connection component monitors the user instruction and synchronously transmits the user instruction to the variable acquisition module of the original display layer, so that the original display layer and the new display layer synchronously acquire the user instruction.

[0125] Based on the above solution, the terminal transmission-links the new display layer and the original display layer by creating a new connection component, so as to ensure that the new display layer and the original display layer can be normally transmission-linked.

[0126] Optionally, associating the original function layer with the target display layer to obtain a target component includes: associating the original function layer with the target display layer through a function layer positioning algorithm to obtain a target component.

[0127] In this embodiment, the terminal acquires the identification code of the original function layer, and through the function layer positioning algorithm, locates the identification code of the original function layer to the target function layer area of the target component, and brings the original function layer into the target function layer area, so that the original function layer is associated with the target display layer to obtain a target component.

[0128] The function layer positioning algorithm can be, but not limited to, the absolute positioning algorithm of CSS (Cascading Style Sheets). The function layer positioning algorithm can locate and associate the original function layer with the target display layer, so that the relevant instructions input by the user to the target display layer can be sent to the original function layer and executed through the original function layer, thereby obtaining an instruction result.

[0129] Based on the above solution, the original function layer is associated with the target display layer through the function layer positioning algorithm, so as to ensure that the target component can use the functions of the original component.

[0130] Optionally, the method further includes: obtaining a test instruction; inputting the test instruction into the original component to obtain an original result, and inputting the test instruction into the target component to obtain a target result; in the case where the original result is inconsistent with the target result, return to execute the step of transmitting and linking the new display layer and the original display layer, and hiding the interface display of the original display layer to obtain a target display layer, until the original result is consistent with the target result, and output the target component corresponding to the target result that is consistent with the original result.

[0131] In this embodiment, in the test environment, the terminal obtains a test instruction input by the user, and inputs the test instruction into the original component to obtain an original result; then, inputs the test instruction into the target component to obtain a target result. The terminal determines whether the original result is consistent with the target result. In the case where the original result is inconsistent with the target result, return to step S102 to merge the original component with the new display layer again until the target result of the obtained target component is consistent with the original result of the original component. The terminal uses the target component corresponding to the target result that is consistent with the original result of the original component as the final target component.

[0132] For example, the test instruction obtained by the terminal is to download file A. Input the test instruction into the original component, and obtain the downloaded file A; input the test instruction into the target component, and obtain the downloaded file A'. The terminal compares file A and file A'. In the case where file A and file A' are the same, the terminal outputs the target component; in the case where file A and file A' are different, the terminal returns to step S102 to merge the original component with the new display layer until file A and file A' are the same, and outputs the target component corresponding to file A' that is the same as file A.

[0133] It can be understood that the above test process is different from the test process in the development, test, and release processes. Compared with the test after downloading the original component source code and modifying it according to the format of the business requirements, or re-writing a UI component that meets the business requirements, the test time is short, the test steps are simple, the test efficiency is high, and the accuracy of the obtained target component is high.

[0134] Based on the above solution, by testing whether the target component can use the original function layer of the original component and whether the target component can obtain the same result as the original component, the executability of the target component is improved.

[0135] This application also provides an example of component update, as Figure 3 shown, and the specific processing process includes the following steps:

[0136] Step S301, obtain the original component and the new display layer.

[0137] Among them, the original component includes an original display layer and an original function layer.

[0138] Step S302: Determine whether the construction frameworks of the original display layer and the new display layer are the same.

[0139] If they are the same, execute Step S303; if not, execute Step S304.

[0140] Step S303: Transmit-link the new display layer and the original display layer through a synchronous transmission link framework, and hide the interface display of the original display layer to obtain a target display layer.

[0141] Step S304: Obtain a connection component.

[0142] Step S305: Transmit-link the new display layer and the original display layer with the connection component respectively, and hide the interface display of the original display layer to obtain a target display layer.

[0143] Step S306: Associate the original function layer with the target display layer through a function layer positioning algorithm to obtain a target component.

[0144] Step S307: Obtain a test instruction.

[0145] It can be understood that the test instruction is limited to the instructions that can be recognized and received by the interface displays of each target front-end component.

[0146] Step S308: Input the test instruction into the original component to obtain an original result, and input the test instruction into the target component to obtain a target result.

[0147] Step S309: Determine whether the original result is consistent with the target result.

[0148] If they are the same, then execute Step S310; if not, then execute Step S302.

[0149] Step S310: Output the target component.

[0150] It should be understood that although the steps in the flowcharts involved in the above-described embodiments are sequentially shown according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless there is a clear description in this article, the execution of these steps has no strict order limit, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above-described embodiments may include multiple steps or multiple stages. These steps or stages are not necessarily executed at the same moment, but can be executed at different moments. The execution order of these steps or stages is not necessarily sequential, but can be executed alternately or in turn with at least a part of other steps or steps or stages in other steps.

[0151] Based on the same inventive concept, an embodiment of the present application further provides a component update device for implementing the component update method involved above. The solution provided by this device for solving problems is similar to the solution described in the above method. Therefore, the specific limitations in one or more of the following component update device embodiments can refer to the limitations on the component update method in the above text and will not be repeated here.

[0152] In one embodiment, as Figure 4 shown, a component update device is provided, including: a first acquisition module 410, a link module 420, and an association module 430, where:

[0153] The first acquisition module 410 is configured to acquire an original component and a new display layer;

[0154] Among them, the original component includes an original display layer and an original function layer;

[0155] The link module 420 is configured to perform transmission linking on the new display layer and the original display layer, and hide the interface display of the original display layer to obtain a target display layer;

[0156] The association module 430 is configured to associate the original function layer with the target display layer to obtain a target component.

[0157] Optionally, the link module 420 is specifically configured to:

[0158] Based on the construction frameworks of the original display layer and the new display layer, perform transmission linking on the new display layer and the original display layer.

[0159] Optionally, the link module 420 is specifically configured to:

[0160] When the construction frameworks of the original display layer and the new display layer are the same, perform transmission linking on the new display layer and the original display layer through a synchronous transmission linking framework.

[0161] Optionally, the link module 420 is specifically configured to:

[0162] When the construction frameworks of the original display layer and the new display layer are different, acquire a connection component;

[0163] Perform transmission linking on the new display layer and the original display layer with the connection component respectively.

[0164] Optionally, the association module 430 is specifically configured to:

[0165] Associate the original function layer with the target display layer through a function layer positioning algorithm to obtain a target component.

[0166] Optionally, the device further includes:

[0167] A second acquisition module, configured to acquire a test instruction;

[0168] An input module, configured to input the test instruction into the original component to obtain an original result, and input the test instruction into the target component to obtain a target result;

[0169] An iteration module, configured to, when the original result is inconsistent with the target result, return to execute the step of transmitting and linking the new display layer and the original display layer, and hiding the interface display of the original display layer to obtain a target display layer, until the original result is consistent with the target result, and output the target component corresponding to the target result that is consistent with the original result.

[0170] Each module in the above data processing device can be implemented in whole or in part by software, hardware, and their combination. The above modules can be embedded in the processor of the computer device in hardware form or independent of it, or stored in the memory of the computer device in software form, so that the processor can call and execute the operations corresponding to the above modules.

[0171] In one embodiment, a computer device is provided. The computer device can be a terminal, and its internal structure diagram can be as Figure 5 shown. The computer device includes a processor, a memory, a communication interface, a display screen, and an input device connected through a system bus. Among them, 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 communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner, and the wireless manner can be implemented through WIFI, a mobile cellular network, NFC (Near Field Communication), or other technologies. When the computer program is executed by the processor, it implements a data processing method. The display screen of the computer device 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 covered on the display screen, or a button, a trackball, or a touchpad provided on the housing of the computer device, or an external keyboard, touchpad, or mouse, etc.

[0172] Those skilled in the art can understand that Figure 5 the structure shown in

[0173] In an embodiment, a computer device is provided, including a memory and a processor. A computer program is stored in the memory. When the processor executes the computer program, the following steps are implemented:

[0174] A first acquisition module, configured to acquire an original component and a new display layer; the original component includes an original display layer and an original function layer;

[0175] A link module, configured to perform transmission link between the new display layer and the original display layer, and hide the interface display of the original display layer to obtain a target display layer;

[0176] An association module, configured to associate the original function layer with the target display layer to obtain a target component.

[0177] Optionally, the link module is specifically configured to:

[0178] Based on the construction framework of the original display layer and the construction framework of the new display layer, perform transmission link between the new display layer and the original display layer.

[0179] Optionally, the link module is specifically configured to:

[0180] When the construction frameworks of the original display layer and the new display layer are the same, perform transmission link between the new display layer and the original display layer through a synchronous transmission link framework.

[0181] Optionally, the link module is specifically configured to:

[0182] When the construction frameworks of the original display layer and the new display layer are different, acquire a connection component;

[0183] Perform transmission link between the new display layer, the original display layer, and the connection component respectively.

[0184] Optionally, the association module is specifically configured to:

[0185] Associate the original function layer with the target display layer through a function layer positioning algorithm to obtain a target component.

[0186] Optionally, the device further includes:

[0187] A second acquisition module, configured to acquire a test instruction;

[0188] An input module, configured to input the test instruction into the original component to obtain an original result, and input the test instruction into the target component to obtain a target result;

[0189] An iterative module, configured to, when the original result is inconsistent with the target result, return to execute the step of performing a transmission link between the new display layer and the original display layer, and hiding the interface display of the original display layer to obtain a target display layer, until the original result is consistent with the target result, and output a target component corresponding to the target result that is consistent with the original result.

[0190] In an embodiment, a computer-readable storage medium is provided, on which a computer program is stored, and when the computer program is executed by a processor, the following steps are implemented:

[0191] A first acquisition module, configured to acquire an original component and a new display layer; the original component includes an original display layer and an original function layer;

[0192] A link module, configured to perform a transmission link between the new display layer and the original display layer, and hide the interface display of the original display layer to obtain a target display layer;

[0193] An association module, configured to associate the original function layer with the target display layer to obtain a target component.

[0194] Optionally, the link module is specifically configured to:

[0195] Based on the construction framework of the original display layer and the construction framework of the new display layer, perform a transmission link between the new display layer and the original display layer.

[0196] Optionally, the link module is specifically configured to:

[0197] When the construction framework of the original display layer and the construction framework of the new display layer are the same, perform a transmission link between the new display layer and the original display layer through a synchronous transmission link framework.

[0198] Optionally, the link module is specifically configured to:

[0199] When the construction framework of the original display layer and the construction framework of the new display layer are different, acquire a connection component;

[0200] Perform a transmission link between the new display layer, the original display layer, and the connection component respectively.

[0201] Optionally, the association module is specifically configured to:

[0202] Associate the original function layer with the target display layer through a function layer positioning algorithm to obtain a target component.

[0203] Optionally, the device further includes:

[0204] A second acquisition module, configured to acquire test instructions;

[0205] An input module, configured to input the test instructions into the original component to obtain an original result, and input the test instructions into the target component to obtain a target result;

[0206] An iteration module, configured to, when the original result is inconsistent with the target result, return to execute the step of transmitting and linking the new display layer and the original display layer, and hiding the interface display of the original display layer to obtain a target display layer, until the original result is consistent with the target result, and output the target component corresponding to the target result that is consistent with the original result.

[0207] In an embodiment, a computer program product is provided, including a computer program, which when executed by a processor implements the following steps:

[0208] A first acquisition module, configured to acquire an original component and a new display layer; the original component includes an original display layer and an original function layer;

[0209] A link module, configured to transmit and link the new display layer and the original display layer, and hide the interface display of the original display layer to obtain a target display layer;

[0210] An association module, configured to associate the original function layer with the target display layer to obtain a target component.

[0211] Optionally, the link module is specifically configured to:

[0212] Transmit and link the new display layer and the original display layer based on the construction framework of the original display layer and the construction framework of the new display layer.

[0213] Optionally, the link module is specifically configured to:

[0214] When the construction frameworks of the original display layer and the new display layer are the same, transmit and link the new display layer and the original display layer through a synchronous transmission link framework.

[0215] Optionally, the link module is specifically configured to:

[0216] When the construction frameworks of the original display layer and the new display layer are different, acquire a connection component;

[0217] Transmit and link the new display layer and the original display layer with the connection component respectively.

[0218] Optionally, the association module is specifically configured to:

[0219] Associate the original functional layer with the target display layer through a functional layer positioning algorithm to obtain a target component.

[0220] Optionally, the device further includes:

[0221] A second acquisition module, configured to acquire a test instruction;

[0222] An input module, configured to input the test instruction into the original component to obtain an original result, and input the test instruction into the target component to obtain a target result;

[0223] An iteration module, configured to, when the original result is inconsistent with the target result, return to execute the step of performing a transmission link between the new display layer and the original display layer, and hiding the interface display of the original display layer to obtain a target display layer, until the original result is consistent with the target result, and output the target component corresponding to the target result that is consistent with the original result.

[0224] 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 for analysis, stored data, displayed data, etc.) involved in this application are all information and data that have been authorized by the user or fully authorized by all parties.

[0225] Those of ordinary skill in the art can understand that all or part of the processes in the methods of the above embodiments can be completed by instructing relevant hardware through a computer program. 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 methods. Among them, any reference to a memory, database, or other medium used in the embodiments provided in the present application can include at least one of non-volatile and volatile memories. 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. By way of illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM), etc. The databases involved in the embodiments provided in the present application can include at least one of relational databases and non-relational databases. Non-relational databases can include distributed databases based on blockchain, etc., without limitation. The processors involved in the embodiments provided in the present application can be general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic devices, data processing logics based on quantum computing, etc., without limitation.

[0226] The technical features of the above embodiments can be combined arbitrarily. For the sake of brevity of description, 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, it should be considered as the scope recorded in this specification.

[0227] The above-described embodiments merely represent several implementation manners of the present application. The description is relatively specific and detailed, but it should not be construed as a limitation on the patent scope of the present application. It should be noted that for those of ordinary skill in the art, without departing from the concept of the present application, several modifications and improvements can still be made, and these all belong to the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the appended claims.

Claims

1. A component update method, characterized in that, The method includes: Obtaining an original component and a new display layer; the original component includes an original display layer and an original function layer; wherein, the interface display of the original display layer is different from that of the new display layer, and the interface display includes at least one of an amount input box, a password input box, a deposit button, a submit button, a cancel button, and a close button; Transmitting and linking the new display layer and the original display layer, and hiding the interface display of the original display layer to obtain a target display layer; Associating the original function layer with the target display layer to obtain a target component; The transmitting and linking the new display layer and the original display layer includes: Based on the construction framework of the original display layer and the construction framework of the new display layer, transmitting and linking the new display layer and the original display layer; The transmitting and linking the new display layer and the original display layer based on the construction framework of the original display layer and the construction framework of the new display layer includes: When the construction frameworks of the original display layer and the new display layer are the same, transmitting and linking the new display layer and the original display layer through a synchronous transmission link framework; the synchronous transmission link framework establishes a transmission link relationship between the original display layer and the new display layer, and the transmission link relationship is used to monitor the input information of the new display layer and synchronously transmit the input information to the original display layer; When the construction frameworks of the original display layer and the new display layer are different, obtaining a connection component; Transmitting and linking the new display layer and the original display layer to the connection component respectively; the connection component is used to connect two display layers constructed by different construction frameworks and monitor the changes of the two display layers in real time. When a user instruction is obtained in one display layer, the user instruction is synchronously assigned to the other display layer.

2. The method according to claim 1, characterized in that, The associating the original function layer with the target display layer to obtain a target component includes: Associating the original function layer with the target display layer through a function layer positioning algorithm to obtain a target component.

3. The method according to claim 1, characterized in that, The method further includes: Obtaining a test instruction; Inputting the test instruction into the original component to obtain an original result, and inputting the test instruction into the target component to obtain a target result; When the original result is inconsistent with the target result, return to execute the step of transmitting and linking the new display layer and the original display layer, and hiding the interface display of the original display layer to obtain a target display layer until the original result is consistent with the target result, and output the target component corresponding to the target result consistent with the original result.

4. A component update device, characterized in that, The device includes: A first obtaining module, configured to obtain an original component and a new display layer; the original component includes an original display layer and an original function layer; A linking module, configured to transmit and link the new display layer and the original display layer, and hide the interface display of the original display layer to obtain a target display layer; An association module, configured to associate the original functional layer with the target display layer to obtain a target component; The linking module is specifically configured to perform a transmission link between the new display layer and the original display layer based on the construction framework of the original display layer and the construction framework of the new display layer; The linking module is specifically configured to, when the construction frameworks of the original display layer and the new display layer are the same, perform a transmission link between the new display layer and the original display layer through a synchronous transmission link framework; the synchronous transmission link framework establishes a transmission link relationship between the original display layer and the new display layer, and the transmission link relationship is used to monitor the input information of the new display layer and synchronously transmit the input information to the original display layer; The linking module is specifically configured to, when the construction frameworks of the original display layer and the new display layer are different, obtain a connection component; perform a transmission link between the new display layer, the original display layer, and the connection component respectively; the connection component is used to connect two display layers constructed by different construction frameworks and to monitor the changes of the two display layers in real time, and when a user instruction is obtained in one of the display layers, synchronously assign the user instruction to the other display layer.

5. A computer device, including a memory and a processor, the memory stores a computer program, characterized in that, When the processor executes the computer program, the steps of the method according to any one of claims 1 to 3 are implemented.

6. A computer-readable storage medium, on which a computer program is stored, 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 3 are implemented.

7. A computer program product, including 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 3 are implemented.

Citation Information

Patent Citations

  • User interface component generation method and device

    CN108052365A

  • Form processing method and apparatus, and storage medium

    CN111736835A