Form display method and related device

Abstract

The invention provides a form display method and a related device, and the method comprises the steps: determining a form item control corresponding to each form item according to the attribute of each form item in a to-be-displayed form; then, establishing a mapping relationship between the type of each form item and the control of each form item; then, determining a target component tree according to the mapping relation and the attribute of each form item; then, in response to a form display request, determining a loading state of the to-be-displayed form; and finally, according to the loading state, calling a form item skeleton screen component from the target component tree for rendering, and displaying the to-be-displayed form matched with the loading state. According to the method, the skeleton screen display effect consistent with the form can be automatically presented, and form rendering and skeleton rendering can be seamlessly switched by constructing the target component tree, so that the user experience is greatly improved.

Description

Technical Field

[0001] The present application relates to the technical field of Internet page processing, and in particular to a form display method and related devices. Background Art

[0002] Skeleton Screen, also known as loading placeholder, shows the approximate structure of the page to the user before the page data is loaded, and then displays the data content of the page after the data request is returned, thus replacing it. This is often used for pages with consistent content structure, such as article lists and news dynamic lists. Its core purpose is to give users instant and instructive visual feedback before the page data is loaded, so as to improve the user experience and reduce the uncertainty and impatience of users during the waiting process.

[0003] At present, it is generally possible to develop adaptive skeleton screen layout components for different forms, but it is necessary to configure adaptive skeleton screen components for each interface to be displayed, and the amount of development code is too large, resulting in low efficiency. Summary of the invention

[0004] In view of this, the present application provides a form display method and related devices, which can automatically present a skeleton screen display effect consistent with the form, and by constructing a target component tree, form rendering and skeleton rendering can be seamlessly switched, greatly improving the user experience.

[0005] In a first aspect, an embodiment of the present application provides a form display method, the method comprising:

[0006] Determine the form item control corresponding to each form item according to the attribute of each form item in the form to be displayed, wherein each form item control includes a form item skeleton screen component, and each form item skeleton screen component is determined according to the attribute of the corresponding form item;

[0007] Establishing a mapping relationship between the type of each form item and each form item control;

[0008] Determine a target component tree according to the mapping relationship and the attributes of each form item;

[0009] In response to a form display request, determining a loading state of the form to be displayed;

[0010] According to the loading state, the form item skeleton screen component is called from the target component tree for rendering, and the to-be-displayed form matching the loading state is displayed.

[0011] In a second aspect, an embodiment of the present application provides a form display device, the device comprising:

[0012] A control unit, used to determine a form item control corresponding to each form item according to the attribute of each form item in the form to be displayed, wherein each form item control includes a form item skeleton screen component, and each form item skeleton screen component is determined according to the attribute of the corresponding form item;

[0013] A mapping unit, used to establish a mapping relationship between the type of each form item and each form item control;

[0014] A component tree unit, used to determine a target component tree according to the mapping relationship and the attributes of each form item;

[0015] A loading unit, configured to determine a loading state of the form to be displayed in response to a form display request;

[0016] A rendering unit is used to call the form item skeleton screen component from the target component tree for rendering according to the loading state, and display the to-be-displayed form that matches the loading state.

[0017] In a third aspect, an embodiment of the present application provides an electronic device, 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 configured to be executed by the processor, and the program includes instructions for executing the steps of any method in the first aspect of the embodiment of the present application.

[0018] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program for electronic data exchange, wherein the computer program enables a computer to execute part or all of the steps described in any method of the first aspect of the embodiment of the present application.

[0019] In a fifth aspect, an embodiment of the present application provides a computer program product, wherein the computer program product includes a non-transitory computer-readable storage medium storing a computer program, and the computer program is operable to cause a computer to execute some or all of the steps described in any method of the first aspect of the embodiment of the present application. The computer program product may be a software installation package.

[0020] It can be seen that through the above-mentioned form display method and related devices, first, according to the attributes of each form item in the form to be displayed, the form item control corresponding to each form item is determined, wherein each form item control includes a form item skeleton screen component, and each form item skeleton screen component is determined according to the attributes of the corresponding form item; then, a mapping relationship between the type of each form item and each form item control is established; then, a target component tree is determined according to the mapping relationship and the attributes of each form item; then, in response to a form display request, the loading state of the form to be displayed is determined; finally, according to the loading state, the form item skeleton screen component is called from the target component tree for rendering, and the form to be displayed that matches the loading state is displayed. The skeleton screen display effect consistent with the form can be automatically presented, and by constructing the target component tree, the form rendering and skeleton rendering can be seamlessly switched, which greatly improves the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without paying any creative work.

[0022] Figure 1 A system architecture diagram of a form display method provided in an embodiment of the present application;

[0023] Figure 2 A first display schematic diagram of a form to be displayed provided in an embodiment of the present application;

[0024] Figure 3 A second display schematic diagram of a form to be displayed provided in an embodiment of the present application;

[0025] Figure 4 A third display schematic diagram of a form to be displayed provided in an embodiment of the present application;

[0026] Figure 5 A flowchart of a form display method provided in an embodiment of the present application;

[0027] Figure 6 A flowchart of another form display method provided in an embodiment of the present application;

[0028] Figure 7 A block diagram of the functional units of a form display device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0029] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0030] The terms "first", "second", etc. in the specification and claims of this application and the above-mentioned drawings are used to distinguish different objects, rather than to describe a specific order. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not limited to the listed steps or units, but optionally includes steps or units that are not listed, or optionally includes other steps or units inherent to these processes, methods, products or devices.

[0031] It should be understood that the term "and / or" in this article is only a description of the association relationship of associated objects, indicating that there can be three relationships. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. In addition, the character " / " in this article indicates that the associated objects before and after are in an "or" relationship. The "plurality" appearing in the embodiments of the present application refers to two or more.

[0032] In the embodiments of the present application, "at least one item" or similar expressions refer to any combination of these items, including any combination of single items or plural items, and refer to one or more, and multiple refers to two or more. For example, at least one item of a, b, or c can represent the following seven situations: a, b, c, a and b, a and c, b and c, a, b, and c. Among them, each of a, b, and c can be an element or a set containing one or more elements.

[0033] The "connection" that appears in the embodiments of the present application refers to various connection methods such as direct connection or indirect connection to achieve communication between devices, and the embodiments of the present application do not impose any limitations on this.

[0034] Reference to "embodiments" herein means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present application. The appearance of the phrase in various locations in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0035] The following is an explanation of the relevant contents, concepts, meanings, technical issues, technical solutions, beneficial effects, etc. involved in the embodiments of the present application.

[0036] 1. Related terms

[0037] Forms are mainly responsible for data collection in web pages. A form can include three basic components: 1) Form tags: This contains the URL of the CGI program used to process form data and the method of submitting data to the server. 2) Form fields: This includes text boxes, password boxes, hidden fields, multi-line text boxes, check boxes, radio buttons, drop-down selection boxes, and file upload boxes. 3) Form buttons: This includes submit buttons, reset buttons, and general buttons; these are used to transmit data to the CGI script on the server or cancel input. Form buttons can also be used to control other processing tasks that define processing scripts.

[0038] Skeleton Screen: It is a user experience design pattern that is mainly used to improve the user perception of a web page or application when loading content. This technology displays a simplified page structure before the page data is actually loaded. This structure is usually composed of gray or other light-colored block elements, which roughly outline the content layout of the final page, such as the position and size of buttons, pictures, and text areas. These placeholder elements are often accompanied by micro-motion effects, giving users a visual feedback that the content is loading and will be displayed soon.

[0039] 2. Application scenarios and electronic equipment.

[0040] 1. Application scenarios.

[0041] The embodiments of the present application can be applied to the following application scenarios, including but not limited to: application verification, form-based information collection, form-based information processing, form-based information input, etc. No specific limitation is made here.

[0042] 2. Electronic equipment.

[0043] The electronic device in the embodiment of the present application may be a portable electronic device that also includes other functions such as a personal digital assistant and / or a form display function, such as a mobile phone, a tablet computer, a wearable electronic device with a wireless communication function (such as a smart watch), etc. Exemplary embodiments of portable electronic devices include but are not limited to portable electronic devices equipped with an IOS system, an Android system, a Microsoft system, or other operating systems. The above-mentioned portable electronic device may also be other portable electronic devices, such as a laptop computer (Laptop), etc. It should also be understood that in some other embodiments, the above-mentioned electronic device may not be a portable electronic device, but a desktop computer, a server, etc.

[0044] 3. Example description.

[0045] See also Figure 1 , Figure 1 This is a system architecture diagram of a form display method provided in an embodiment of the present application. Figure 1 As shown, the electronic device 100 includes a processor 101 , a memory 102 , and a communication bus 103 for connecting the processor 101 and the memory 102 .

[0046] In some possible implementations, the memory 102 includes but is not limited to random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM) or portable read-only memory (CD-ROM), and the memory 102 is used to store the program code executed by the electronic device 100 and the transmitted data.

[0047] In some possible implementations, the electronic device 100 further includes a communication interface for receiving and sending data.

[0048] In some possible implementations, the processor 101 may be one or more central processing units (CPUs). When the processor 101 is a central processing unit (CPU), the central processing unit (CPU) may be a single-core central processing unit (CPU) or a multi-core central processing unit (CPU).

[0049] In some possible implementations, the processor 101 may be a baseband chip, a chip, a central processing unit (CPU), a general-purpose processor, a DSP, an ASIC, an FPGA or other programmable logic device, a transistor logic device, a hardware component or any combination thereof.

[0050] In a specific implementation, the processor 101 in the electronic device 100 is used to execute the program instructions 111 stored in the memory 102 to execute the form display method in the embodiment of the present application.

[0051] Among them, first, according to the attributes of each form item in the form to be displayed, the form item control corresponding to each form item is determined, wherein each form item control includes a form item display component and a form item skeleton screen component, and each form item skeleton screen component is determined according to the attributes of the corresponding form item; then, a mapping relationship between the type of each form item and each form item control is established; then, a target component tree is determined according to the mapping relationship and the attributes of each form item; then, in response to a form display request, the loading state of the form to be displayed is determined; finally, according to the loading state, the form item skeleton screen component or the form item display component is called from the target component tree for rendering, and the form to be displayed that matches the loading state is displayed. The skeleton screen display effect consistent with the form can be automatically presented, and the target component tree is constructed at the same time, so that the form rendering and skeleton rendering can be seamlessly switched, which greatly improves the user experience.

[0052] It should be noted that the specific implementation of each operation can adopt the corresponding description of the method embodiment shown below. The electronic device 100 can be used to execute the method embodiment described below in this application, which will not be described in detail.

[0053] 3. A form display method

[0054] In the prior art, generating a skeleton screen for each form requires the front-end developer to manually write code to configure each form item of the form, but this requires manual configuration of each form item during development, which results in high development costs.

[0055] Alternatively, use a webpack plug-in to automatically generate a skeleton screen page. For example, the page skeleton screen webpack plug-in page-skeleton-webpack-plugin can automatically generate a skeleton screen page. However, the effect of using this plug-in to generate the skeleton screen is too different from the actual form rendering effect, and the user experience is not good.

[0056] To solve the above problems, the embodiments of the present application provide a form display method and related devices, which do not require manual writing or configuration of skeleton screen code, greatly reducing development costs. At the same time, by defining form item controls, consistency between skeleton screen components and form item display components is achieved, ensuring a better user experience during display. By passing the loading status through the component tree, form rendering and skeleton rendering can be switched seamlessly, greatly improving the user experience.

[0057] The technical solutions, beneficial effects, concepts, etc. involved in the embodiments of the present application are described in detail below.

[0058] 1. The data of the form to be displayed.

[0059] In order to display the form and present a skeleton screen effect consistent with the form, the embodiment of the present application needs to first obtain the data of the form to be displayed. First, the data of the form to be displayed is introduced. The data of the form to be displayed may include the configuration of the form to be displayed and the attributes of each form item.

[0060] (1) Configuration of the form to be displayed.

[0061] Among them, the configuration of the form to be displayed may include the following properties: form type, form initial value, initial value request function, request parameters, processing request response body, number of form item columns (how many form items are displayed in one row), submission area configuration, opening element (the element that opens the pop-up window or drawer), pop-up window properties, drawer properties, other form properties, etc.

[0062] Specifically, the submission area configuration may include the following attributes: submit button text, submit button attributes, cancel button text, cancel button attributes, reset button text, reset button attributes, alignment reverse (left alignment or right alignment), etc.

[0063] (2) The properties of each form item.

[0064] The attributes of form items may include two categories: one is common attributes that will not change with changes in values ​​of other form items; the other is dynamic attributes that will change with changes in values ​​of other form items.

[0065] Among them, common attributes may include: field name (required, unique identifier of form item), label (display name of form item), form item type (string, determines which form item control to use for rendering), prompt content (a specific icon such as a question mark icon will be displayed next to the label), form item initial value, optional items, optional item request function (such as ajax request function encapsulated by axios, a network request library based on promise), request response body, number of grids for form items, number of columns occupied by form items, dependent fields, and field update function. Specifically, after the field name of a dependent field changes, the dynamic configuration function will be re-run to achieve linkage. The field update function is similar to the dependent field. This method can define whether the dynamic configuration function needs to be re-run.

[0066] For example, form item types can include:

[0067] Single-line text box ( <input type＝"text"> ): Users can enter a single line of text information here.

[0068] Password input box ( <input type＝"password"> ): Used to enter the password. The input content will be masked to increase security.

[0069] Multiple-select box ( <input type＝"checkbox">): Allows multiple options to be selected at the same time.

[0070] Radio button ( <input type＝"radio"> ): In a group of radio buttons, only one option can be selected.

[0071] File upload selection box ( <input type＝"file"> ): Used to upload files.

[0072] Normal button and submit button ( <input type＝"button"> or <input type＝"submit"> ): A normal push button is used to perform some action, while a submit button is used to submit form data.

[0073] Image Submit Button and Reset Button: Image Submit Button ( <input type＝"image"> ) and the reset button ( <input type＝"reset"> ) are used to submit the form as an image and restore the form data to its initial state.

[0074] Hidden fields ( <input type＝"hidden"> ): Contains information in a form that does not require user intervention, but will be sent with the form when it is submitted.

[0075] Specific types of input boxes: such as mailboxes ( <input type＝"email"> )、Website( <input type＝"url"> ),number( <input type＝"number"min＝"XX"max＝"XX"step＝"XX"> ),slider(<inputtype="range"min=""max=""step="" / > ) and the search box ( <input type＝"search"> ), which provide specific user input methods or restrictions. These form item types can be used flexibly in form design according to specific needs to meet different data collection and processing needs.

[0076] Among them, dynamic attributes may include: optional request parameters (changes in request parameters will trigger re-requests for the optional request function), custom form controls, custom skeleton screens, form item control attributes (form item validation rules), whether to hide form items, form control attributes, etc. Dynamic attributes can be configured directly, and dynamic function generation is also supported. The first parameter of the function can be a form instance of a form component based on the React component library, which is used to generate dynamic configuration.

[0077] 2. Processing of the configuration of the display form.

[0078] Among them, the form type and form content area of ​​the form to be displayed can be determined according to the configuration of the form to be displayed. The form type may include ordinary type, pop-up type and drawer type, etc. The ordinary type may be a regular form, the pop-up type may be a form with a pop-up display page, and the drawer type may be a form with a drawer display page. For example, the pop-up type is a form type with a content layer suspended above the basic content, and the drawer type form is a form type that places the form under a drawer carrier, and the drawer will slide out from any side of the screen. Different types of form types may have different types of form initial structures.

[0079] Among them, the corresponding initial form structure can be determined according to the form type. Specifically, the first initial form structure corresponding to the ordinary type can be determined; the second initial form structure corresponding to the pop-up type can be determined; and the third initial form structure corresponding to the drawer type can be determined. By parsing the form data to determine the form type and then the corresponding initial form structure, when the form to be displayed is subsequently displayed, the initial form of the form that conforms to the form can be rendered and displayed, so that the subsequent display process is performed on the initial form of the form, ensuring that the skeleton screen display effect and the form display effect conform to the type of the form, and improving the user experience.

[0080] Among them, a form container can be generated in the form content area according to the initial structure of the form. The form container can adopt a responsive layout. The responsive layout requires a parent as a layout container to cooperate with the child elements to achieve the change effect. The principle is to change the size of the layout container through media queries on different screens, and then change the arrangement and size of the child elements inside, so as to achieve different page layouts and style changes on different screens. The layout structure presented by the form container is implemented by the grid layout component row component and col component.

[0081] Specifically, the grid layout component row is used to set the layout style of each group of col in the entire row. When props.type is 'flex', it means that the entire row adopts flex layout. On the basis of flex layout, props.justify affects the horizontal arrangement of each col element through the justify-content style; props.align affects the vertical alignment of each col element through the align-items style. props.gutter is used to set the spacing of each col element, and the spacing unit can be 'px' or 'rem'. The row component supports configuring props.gutter in the form of an object, such as {xs, sm, md, lg, xl, xxl}. Among them, xs is a screen below 576px; sm is a screen size of 576-768px; md is a screen size of 768-992px; lg is a screen size of 992-1200px; xl is a screen size of 1200-1600px; xxl is a screen size of 1600px or above.

[0082] In terms of responsive processing, the row component can be implemented with the help of the enquire.js library. For example, if the props.gutter is configured with the {md:8,lg:16} object, then when the screen size is less than 768px, the spacing of each col element needs to be adjusted from 16px to 8px. The row component implements this scenario by using the enquire.js library to bind the listening function in the componentDidMount lifecycle, so that when the screen size changes, the current screen state of state.screen will also be updated accordingly; then in the render phase, the getGutter method obtains the col element spacing gutter under the current screen size, and injects the gutter into the col component with the help of the create-react-context library.

[0083] The col component mainly uses style classes to set the size and offset of the col element. For example, when the props.offset property is configured to 4, the ant-col-xs-offset-4, ant-col-sm-offset-4, ant-col-md-offset-4, ant-col-lg-offset-4, ant-col-xl-offset-4, ant-col-xll-offset-4 style classes will be added accordingly. Therefore, the logic of the col component is mainly to convert the property props into a style class, and the focus of its implementation is still on the less style file. Of course, the spacing gutter of each col element is passed in by the row component. RowContext is created through the create-react-context library, that is, data is passed through the context attribute, but only the col component can access it.

[0084] Through the grid layout component, a layout structure of one row and multiple columns can be realized. In order to make up for the defect of not being able to wrap lines directly, an empty form item display component can also be used to take up space. When the number of grids reaches 24, a line break can be realized. The number of grids can be calculated based on the number of form item columns in the configuration of the form to be displayed, or the number of columns occupied by the form item in the properties of the form item. The number of form item grids = 24 / the number of form item columns*the number of columns occupied by the form item.

[0085] It can be seen that by parsing the configuration of the form to be displayed to determine the form type, and then determining the initial structure of the form and the form container, the initial structure of the form and the form container can be used as the basic rendering components required to display the form to be displayed, so that when the form to be displayed needs to be displayed later, the basic rendering component can be directly called to render the main structure of the form, so that subsequent rendering is performed on the basis of the main structure of the form and the corresponding form container, ensuring that the skeleton screen display effect and the form display effect are in line with the type of the form, thereby improving the user experience.

[0086] In a possible embodiment, the form label area and the form button area can also be determined according to the configuration of the form to be displayed. The form label area is generally the form name area in the upper left corner of the form, and the form button area can include a form submission button area, a form return button area, etc. This part does not belong to the content of the form item, so the skeleton screen component can be set separately.

[0087] For the form label area, a universal label skeleton screen component can be used. The height of the universal label skeleton screen component is a fixed preset height. The width of the universal label skeleton screen component can be adjusted according to the width of the form label area so that the width of the universal label skeleton screen component can adapt to the width of the label area.

[0088] For example, when you need to display a form to be displayed, if it is in a loading state, you can call the adjusted general label skeleton screen component for rendering, display the label skeleton screen page, and use the following pseudo code to render the form label area:

[0089] if(loading){

[0090] / / Universal label skeleton screen component with fixed height and adaptive width

[0091] schemaItem.children.label= <labelskeleton / > ;

[0092] / / Turn off display ":"

[0093] schemaItem.children.colon=false;

[0094] / / Turn off the prompt next to the display label

[0095] schemaItem.children.tooltip=null;

[0096] / / Turn off the bottom prompt of the form item

[0097] schemaItem.children.extra=null;

[0098] / / Turn off display of required flags

[0099] schemaItem.children.required=false;

[0100] }

[0101] In this way, when the form label area is displayed, the displayed label skeleton screen page can be consistent with the form label area. At the same time, other prompt information in the form label area is not displayed, and only the skeleton screen effect is presented.

[0102] For the form button area, the button area skeleton screen component can be determined according to the form button area. The button area skeleton screen component is consistent with the form button area in size and position. When the form to be displayed needs to be displayed, if it is in a loading state, the button area skeleton screen component can be called for rendering to display the button area skeleton screen page.

[0103] It can be seen that the form parts other than the form items, that is, the form label area and the form button area can use an adapted skeleton screen effect to display the form to be displayed in the loading state, thereby improving the user experience.

[0104] 3. Process the properties of each form item in the displayed form.

[0105] (1) Define form item controls.

[0106] In order to ensure seamless switching between the rendering of the skeleton screen component and the form item display component during subsequent rendering, the embodiment of the present application introduces the concept of a form item control.

[0107] A form item control set may be determined according to the properties of each form item in the form to be displayed. The form item control set includes a form item control corresponding to each form item. Each form item control includes a form item display component and a form item skeleton screen component. The form item display component and the form item skeleton screen component in the same form item control are consistent in size and position, and the rendering effect is also consistent.

[0108] Among them, each form item display component that matches the attributes of each form item can be constructed. Since the attributes of the form item include information such as size, position, rendering effect, etc., a form item display component can be constructed. Similarly, each form item skeleton screen component that matches the attributes of each form item can be determined from the preset skeleton screen component database, and according to the identification of each form item, the pairing relationship between each form item display component and each form item skeleton screen component is determined. Finally, according to each form item display component and each form item skeleton screen component that have the pairing relationship, each form item control is constructed. It should be noted that each form item control can be constructed by defining a configuration function constconfig. In this way, the form item skeleton screen component corresponding to the form item of the form to be displayed can be automatically determined without manually adjusting the code, which greatly reduces the difficulty of development.

[0109] In a possible embodiment, when determining each form item skeleton screen component that matches the attribute of each form item from a preset skeleton screen component database, each basic skeleton screen component whose matching degree with the attribute of each form item is greater than a preset matching degree threshold can be called from the preset skeleton screen component database; then, according to the attribute of each form item, each basic skeleton screen component is adjusted to obtain each form item skeleton screen component. For example, the matching degree of each basic skeleton screen component and the attribute of the corresponding form item can be calculated from aspects such as size, position, and rendering effect, such as the size matching score, position matching score, and rendering effect matching score of the basic skeleton screen component and the corresponding form item, and then the weighted average is performed to obtain the matching degree, so that the adjustment range required for subsequent adjustments can be minimized, that is, first determine a basic skeleton screen component that is closest to the form item, and then adjust the basic skeleton screen component based on the attribute of the form item to obtain the form item skeleton screen component that finally meets the form item.

[0110] It can be seen that by defining form item controls, the form item display components can be ensured to be consistent with the skeleton screen components, forming form item controls for easy subsequent calls. However, the component tree has not yet been formed, and a mapping relationship between form item types and form item controls needs to be established.

[0111] (2) Establish a mapping relationship between the type of each form item and each form item control.

[0112] Among them, each form item display component can be defined as a form item control, forming a mapping relationship between the type of each form item and each form item control. This mapping relationship can be registered through react-schema-render as a prerequisite for subsequently determining the target component tree. react-schema-render is a general-purpose schema-to-React component tool component. The pseudo code is presented in the following way:

[0113]

[0114] After the mapping relationship between the type of each form item and each form item control is established, data support can be provided for subsequent data structure conversion to obtain the target component tree.

[0115] (3) Establish the target component tree.

[0116] The attributes of each form item may be converted into a schema data structure to obtain first schema data, and the data of each form item control may be converted into a schema data structure in combination with the mapping relationship to obtain second schema data of each form item. For example, the following data structure may be followed when converting each form item:

[0117]

[0118]

[0119] During the conversion process, the dependent fields or field update functions in the form item data need to follow the following data structure

[0120]

[0121] After the above conversion, the schema data structure is finally obtained. Through this schema data structure, it can be used in subsequent rendering<SchamaRender schema={schema} / > Render all form item display components in this way.

[0122] It should be noted that the target component tree can be a react component tree, because React.CreateContext is a function in React that is used to create a "Context object". Context is a feature of React that allows data to be passed in the component tree without manually passing the props layer by layer. This is very useful for certain types of data (such as theme settings, authentication information, etc.), which need to be accessed by components at multiple levels, but do not want to be explicitly passed through each intermediate component. In React, Props (attributes) are a mechanism for passing data from parent components to child components. Props are read-only, and child components cannot modify them directly. Instead, they should be managed and updated by parent components.

[0123] It should be noted that by establishing a target component tree, on the one hand, it can make it possible to switch seamlessly between calling the form item display component and calling the skeleton screen component, and on the other hand, the loading state can be quickly passed to the form item control, so that the rendering strategy can be automatically switched at different stages such as requesting to display the form, and the transition from the skeleton screen to the actual content can be seamlessly achieved when displaying.

[0124] 4. Display the form to be displayed.

[0125] When it is necessary to display the form to be displayed, the loading state of the form to be displayed can be determined in response to the form display request, and the loading state includes a loading state and a loading completion state.

[0126] Specifically, it is possible to receive a remote request, which can request the initial value of the form. It is possible to asynchronously call the request function when a form display request is received, create a loading state through the React.CreateContext technical means, synchronize the loading state of the initial value request, obtain the loading state through the context in the defined form item control, use the skeleton screen component for rendering when loading is in progress, and use the form item display component for rendering when loading is complete.

[0127] (1) If it is in loading state.

[0128] Among them, when in the loading state, the loading state can be synchronized to each form item control through the target component tree, and then the form item skeleton screen component in each form item control is called for rendering, and the form to be displayed is displayed on the first skeleton screen page.

[0129] It can be seen that if it is in the loading state, the form item skeleton screen component can be called for rendering, thereby presenting a skeleton screen effect consistent with the form item, ensuring the unity of the user interface style, and giving users consistent visual feedback before or after data loading.

[0130] (2) If the loading is complete.

[0131] If the loading state is a loading completion state, the loading state is synchronized to each form item control through the target component tree, and then the form item display component in each form item control is called to render, so as to display the form to be displayed on a form item page.

[0132] In a possible embodiment, a display request for optional form items may also be included. This is because some form items in the form are optional form items. Optional form items may include check boxes, selection boxes, etc. For example, the "region" form item is an optional form item, and each city can be presented by clicking. Similarly, the "available area" form item is an optional form item, and the available area contained in any city can be presented by clicking. The display request for optional form items is generally located after the form display request. Similarly, the loading status of each optional form item can be determined; according to the loading status, the form item skeleton screen component corresponding to each optional form item is called from the target component tree for rendering, and the form to be displayed is displayed on the second skeleton screen page based on the form item page.

[0133] (3) Display an example of the form to be displayed.

[0134] For details, see Figure 2 , Figure 2 This is a first display diagram of a form to be displayed provided in an embodiment of the present application. It can be seen that if it is in the loading state, the form is presented with a skeleton screen effect. For specific display effects, see Figure 2 The name area of ​​each form item is presented with a skeleton screen effect, and the content area to be filled in each form item is also presented with a skeleton screen effect.

[0135] It should be noted that when displaying, the form label area is rendered using a universal label skeleton screen component with adaptive width (not shown in the figure), the form button area, i.e. the two button areas in the lower right corner, calls the button area skeleton screen component for rendering, and for the form content area, i.e. the middle part, calls the form item skeleton screen component of each form item display component for rendering, and finally presents Figure 2 In this way, after the form item controls are defined, the form item display components in each form item control and the skeleton screen components are strictly consistent in size (length, width and height) and position, which ensures the continuity and unity of the visual effect and improves the user experience.

[0136] For details, see Figure 3 , Figure 3This is a second display diagram of a form to be displayed provided in an embodiment of the present application. It can be seen that if the form display request is in the loading completed state; and the optional form display request is in the loading state, the optional form items can be presented with a skeleton screen effect, and the remaining parts are rendered with the corresponding form item display component. For specific display effects, see Figure 3 , the name area of ​​each optional form item is presented with a skeleton screen effect, and the content area to be filled in for each optional form item is also presented with a skeleton screen effect. It can be seen that the "Instance Name" form item displays the text "Instance Name" after loading and the "Instance xxxx" content in the fill-in box; the "Payment Method" form item presents the text "Payment Method" after loading and the "Pay as You Go" content in the fill-in box; the "Network Type" form item displays the text "Network Type" after loading and the "Proprietary Network" content in the fill-in box; the "Number of Nodes" form item displays the text "Number of Nodes" after loading and the content to be added or subtracted in the fill-in box, and the content to be added or subtracted is empty at this time; the "Address" form item displays the text "Address" after loading and the content "Avenue B Plaza C Building D" in the manual fill-in box; the form button area includes a "Reset" button and a "Submit" button.

[0137] The optional form items are partial selection boxes of the "Region" form item, the "Available Area" form item, and the "Address" form item. At this time, only the partial selection boxes of the "Region" form item, the "Available Area" form item, and the "Address" form item can be presented with the skeleton screen effect, and the final presentation is Figure 4 In this way, for forms with optional form items, they can be displayed differently based on requests, which ensures the continuity and unity of the visual effects and improves the user experience.

[0138] For details, see Figure 4 , Figure 4 A third display diagram of a form to be displayed provided in an embodiment of the present application, at this time, the loading state corresponding to the form display request is the loading completed state, and the loading state corresponding to the display request of the optional form item is also the loading completed state. At this time, there is no need to present the skeleton screen, only the form in the final state needs to be displayed, that is, compared with Figure 4 For example, the selection box of the "Region" form item displays the text "q Province", the selection box of the "Available Area" form item displays the text "c District", and some selection boxes of the "Address" form item display the text "q Province" - "w City" - "e District" in the order from city level to district level.

[0139] It can be seen that the above method can improve development efficiency. Since there is no need to manually write or configure the skeleton screen code, developers can focus more on business logic and function implementation, which greatly reduces the development workload, shortens the project cycle, and improves the overall development efficiency. Keep the code tidy: The automated rendering mechanism reduces the generation of redundant code, making the project code structure clearer and easier to maintain. This is particularly important for long-term project iteration and team collaboration, which can reduce maintenance costs and improve code quality. Optimize user experience: By using a skeleton screen with the same size as the form control for transition rendering during data loading, the unity and consistency of the user interface are ensured, avoiding abrupt changes in the interface during loading, improving the user's visual experience and patience when waiting, and thus enhancing the overall user experience. Consistency and aesthetics: The consistent design of the form item display component and the skeleton screen component ensures the unity of the UI style. Whether before or after data loading, it can give users consistent visual feedback, enhancing the professionalism and brand image of the application. Reduce error rate: The automated process reduces the possibility of human configuration errors, especially when dealing with complex forms and dynamic data loading scenarios. The automated rendering mechanism can effectively avoid layout confusion or display abnormalities caused by improper manual configuration.

[0140] It can be seen that the embodiments of the present application provide a form display method and related devices, which do not require manual writing or configuration of skeleton screen code, greatly reducing development costs. At the same time, by defining form item controls, consistency between skeleton screen components and form item display components is achieved, ensuring a better user experience during display. By passing the loading status through the component tree, form rendering and skeleton rendering can be switched seamlessly, greatly improving the user experience.

[0141] 5. An exemplary description of a form display method.

[0142] In combination with the above content, a form display method according to an embodiment of the present application is introduced as an example below.

[0143] Combine the following Figure 5 A form display method in an embodiment of the present application is described. Figure 5 A flowchart of a form display method provided in an embodiment of the present application specifically includes the following steps:

[0144] Step 501: determine the form item control corresponding to each form item according to the attribute of each form item in the form to be displayed.

[0145] Each form item control includes a form item skeleton screen component, and each form item skeleton screen component is determined according to the attributes of the corresponding form item.

[0146] Each form item control may also include a form item display component, and the form item data of the form to be displayed may be obtained first, wherein the form item data is used to characterize the attributes of each form item in the form to be displayed. By parsing the form item data, data support may be provided for the subsequent definition of the form item control, so that the form item display component in each form item control and the skeleton screen component are consistent in size and position, thereby improving the display effect when the skeleton screen is used for subsequent rendering.

[0147] Among them, each form item display component that matches the attribute of each form item can be constructed, and then each form item skeleton screen component that matches the attribute of each form item is determined from a preset skeleton screen component database, and then, according to the identifier of each form item, the pairing relationship between each form item display component and each form item skeleton screen component is determined. Finally, according to each form item display component and each form item skeleton screen component that have the pairing relationship, each form item control is constructed.

[0148] In a possible embodiment, each basic skeleton screen component whose matching degree with the attribute of each form item is greater than a preset matching degree threshold can be called from the preset skeleton screen component database, and each basic skeleton screen component is adjusted according to the attribute of each form item to obtain the skeleton screen component of each form item.

[0149] For example, the degree of matching between the attributes of each basic skeleton screen component and the corresponding form item can be calculated from aspects such as size, position, and rendering effect. For example, the size matching score, position matching score, and rendering effect matching score of the basic skeleton screen component and the corresponding form item can be calculated, and then the matching degree can be obtained by weighted average. This ensures that the adjustment range required for subsequent adjustments is minimized, that is, first determine a basic skeleton screen component that is closest to the form item, and then adjust the basic skeleton screen component based on the attributes of the form item to obtain a form item skeleton screen component that finally meets the form item.

[0150] It can be seen that by defining form item controls, the form item display components can be ensured to be consistent with the skeleton screen components, forming form item controls for easy subsequent calls. However, the component tree has not yet been formed, and a mapping relationship between form item types and form item controls needs to be established.

[0151] Step 502: Establish a mapping relationship between the type of each form item and each form item control.

[0152] Among them, establishing a mapping relationship between the type of each form item and each form item control can provide data support for the subsequent establishment of a target component tree.

[0153] Step 503: determine the target component tree according to the mapping relationship and the attributes of each form item.

[0154] In a possible embodiment, the attributes of each form item are converted into a pattern data structure to obtain first pattern data of each form item; each form item control corresponding to the type of each form item is determined according to the mapping relationship, and the data of each form item control is converted into the pattern data structure to obtain second pattern data of each form item; and a target component of each form item is determined according to the first pattern data of each form item and the second pattern data of each form item to obtain the target component tree.

[0155] Step 504: In response to the form display request, determine the loading status of the form to be displayed.

[0156] The loading status may include a loading status and a loading completion status, and specifically, may include a loading status of a form display request and a loading status of a form item display request.

[0157] Step 505: According to the loading state, the form item skeleton screen component is called from the target component tree for rendering, and the to-be-displayed form matching the loading state is displayed.

[0158] Among them, the form item display component can be called from the target component tree for rendering according to the loading state, so as to display the to-be-displayed form matching the loading state.

[0159] In a possible embodiment, if the loading state is a loading state, the loading state is synchronized to each form item control through the target component tree; the form item skeleton screen component in each form item control is called to render, and the form to be displayed is displayed on the first skeleton screen page.

[0160] In a possible embodiment, if the loading state is a loading completion state, the loading state is synchronized to each form item control through the target component tree; the form item display component in each form item control is called to render, and the form to be displayed is displayed on a form item page.

[0161] Furthermore, in a possible embodiment, after determining the target component tree according to the mapping relationship and the attributes of each form item, if a display request for an optional form item is received, the loading state of each optional form item is determined, and if the loading state is the loading state, the form item skeleton screen component corresponding to each optional form item is called from the target component tree for rendering, and the form to be displayed is displayed on a second skeleton screen page based on the form item page.

[0162] It can be seen that in this way, the first skeleton screen effect is presented according to the form display request, and the second skeleton screen effect is presented for the display request of the optional form item, thereby improving the user experience.

[0163] In a possible embodiment, before obtaining the attributes of each form item of the form to be displayed, the configuration of the form to be displayed may be obtained; the form type and the form content area may be determined according to the configuration of the form to be displayed; an initial form structure corresponding to the form type may be generated; and a form container may be generated in the form content area according to the initial form structure, wherein the initial form structure and the form container are basic rendering components required to display the form to be displayed.

[0164] Furthermore, after obtaining the form data of the form to be displayed, the form label area and the form button area can be determined according to the configuration of the form to be displayed; the width of the general label skeleton screen component is set according to the form label area, the height of the general label skeleton screen component is a preset height, and the width of the general label skeleton screen component is consistent with the width of the form label area; the button area skeleton screen component is determined according to the form button area, and the button area skeleton screen component is consistent with the form button area in size and position; if the form to be displayed needs to be displayed, the general label skeleton screen component and the button area skeleton screen component are called from the target component tree for rendering, and the label skeleton screen page and the button area skeleton screen page are displayed.

[0165] It can be seen that through the above form display method, first, according to the attributes of each form item in the form to be displayed, the form item control corresponding to each form item is determined, wherein each form item control includes a form item skeleton screen component, and each form item skeleton screen component is determined according to the attributes of the corresponding form item; then, a mapping relationship between the type of each form item and each form item control is established; then, a target component tree is determined according to the mapping relationship and the attributes of each form item; then, in response to a form display request, the loading state of the form to be displayed is determined; finally, according to the loading state, the form item skeleton screen component is called from the target component tree for rendering, and the form to be displayed that matches the loading state is displayed. The skeleton screen display effect consistent with the form can be automatically presented, and by constructing the target component tree, form rendering and skeleton rendering can be seamlessly switched, which greatly improves the user experience.

[0166] For the parts not described in detail above, please refer to the description of 1-4 and will not be repeated here.

[0167] 6. An exemplary description of another form display method.

[0168] Combine the following Figure 6Another form display method in the embodiment of the present application is described. Figure 6 A flowchart of another form display method provided in an embodiment of the present application specifically includes the following steps:

[0169] Step 601: Obtain the configuration of the form to be displayed and the attributes of each form item of the form to be displayed.

[0170] Step 602: parse the configuration of the form to be displayed and determine the basic rendering component of the form.

[0171] Among them, the form type and the form content area can be determined according to the configuration of the form to be displayed; a form initial structure corresponding to the form type is generated; and a form container is generated in the form content area according to the form initial structure, and the form initial structure and the form container are basic rendering components required to display the form to be displayed.

[0172] Step 603, parse the attributes of each form item and determine the target component tree.

[0173] Among them, the property of each form item of the form to be displayed can be obtained; a form item control set is determined according to the form item data, the form item control set includes the form item control corresponding to each form item, each form item control includes a form item display component and a form item skeleton screen component, the form item display component and the form item skeleton screen component are consistent in size and position; a mapping relationship between the type of each form item and each form item control is established; and a target component tree is determined according to the mapping relationship and the form item data.

[0174] Specifically, the attributes of each form item can be converted into a pattern data structure to obtain the first pattern data of each form item; each form item control corresponding to the type of each form item is determined according to the mapping relationship, and the data of each form item control is converted into the pattern data structure to obtain the second pattern data of each form item; the target component of each form item is determined according to the first pattern data of each form item and the second pattern data of each form item to obtain the target component tree.

[0175] Step 604: If there is a form display request and it is in a loading state, call the basic rendering component and each form item skeleton screen component from the target component tree to render, and display the first skeleton screen page.

[0176] Step 605: If there is a form display request and the form is in the loading completion state, each form item display component is called to render and display the form item page.

[0177] Step 606: If there is a display request for the optional form item and it is in the loading state, the form item skeleton screen component corresponding to each optional form item is called from the target component tree for rendering, and a second skeleton screen page is displayed based on the form item page.

[0178] Step 607: If there is a display request for the optional form item and the loading is complete, the form item display component corresponding to each optional form item is called from the target component tree to render and display the form to be displayed.

[0179] It can be seen that through the above form display method, first, according to the attributes of each form item in the form to be displayed, the form item control corresponding to each form item is determined, wherein each form item control includes a form item display component and a form item skeleton screen component, and each form item skeleton screen component is determined according to the attributes of the corresponding form item; then, a mapping relationship between the type of each form item and each form item control is established; then, a target component tree is determined according to the mapping relationship and the attributes of each form item; then, in response to a form display request, the loading state of the form to be displayed is determined; finally, according to the loading state, the form item skeleton screen component or the form item display component is called from the target component tree for rendering, and the form to be displayed matching the loading state is displayed. The skeleton screen display effect consistent with the form can be automatically presented, and by constructing the target component tree, the form rendering and skeleton rendering can be seamlessly switched, which greatly improves the user experience.

[0180] For the parts not described in detail above, please refer to the description of 1-6 and will not be repeated here.

[0181] 4. An exemplary description of a form display device.

[0182] The above mainly introduces the scheme of the embodiment of the present application from the perspective of the execution process on the method side. It is understandable that, in order to realize the above functions, the electronic device includes a hardware structure and / or software module corresponding to the execution of each function. It should be easily appreciated by those skilled in the art that, in combination with the units and algorithm steps of each example described in the embodiments provided herein, the present application can be implemented in the form of hardware or a combination of hardware and computer software. Whether a function is executed in the form of hardware or computer software driving hardware depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present application.

[0183] The embodiment of the present application can divide the electronic device into functional units according to the above method example. For example, each functional unit can be divided according to each function, or two or more functions can be integrated into one processing unit. The above integrated unit can be implemented in the form of hardware or in the form of software functional units. It should be noted that the division of units in the embodiment of the present application is schematic and is only a logical function division. There may be other division methods in actual implementation.

[0184] In the case of dividing each functional module into corresponding functional modules, Figure 7 This is a block diagram of the functional units of a form display device provided in an embodiment of the present application. The form display device 700 includes:

[0185] A control unit 710, configured to determine a form item control corresponding to each form item according to the attributes of each form item in the form to be displayed, wherein each form item control includes a form item skeleton screen component, and each form item skeleton screen component is determined according to the attributes of the corresponding form item;

[0186] A mapping unit 720, configured to establish a mapping relationship between the type of each form item and each form item control;

[0187] A component tree unit 730, configured to determine a target component tree according to the mapping relationship and the attributes of each form item;

[0188] The loading unit 740 is used to determine the loading status of the form to be displayed in response to the form display request;

[0189] The rendering unit 750 is used to call the form item skeleton screen component from the target component tree for rendering according to the loading state, and display the to-be-displayed form that matches the loading state.

[0190] It can be seen that through the above-mentioned form display method and related devices, first, according to the attributes of each form item in the form to be displayed, the form item control corresponding to each form item is determined, wherein each form item control includes a form item skeleton screen component, and each form item skeleton screen component is determined according to the attributes of the corresponding form item; then, a mapping relationship between the type of each form item and each form item control is established; then, a target component tree is determined according to the mapping relationship and the attributes of each form item; then, in response to a form display request, the loading state of the form to be displayed is determined; finally, according to the loading state, the form item skeleton screen component is called from the target component tree for rendering, and the form to be displayed that matches the loading state is displayed. The skeleton screen display effect consistent with the form can be automatically presented, and by constructing the target component tree, the form rendering and skeleton rendering can be seamlessly switched, which greatly improves the user experience.

[0191] It should be noted that the specific implementation of each operation can adopt the corresponding description of the method embodiment shown above, and the form display device 700 can be used to execute the above method embodiment of the present application, which will not be described in detail.

[0192] 6. Other examples and explanations

[0193] An embodiment of the present application also provides a chip, including a processor, a memory, and a computer program or instructions stored in the memory, wherein the processor executes the computer program or instructions to implement the steps described in the above method embodiment.

[0194] An embodiment of the present application also provides a chip module, including a transceiver component and a chip, the chip including a processor, a memory and a computer program or instructions stored in the memory, wherein the processor executes the computer program or instructions to implement the steps described in the above method embodiment.

[0195] An embodiment of the present application also provides a computer storage medium, wherein the computer storage medium stores a computer program for electronic data exchange, wherein the computer program enables a computer to execute part or all of the steps of any method recorded in the above method embodiment, and the above computer includes an electronic device.

[0196] The embodiment of the present application also provides a computer program product, the computer program product includes a non-transitory computer-readable storage medium storing a computer program, the computer program is operable to cause a computer to execute some or all of the steps of any method described in the method embodiment. The computer program product may be a software installation package, and the computer includes an electronic device.

[0197] It should be noted that, for the above-mentioned various embodiments, for the sake of simple description, they are all expressed as a series of action combinations. Those skilled in the art should be aware that the present application is not limited by the described order of actions, because some steps in the embodiments of the present application can be performed in other orders or simultaneously. In addition, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions, steps, modules or units involved are not necessarily required by the embodiments of the present application.

[0198] In the above embodiments, the embodiments of the present application have different focuses on the description of each embodiment. For parts that are not described in detail in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0199] The steps of the method or algorithm described in the embodiments of the present application can be implemented in hardware or by executing software instructions by a processor. The software instructions can be composed of corresponding software modules, and the software modules can be stored in RAM, flash memory, ROM, EPROM, electrically erasable programmable read-only memory (electrically EPROM, EEPROM), registers, hard disks, mobile hard disks, read-only compact disks (CD-ROMs) or any other form of storage medium known in the art. An exemplary storage medium is coupled to the processor so that the processor can read information from the storage medium and write information to the storage medium. Of course, the storage medium can also be a component of the processor. The processor and the storage medium can be located in an ASIC. In addition, the ASIC can be located in a terminal device or a management device. Of course, the processor and the storage medium can also be present in a terminal device or a management device as discrete components.

[0200] Those skilled in the art should be aware that in one or more of the above examples, the functions described in the embodiments of the present application can be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in the embodiments of the present application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions can be transmitted from a website site, computer, server, or data center to another website site, computer, server, or data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (digital subscriber line, DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) mode. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that includes one or more available media integrated. The available medium may be a magnetic medium (eg, a floppy disk, a hard disk, a magnetic tape), an optical medium (eg, a digital video disc (DVD)), or a semiconductor medium (eg, a solid state disk (SSD)).

[0201] The modules / units included in the devices and products described in the above embodiments may be software modules / units or hardware modules / units, or may be partially software modules / units and partially hardware modules / units. For example, for the devices and products applied to or integrated in the chip, the modules / units included therein may all be implemented in the form of hardware such as circuits, or at least some of the modules / units may be implemented in the form of software programs, which run on the processor integrated inside the chip, and the remaining (if any) modules / units may be implemented in the form of hardware such as circuits; for the devices and products applied to or integrated in the chip module, the modules / units included therein may all be implemented in the form of hardware such as circuits, and different modules / units may be located in the same component (such as a chip, circuit module, etc.) or in different components of the chip module, or at least some of the modules / units may be implemented in the form of software programs. The software programs run on the processor integrated inside the chip, and the remaining (if any) modules / units may be implemented in the form of hardware such as circuits. It is implemented in the form of a software program, which runs on a processor integrated inside the chip module, and the remaining (if any) modules / units can be implemented in hardware such as circuits; for various devices and products applied to or integrated in the terminal equipment, the various modules / units contained therein can be implemented in hardware such as circuits, and different modules / units can be located in the same component (for example, chip, circuit module, etc.) or in different components in the terminal equipment, or, at least some modules / units can be implemented in the form of a software program, which runs on a processor integrated inside the terminal equipment, and the remaining (if any) modules / units can be implemented in hardware such as circuits.

[0202] The specific implementation methods described above further illustrate the purpose, technical solutions and beneficial effects of the embodiments of the present application. It should be understood that the above description is only the specific implementation method of the embodiments of the present application and is not intended to limit the protection scope of the embodiments of the present application. Any modifications, equivalent substitutions, improvements, etc. made on the basis of the technical solutions of the embodiments of the present application should be included in the protection scope of the embodiments of the present application.

Claims

1. A form display method, characterized in that: The method comprises: Determine the form item control corresponding to each form item according to the attribute of each form item in the form to be displayed, wherein each form item control includes a form item skeleton screen component, and each form item skeleton screen component is determined according to the attribute of the corresponding form item; Establishing a mapping relationship between the type of each form item and each form item control; Determine a target component tree according to the mapping relationship and the attributes of each form item; In response to a form display request, determining a loading state of the form to be displayed; According to the loading state, the form item skeleton screen component is called from the target component tree for rendering, and the to-be-displayed form matching the loading state is displayed.

2. The method according to claim 1, characterized in that The form item control also includes a form item display component; according to the loading state, the form item skeleton screen component is called from the target component tree for rendering, and after the form to be displayed matching the loading state is displayed, the method further includes: According to the loading state, the form item display component is called from the target component tree for rendering, and the to-be-displayed form matching the loading state is displayed.

3. The method according to claim 2, characterized in that The step of determining the form item control corresponding to each form item according to the attribute of each form item in the form to be displayed includes: Constructing each form item display component that matches the attribute of each form item; Determining, from a preset skeleton screen component database, each form item skeleton screen component that matches the attribute of each form item; According to the identifier of each form item, determining the pairing relationship between each form item display component and each form item skeleton screen component; Each form item control is constructed according to each form item display component and each form item skeleton screen component that have the paired relationship.

4. The method according to claim 3, characterized in that The step of determining, from a preset skeleton screen component database, each form item skeleton screen component that matches the attribute of each form item comprises: From the preset skeleton screen component database, call each basic skeleton screen component whose matching degree with the attribute of each form item is greater than a preset matching degree threshold; According to the attribute of each form item, each basic skeleton screen component is adjusted to obtain each form item skeleton screen component.

5. The method according to claim 1, characterized in that The determining the target component tree according to the mapping relationship and the attributes of each form item includes: Convert the attribute of each form item into a pattern data structure to obtain first pattern data of each form item; Determine, according to the mapping relationship, each form item control corresponding to the type of each form item, convert the data of each form item control into the mode data structure, and obtain the second mode data of each form item; According to the first mode data of each form item and the second mode data of each form item, the target component of each form item is determined to obtain the target component tree.

6. The method according to claim 1, characterized in that The step of calling the form item skeleton screen component from the target component tree for rendering according to the loading state, and displaying the to-be-displayed form matching the loading state, comprises: If the loading state is a loading state, synchronizing the loading state to each form item control through the target component tree; The form item skeleton screen component in each form item control is called to perform rendering, and the form to be displayed is displayed on a first skeleton screen page.

7. The method according to claim 6, characterized in that The step of calling the form item display component from the target component tree for rendering according to the loading state, and displaying the to-be-displayed form matching the loading state, comprises: If the loading state is a loading completion state, synchronizing the loading state to each form item control through the target component tree; The form item display component in each form item control is called to perform rendering, and the form to be displayed is displayed on a form item page.

8. The method according to claim 7, characterized in that After determining the target component tree according to the mapping relationship and the attributes of each form item, the method further includes: If a display request for an optional form item is received, determining a loading state of each optional form item; If the loading state is the loading state, the form item skeleton screen component corresponding to each optional form item is called from the target component tree for rendering, and the form to be displayed is displayed on a second skeleton screen page based on the form item page.

9. The method according to claim 1, characterized in that: Before determining the form item control corresponding to each form item according to the attribute of each form item in the form to be displayed, the method further includes: Determining a form type and a form content area according to the configuration of the form to be displayed; Generate an initial form structure corresponding to the form type; A form container is generated in the form content area according to the form initial structure, and the form initial structure and the form container are basic rendering components required for displaying the form to be displayed.

10. The method according to claim 9, characterized in that The method further comprises: Determine a form label area and a form button area according to the configuration of the form to be displayed; The width of the universal label skeleton screen component is set according to the form label area, the height of the universal label skeleton screen component is a preset height, and the width of the universal label skeleton screen component is consistent with the width of the form label area; Determine a button area skeleton screen component according to the form button area, wherein the button area skeleton screen component is consistent with the form button area in size and position; If the form to be displayed needs to be displayed, the general label skeleton screen component and the button area skeleton screen component are called from the target component tree for rendering, and the label skeleton screen page and the button area skeleton screen page are displayed.

11. A form display device, characterized in that: The device comprises: A control unit, used to determine a form item control corresponding to each form item according to the attribute of each form item in the form to be displayed, wherein each form item control includes a form item skeleton screen component, and each form item skeleton screen component is determined according to the attribute of the corresponding form item; A mapping unit, used to establish a mapping relationship between the type of each form item and each form item control; A component tree unit, used to determine a target component tree according to the mapping relationship and the attributes of each form item; A loading unit, configured to determine a loading state of the form to be displayed in response to a form display request; A rendering unit is used to call the form item skeleton screen component from the target component tree for rendering according to the loading state, and display the to-be-displayed form that matches the loading state.

12. An electronic device, characterized in that: include: A processor, a memory, and one or more programs; the one or more programs are stored in the memory and are configured to be executed by the processor, the programs comprising instructions for executing the steps in the method according to any one of claims 1-10.

13. A computer storage medium, characterized in that: The computer storage medium stores a computer program, wherein the computer program includes program instructions, and when the program instructions are executed by a processor, the processor is caused to perform the method according to any one of claims 1 to 10.

Images