Card interface generation method, device, system and related equipment

Abstract

The present disclosure relates to a card interface generation method, device, system and related equipment, and relates to the field of computer technology. The method includes: receiving layout information of a card interface, the layout information including one or more components; generating a virtual view tree including one or more virtual nodes according to the layout information; generating a layout engine node tree according to the virtual view tree, and assigning the view attribute information corresponding to each virtual node in the virtual view tree to the corresponding node of the layout engine node tree; using a cross-platform layout calculation engine to calculate the view attribute information applicable to each node in the native view tree according to the layout engine node tree; generating a native view tree according to the virtual view tree, and assigning the calculated view attribute information applicable to each node in the native view tree to the corresponding node of the native view tree; and rendering and generating a card interface according to the native view tree. The present disclosure can realize the dynamic update of the card interface layout style without modifying the code.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular to a card interface generation method, device, system, electronic device, computer-readable storage medium, and computer program product. Background Art

[0002] Card-based user interface design is a modular user interface (UI) approach that combines views of a class of user interface elements within a larger view. Compared to traditional UI design methods, card-based UI design offers a stronger sense of visual space, greater content independence, and a more intuitive information hierarchy. It is widely used in UI design for various applications.

[0003] As various applications are continuously upgraded or updated, the layout style of the user interface of various applications developed with a card-style interface design will change, but the interactive functions involved in the interface may not change. Taking the user follow interface of a social application software as an example, the view attribute information of the user avatar, user nickname, and follow button in the user follow interface may change (such as the user avatar size, user nickname font, follow button position, etc.), but the associated interactive functions will not change (such as clicking the user avatar to jump to the user's personal homepage, clicking the follow button to follow the user, etc.).

[0004] Currently, in the relevant technology, the method for updating the card interface is: for the card interface whose view layout style has changed, the corresponding code is rewritten, and after compiling and packaging the written code, it takes a long time to release the version online. These processes must be carried out for every small change, which is time-consuming and labor-intensive, and has high development costs.

[0005] It should be noted that the information disclosed in the above background technology section is only used to enhance the understanding of the background of the present disclosure, and therefore may include information that does not constitute prior art known to ordinary technicians in the field. Summary of the Invention

[0006] The present disclosure provides a card interface generation method, device, system, electronic device, computer-readable storage medium, and computer program product to at least address the technical problem in related technologies of requiring code modification when the layout style of a card interface changes. The technical solutions of the present disclosure are as follows:

[0007] According to a first aspect of an embodiment of the present disclosure, a card interface generation method is provided, the method comprising: receiving layout information of the card interface, the layout information comprising one or more components, each component corresponding to a view of a native software development kit (SDK), the component comprising a component identifier, view attribute information corresponding to the component, and a corresponding sub-component identifier; generating a virtual view tree according to the layout information of the card interface, the virtual view tree comprising one or more virtual nodes, the virtual nodes corresponding to the components of the layout information; generating a layout engine node tree according to the virtual view tree, and assigning the view attribute information corresponding to each virtual node in the virtual view tree to the layout engine node tree The corresponding node of the layout engine node tree includes one or more nodes, and the nodes of the layout engine node tree correspond to the virtual nodes of the virtual view tree; using the cross-platform layout calculation engine to calculate the view attribute information applicable to each node in the native view tree according to the view attribute information corresponding to each node in the layout engine node tree; generating a native view tree according to the virtual view tree, and assigning the calculated view attribute information applicable to each node in the native view tree to the corresponding node of the native view tree, the native view tree includes one or more nodes, and the nodes of the native view tree correspond to the virtual nodes of the virtual view tree; rendering and generating the card interface according to the native view tree.

[0008] In some embodiments, the component also includes: event information corresponding to the component; before rendering and generating the card interface according to the native view tree, the method also includes: binding parameter information of corresponding events to each node in the native view tree according to the event information corresponding to each virtual node in the virtual view tree; wherein, rendering and generating the card interface according to the native view tree includes: rendering and generating the card interface according to the view attribute information and event information corresponding to each node in the native view tree.

[0009] In some embodiments, the event information includes: event type and event identifier; wherein, according to the event information corresponding to each virtual node in the virtual view tree, parameter information of the corresponding event is bound to each node in the native view tree, including: according to the event type and event identifier corresponding to each node in the virtual view tree, the corresponding event is searched from the pre-generated event dictionary information, and the parameter information of the corresponding event is bound to each node in the native view tree.

[0010] In some embodiments, before searching for parameter information of corresponding events from pre-generated event dictionary information according to the event type and event identifier corresponding to each node in the virtual view tree, and binding the parameter information of corresponding events to each node in the native view tree, the method further includes: predefining event types and event identifiers of one or more events; generating event dictionary information according to the event type and event identifier of each event, wherein the event dictionary information stores each event, event identifier, and event type, each event type corresponds to one or more event identifiers, and each event identifier corresponds to one event.

[0011] In some embodiments, a virtual view tree is generated based on the layout information of the card interface, including: traversing each component of the layout information, creating a virtual node based on the component identifier of each component; generating a connection relationship between each node based on the sub-component identifier corresponding to each component, and obtaining a virtual view tree.

[0012] In some embodiments, after generating the connection relationship between each node based on the sub-component identifier corresponding to each component to obtain the virtual view tree, the method also includes: assigning the view attribute information and event information corresponding to each component to the corresponding node of the virtual view tree.

[0013] In some embodiments, after using a cross-platform layout calculation engine to calculate view attribute information applicable to each node in the native view tree based on the view attribute information corresponding to each node in the layout engine node tree, the method further includes: storing the calculated view attribute information applicable to each node in the native view tree in the corresponding node of the layout engine node tree.

[0014] According to a second aspect of an embodiment of the present disclosure, a card interface generation device is provided, which includes: a card layout information acquisition module, configured to receive layout information of the card interface, the layout information including one or more components, each component corresponding to a view of a native software development kit SDK, the component including a component identifier, view attribute information corresponding to the component, and a corresponding sub-component identifier; a virtual view tree generation module, configured to generate a virtual view tree according to the layout information of the card interface, the virtual view tree including one or more virtual nodes, the virtual nodes corresponding to the components of the layout information; a layout engine node tree generation module, configured to construct a layout engine node tree according to the virtual view tree, and assign the view attribute information corresponding to each virtual node in the virtual view tree to the layout engine node tree. The corresponding node of the layout engine node tree, the layout engine node tree includes one or more nodes, and the nodes of the layout engine node tree correspond to the virtual nodes of the virtual view tree; the layout information conversion module is configured to use the cross-platform layout calculation engine to calculate the view attribute information applicable to each node in the native view tree according to the view attribute information corresponding to each node in the layout engine node tree; the native view tree generation module is configured to generate a native view tree according to the virtual view tree, the native view tree includes one or more nodes, the nodes of the native view tree correspond to the virtual nodes of the virtual view tree, and the view attribute information corresponding to each node in the native view tree is assigned to the corresponding node of the native view tree; the rendering module is configured to generate the card interface according to the native view tree rendering.

[0015] In some embodiments, the component also includes: event information corresponding to the component; the device also includes: an event binding module, configured to bind parameter information of corresponding events to each node in the native view tree according to the event information corresponding to each virtual node in the virtual view tree; wherein, the rendering module is also configured to render and generate the card interface according to the view attribute information and event information corresponding to each node in the native view tree.

[0016] In some embodiments, the event information includes: event type and event identifier; wherein, the event binding module is also configured to search for corresponding events from pre-generated event dictionary information according to the event type and event identifier corresponding to each node in the virtual view tree, and bind parameter information of the corresponding event to each node in the native view tree.

[0017] In some embodiments, the device also includes: an event predefinition module, configured to predefine the event type and event identifier of one or more events; an event dictionary information generation module, configured to generate event dictionary information based on the event type and event identifier of each event, wherein the event dictionary information stores each event, event identifier, and event type, each event type corresponds to one or more event identifiers, and each event identifier corresponds to an event; wherein the event binding module is also configured to search for corresponding events from the event dictionary information based on the event type and event identifier corresponding to each node in the virtual view tree, and bind parameter information of the corresponding event to each node in the native view tree.

[0018] In some embodiments, the virtual view tree generation module is further configured to traverse each component of the layout information, create a virtual node according to the component identifier of each component, and generate a connection relationship between each node according to the sub-component identifier corresponding to each component to obtain a virtual view tree.

[0019] In some embodiments, the virtual view tree generation module is further configured to assign view attribute information and event information corresponding to each component to a corresponding node of the virtual view tree.

[0020] In some embodiments, the layout information conversion module is further configured to store the calculated view attribute information applicable to each node in the native view tree in a corresponding node of the layout engine node tree.

[0021] According to a third aspect of an embodiment of the present disclosure, a card interface generation system is provided, the system comprising: a client and a server; wherein the server is configured to issue layout information of the card interface, the layout information comprising one or more components, each component corresponding to a view of a native software development kit (SDK), the component comprising a component identifier, view attribute information corresponding to the component, and a corresponding subcomponent identifier; the client is configured to generate a virtual view tree according to the layout information of the card interface, construct a layout engine node tree according to the virtual view tree, assign view attribute information corresponding to each virtual node in the virtual view tree to a corresponding node in the layout engine node tree, calculate view attribute information applicable to each node in the native view tree using a cross-platform layout calculation engine according to the view attribute information corresponding to each node in the layout engine node tree, generate a native view tree according to the virtual view tree, assign view attribute information corresponding to each node in the native view tree to a corresponding node in the native view tree, and render and generate the card interface according to the native view tree, wherein the virtual view tree comprises one or more virtual nodes corresponding to the components of the layout information; and the native view tree comprises one or more nodes corresponding to the virtual nodes of the virtual view tree.

[0022] According to a fourth aspect of an embodiment of the present disclosure, an electronic device is provided, comprising: a processor; and a memory for storing instructions executable by the processor; wherein the processor is configured to execute the instructions to implement a card interface generation method as described in any one of the above items.

[0023] According to a fourth aspect of an embodiment of the present disclosure, a computer-readable storage medium is provided. When instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute any one of the above-mentioned card interface generation methods.

[0024] According to a fourth aspect of an embodiment of the present disclosure, a computer program product is provided, comprising a computer program / instruction, which implements any of the above-mentioned card interface generation methods when executed by a processor.

[0025] The solution provided by the embodiment of the present disclosure, after obtaining the layout information of the card interface, generates a virtual view tree containing one or more virtual nodes according to the component identifiers and subcomponent identifiers of one or more components in the layout information, and then generates a corresponding layout engine node tree and native view tree according to the virtual view tree, assigns the view attribute information of the component corresponding to each virtual node to the corresponding node of the layout node tree, so that the cross-platform layout engine generates view attribute information applicable to each node in the native view tree according to the view attribute information corresponding to each node in the layout engine node tree, assigns the calculated view attribute information applicable to each node in the native view tree to the corresponding node of the native view tree, and finally generates the card interface according to the native view tree rendering. When the layout style of the card interface changes, the solution provided by the embodiment of the present disclosure can realize the dynamic update of the layout style of the card interface without modifying the code.

[0026] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0027] The accompanying drawings herein are incorporated into and constitute a part of the specification, illustrate embodiments consistent with the present disclosure, and together with the description are used to explain the principles of the present disclosure, and do not constitute an improper limitation of the present disclosure.

[0028] Figure 1 is a schematic diagram of an exemplary system architecture to which the card interface generation method according to the embodiments of the present disclosure can be applied;

[0029] Figure 2 is a flow chart showing a card interface generation method according to an exemplary embodiment;

[0030] Figure 3 This is a schematic diagram of a user attention interface of a social software application according to an exemplary embodiment;

[0031] Figure 4 is a flow chart showing an optional card interface generation method according to an exemplary embodiment;

[0032] Figure 5 The figure is a schematic diagram of a specific implementation architecture of a card interface generation method according to an exemplary embodiment.

[0033] Figure 6 is a flow chart showing event dictionary information generation according to an exemplary embodiment;

[0034] Figure 7 This is a specific implementation flowchart showing a method in which a client renders and generates a card interface based on layout information sent by a server according to an exemplary embodiment;

[0035] Figure 8 is a schematic diagram showing a process of generating a virtual view tree according to layout information according to an exemplary embodiment;

[0036] Figure 9 is a schematic diagram of a rendering process of a user interface according to an exemplary embodiment;

[0037] Figure 10 is a schematic diagram of an optional virtual view tree according to an exemplary embodiment;

[0038] Figure 11 is a schematic diagram of a card interface generating device according to an exemplary embodiment;

[0039] Figure 12 The figure is a schematic diagram of an electronic device according to an exemplary embodiment. DETAILED DESCRIPTION

[0040] In order to enable ordinary persons in the art to better understand the technical solutions of the present disclosure, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below with reference to the accompanying drawings.

[0041] It should be noted that the terms "first," "second," and the like in the specification and claims of the present disclosure and the above-mentioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or precedence. It should be understood that the numbers used in this manner are interchangeable where appropriate so that the embodiments of the present disclosure described herein can be implemented in an order other than those illustrated or described herein. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present disclosure. Instead, they are merely examples of apparatus and methods consistent with certain aspects of the present disclosure as detailed in the appended claims.

[0042] Figure 1 is a schematic diagram of an exemplary system architecture to which the card interface generation method in the embodiment of the present disclosure can be applied, such as Figure 1 As shown, the system architecture may include a terminal device 101, a network 102, and a server 103. The network 102 may be a wired network or a wireless network.

[0043] Terminal device 101 may be any electronic device, including but not limited to a mobile phone, tablet computer, laptop computer, desktop computer, wearable device, in-vehicle device, augmented reality device, virtual reality device, smart TV, smart speaker, smart watch, etc., but is not limited thereto. The operating system used by terminal device 101 may be, but is not limited to, Android, Linux, Windows, iOS, etc. The user interface styles displayed for the same application on different operating systems may differ.

[0044] The server 103 may be a server that provides various services, and may respond to requests initiated by the terminal device 101 and return the response results to the terminal device 101. Optionally, the server may be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms.

[0045] Those skilled in the art will know that Figure 1 The number of terminal devices, networks, and servers in the embodiment is merely illustrative, and any number of terminal devices, networks, and servers may be used as needed, and the present disclosure does not impose any limitation thereto.

[0046] First, a card interface generation method is provided in an embodiment of the present disclosure. The method can be executed by any electronic device with computing and processing capabilities.

[0047] In some embodiments, the card interface generation method provided in the embodiments of the present disclosure may be executed by a terminal device in the above-described system architecture; in other embodiments, the card interface generation method provided in the embodiments of the present disclosure may be implemented by the terminal device in the above-described system architecture interacting with a server. This disclosure is not limited to this.

[0048] Figure 2 is a flowchart of a card interface generation method according to an exemplary embodiment. Figure 2 As shown, the card interface generation method provided in the embodiment of the present disclosure may include the following steps:

[0049] S202, receiving layout information of the card interface, the layout information includes one or more components, each component corresponds to a view of the native software development kit SDK, and the component includes a component identifier, view attribute information corresponding to the component, and a corresponding sub-component identifier.

[0050] It should be noted that the card interface in the embodiments of the present disclosure can be any user interface (UI) developed using a card-style interface design approach, and can be an interface in an application or an interface in a mini-program. Since a user interface developed using a card-style interface design approach may include one or more cards, in some embodiments, the layout information received by S202 can be the layout information of the entire interface view. In other embodiments, the layout information received by S202 can be the layout information of the view corresponding to a card on the interface (partial interface view).

[0051] Figure 3 The following is a user follow interface of a social software application, Figure 3 As shown, the interface includes a card view 30, which contains three sub-views nested within it: views corresponding to the user's avatar 301, the user's nickname 302, and a follow button 303. When the social software application is upgraded, the layout of the sub-views within the card view 30 may change (e.g., the view corresponding to the user's avatar 301 becomes larger, and the view corresponding to the user's nickname 302 changes font size). However, the interactive function corresponding to the card 30 does not change; the user's follow event is still realized by clicking the follow button 303.

[0052] In the embodiment of the present disclosure, the component refers to the background implementation of the view, such as Figure 3 The card view 30 shown is implemented by a component, and the three subviews of user avatar 301, user nickname 302 and follow button 303 are implemented by three corresponding components respectively. In order to update the interface layout style, it is necessary to implement it through the components corresponding to each view in the interface.

[0053] The component identifier in the above S202 refers to the identification information used to distinguish each component, which can be but not limited to letters and / or numbers. The present disclosure does not limit the specific form of the component identifier; the sub-component identifier in the above S202 refers to the component identifier corresponding to one or more child nodes under a parent node when a certain component is a parent node. For example, the sub-component identifiers corresponding to component identifier 1 are 2, 3, and 4, which means that component identifier 1 is the parent node of component identifiers 2, 3, and 4; the view attribute information in the above S202 refers to the attribute information of the view corresponding to each component, which can be but not limited to the position, height, width, color, and other information of the view. In some embodiments, the view attribute information of each component can be information described using the CSS language, following the Flex layout specification.

[0054] It should be noted that the format of the layout information in the embodiment of the present disclosure may be, but is not limited to, the Json format. In some embodiments, when the layout information is downloaded in the Json format, the components corresponding to each view in the card interface may be downloaded in an array.

[0055] S204 , generating a virtual view tree according to the layout information of the card interface, where the virtual view tree includes one or more virtual nodes, and the virtual nodes correspond to the components of the layout information.

[0056] It should be noted that in the disclosed embodiments, the virtual view tree refers to a tree-structured data model generated by treating each component in the layout information as a virtual node based on the connections between the components. After obtaining the component identifiers, view attribute information, and subcomponent identifiers of the components corresponding to each view in the interface, a virtual view tree can be generated, where each virtual node in the virtual view tree corresponds to a component in the layout information.

[0057] In some embodiments, when generating a virtual view tree based on the layout information of a card interface, this can be achieved through the following steps: traversing each component of the layout information, creating a virtual node based on the component identifier of each component; and generating a connection relationship between each node based on the subcomponent identifier corresponding to each component, thereby obtaining a virtual view tree. In the disclosed embodiments, generating a virtual view tree in this manner allows for unrestricted data formats for the layout information, allowing for various formats such as JSON and XML.

[0058] S206, generating a layout engine node tree according to the virtual view tree, and assigning view attribute information corresponding to each virtual node in the virtual view tree to the corresponding node of the layout engine node tree, wherein the layout engine node tree includes one or more nodes, and the nodes of the layout engine node tree correspond to the virtual nodes of the virtual view tree.

[0059] It should be noted that since the generated card interface needs to be applicable to different operating systems on the client, it is necessary to use a cross-platform layout calculation engine to calculate the layout information of the native view tree. In order for the cross-platform layout calculation engine to realize the layout information calculation, the data structure corresponding to the virtual view tree needs to be input into the cross-platform layout calculation engine. The above-mentioned layout engine node tree is a data model with a tree structure generated based on each node and the node relationship in the virtual view tree. The layout engine node tree and the virtual view tree have the same tree structure, that is, each node and the relationship between nodes in the layout engine tree completely correspond to the virtual view tree. Since each virtual node in the virtual view tree corresponds to a component in the layout information, after the layout engine tree is generated according to the virtual view tree, the view attribute information corresponding to each virtual node in the virtual view tree can be assigned to the corresponding node of the layout engine node tree, so that the cross-platform layout calculation engine can calculate the view attribute information corresponding to each node in the layout engine node tree to be applicable to each node in the native view tree.

[0060] S208 , using a cross-platform layout calculation engine to calculate view attribute information applicable to each node in the native view tree based on the view attribute information corresponding to each node in the layout engine node tree.

[0061] Since different operating systems use different SDKs, the interface layout styles presented by the same application on different operating systems may be different. Therefore, a cross-platform layout calculation engine is required to convert the view attribute information corresponding to each node in the layout engine node tree into the view attribute information of each node in the native view tree applicable to the current SDK.

[0062] It should be noted that the cross-platform layout calculation engine in the embodiment of the present disclosure may be an engine that can perform layout information calculation across platforms, and may be, but is not limited to, a Yoga engine or a TaiTank engine. In the embodiment of the present disclosure, the Yoga engine is used as an example for illustration.

[0063] S210, generate a native view tree based on the virtual view tree, and assign the calculated view attribute information applicable to each node in the native view tree to the corresponding node of the native view tree. The native view tree includes one or more nodes, and the nodes of the native view tree correspond to the virtual nodes of the virtual view tree.

[0064] It should be noted that the native view tree in the disclosed embodiment is a data model with a tree structure generated based on the nodes and node relationships in the virtual view tree. The native view tree and the virtual view tree have the same tree structure, that is, the nodes and the relationships between the nodes in the native view tree completely correspond to the virtual view tree. After using the cross-platform layout calculation engine to calculate the view attribute information applicable to each node in the native view tree, the view attribute information applicable to each node in the native view tree is assigned to the corresponding node of the native view tree, so that the corresponding card interface is generated based on the assigned native view tree rendering.

[0065] S212, generating a card interface based on native view tree rendering.

[0066] It should be noted that generating the corresponding interface based on the native view tree rendering can be achieved through the native SDK, which is not described in detail in this disclosure.

[0067] As can be seen from the above, the card interface generation method provided in the embodiment of the present disclosure, after obtaining the layout information of the card interface, generates a virtual view tree containing one or more virtual nodes according to the component identifiers and sub-component identifiers of one or more components in the layout information, and then generates a corresponding layout engine node tree and native view tree according to the virtual view tree, and assigns the view attribute information of the component corresponding to each virtual node to the corresponding node of the layout node tree, so that the cross-platform layout engine generates view attribute information applicable to each node in the native view tree according to the view attribute information corresponding to each node in the layout engine node tree, assigns the calculated view attribute information applicable to each node in the native view tree to the corresponding node of the native view tree, and finally generates a card interface according to the native view tree rendering, which can realize the dynamic update of the card interface layout style without modifying the code.

[0068] Some views in the interface are content views, and some views are views with interactive functions. For views with interactive functions, when rendering and generating the corresponding interface, corresponding interactive events are often bound to these views. Therefore, in one embodiment of the present disclosure, each component in the layout information may also include: event information corresponding to the component. In this embodiment, Figure 4 As shown, the card interface generation method provided in the embodiment of the present disclosure may also include the following steps:

[0069] S214: Bind parameter information of corresponding events to each node in the native view tree according to the event information corresponding to each virtual node in the virtual view tree.

[0070] Correspondingly, the above S212 can render and generate a corresponding card interface based on the view attribute information and event information corresponding to each node in the native view tree.

[0071] For components with interactive functional views, through the above embodiments, the interactive event information corresponding to the components can be bound to each node in the native view tree.

[0072] Furthermore, in some embodiments, event information may include, but is not limited to, event type and event identifier; the above-mentioned S214 may bind parameter information of the corresponding event to each node in the native view tree through the following steps: according to the event type and event identifier corresponding to each node in the virtual view tree, search the corresponding event from the pre-generated event dictionary information, and bind the parameter information of the corresponding event to each node in the native view tree. In the embodiment of the present disclosure, event parameter information is transmitted according to the event type and event identifier to bind events to each node in the native view tree, which not only enables fast event binding, but also, if the client has already stored the parameter information of the event, only the server needs to send the event type and event identifier corresponding to each node.

[0073] It should be noted that in the embodiments of the present disclosure, the event identifier can uniquely identify any type of information for each event. The event type can be a click, long press, or other event. For example, a click on a user's avatar and a click on a follow button may correspond to different events. A click on a user's avatar can redirect to the user's personal homepage, while a click on a follow button can enable the user to follow a specific user. Because card interfaces often include views with interactive functions, before rendering and generating the card interface based on the native view tree, parameter information for the corresponding event can be bound to each node in the native view tree.

[0074] In some embodiments, before executing S214, the card interface generation method provided in the embodiments of the present disclosure may further include the following steps: predefining the event type and event identifier of one or more events; generating event dictionary information based on the event type and event identifier of each event, wherein the event dictionary information stores each event, event identifier, and event type, each event type corresponds to one or more event identifiers, and each event identifier corresponds to an event. In the embodiments of the present disclosure, by predefining event information, it is possible to transmit event parameter information based on the event type and event identifier, thereby achieving the purpose of binding events to each node in the native view tree.

[0075] Furthermore, in some embodiments, Figure 4 As shown, after generating the virtual view tree according to the layout information of the card interface in the above S204, the card interface generation method provided in the embodiment of the present disclosure may further include the following steps:

[0076] S216: Assign the view attribute information and event information corresponding to each component to the corresponding node of the virtual view tree.

[0077] Through the above embodiment, the view attribute information and event information corresponding to each component are assigned to the corresponding node of the virtual view tree, and the native view tree can be generated directly based on the view attribute information and event information corresponding to each component in the virtual view tree, thereby achieving the effect of quickly binding events to the native view tree.

[0078] In some embodiments, as Figure 4 As shown, after obtaining the view attribute information applicable to each node in the native view tree through the calculation in S208, the card interface generation method provided in the embodiment of the present disclosure may further include the following steps:

[0079] S218: Store the calculated view attribute information applicable to each node in the native view tree into the corresponding node in the layout engine node tree.

[0080] Through the above embodiment, the calculated view attribute information applicable to each node in the native view tree is stored in the corresponding node of the layout engine node tree, and the corresponding node in the native view tree can be assigned directly according to the view attribute information stored in each node in the layout engine node tree.

[0081] Figure 5 FIG. 1 is a schematic diagram showing a specific implementation architecture of a card interface generation method according to an exemplary embodiment. Figure 5 As shown, the client includes the event center (ActionCenter), the UI manager (UIManager), and the cross-platform layout calculation engine (Yoga Engine). The card interface layout information (Components) is delivered by the server. The event center primarily stores the correspondence between event identifiers (ActionId) and events (Actions). The UI manager primarily parses the layout information delivered by the server and constructs the native SDK view (View) based on the Yoga Engine.

[0082] Figure 6 S602 to S606 shown in FIG. 6 are the process of generating event dictionary information by the client. Figure 7 S702 to S720 shown in FIG are the processes of rendering and generating a card interface by the client according to the layout information sent by the server. Figure 6 and Figure 7 The specific implementation process of the card interface generation method in the embodiment of the present disclosure is described as follows:

[0083] 1) Register common event information on the client (such as following a user, unfollowing a user, jumping to a personal homepage, etc.), generate a unique event identifier for each event, and generate event dictionary information based on the correspondence between event type, event identifier and time.

[0084] 2) The server predefines the layout information of the card interface and sends the layout information (Components) to the client. The layout information sent includes: multiple components, each component corresponds to a view (View) of the client's native SDK, and is sent in the form of an array; each component includes but is not limited to: component identifier (componentId), event type (actionType), event identifier (actionId), view attribute information (viewAttributes), and subcomponent information (children).

[0085] 3) After the client receives the layout information from the server, the UIManager parses and renders it. The first to receive the layout information is the ComponentsInfoParser. After deserializing the information into JSON format, it traverses each component in the layout information and creates a virtual node in the virtual view tree based on each component's identifier. The relationships between the virtual nodes are connected based on the subcomponent information contained in each component, resulting in a virtual view tree.

[0086] like Figure 8 As shown, the layout information sent from the left is: component 1, component 2, component 3, component 4, component 5 and component 6; among them, the child nodes of component 1 are component 2, component 3 and component 4, and the child nodes of component 3 are component 5 and component 6. According to the layout information sent from the left, Figure 8 The virtual view tree shown on the right.

[0087] 4) After generating the virtual view tree, an engine node tree (Yoga node tree) is created in parallel with the virtual view tree, and the view attribute information corresponding to each node in the virtual view tree is assigned to the engine node tree (Yoga node tree) so that the cross-platform layout engine (Yoga engine) can calculate the layout information. In specific implementation, the Yoga engine's calculateLayout() API function can be called to calculate the absolute layout information (view attribute information of each component's corresponding view) of each node in the client's native view tree (native SDK's view tree). Optionally, the calculated absolute layout information can be assigned to each node of the engine node tree (Yoga node tree).

[0088] 5) Construct the native view tree of the native SDK based on the virtual View tree, and layout each node of the native View tree according to the layout information calculated by the Yoga engine, such as setting the X coordinate, Y coordinate, width (width), height (height), etc. of the view, and bind the corresponding event (Action) to each node in the current native view tree according to the event type (actionType) and event identifier (actionId) of the corresponding node in the virtual view tree. For example, when the event type is click (click), bind the event "Follow" with the corresponding event identifier, and pass the parameter information (Params) of the follow event to the corresponding event to complete the "Follow" operation.

[0089] like Figure 9 As shown, after the virtual view tree is generated according to the layout information issued, the Yoga node tree and the native view tree are constructed according to the virtual view tree, the view attribute information of each node in the Yoga node tree is assigned to the native view tree, and the events corresponding to each node in the virtual view are bound to the native view tree. The corresponding user interface can be generated according to the native view tree rendering.

[0090] Still Figure 3 Taking the card interface 30 shown as an example, an example of layout information sent in Json format is as follows:

[0091]

[0092]

[0093] According to the layout information issued above, the following can be constructed: Figure 10 The virtual view tree shown in FIG. Each node in the virtual view tree stores its corresponding component.

[0094] Then, follow Figure 10 The parent-child relationship between each node in the virtual view tree is shown, and a Yoga node tree with the same structure is constructed to be input to the Yoga engine. The implementation code example of constructing the Yoga node tree is as follows:

[0095] The code for constructing the yoga node corresponding to Node1 is as follows:

[0096] YogaNode yogaNode1=new YogaNode();

[0097] yogaNode1.setWidth(node1.width);

[0098] yogaNode1.setHeight(node1.height);

[0099] yogaNode1.setBorderRadius(node1.borderRadius);

[0100] yogaNode1.setMarginTop(node1.marginTop);

[0101] yogaNode1.setFlexDirection(node1.flexDirection);

[0102] yogaNode1.setJustifyContent(YogaJustify.CENTER);

[0103] yogaNode1.setAlignItems(TogaAlign.CENTER);

[0104] Construction Node 2 of the yoga version:

[0105] YogaNode yogaNode2=new YogaNode();

[0106] YogaNode yogaNode3=new YogaNode();

[0107] YogaNode yogaNode4=new YogaNode();

[0108] YogaNode yogaNode5=new YogaNode();

[0109] yogaNode1.addChild(yogaNode2);

[0110] yogaNode1.addChild(yogaNode3);

[0111] yogaNode1.addChild(yogaNode4);

[0112] yogaNode4.addChild(yogaNode5);

[0113] / / Node2, Node3, Node4, Node5

[0114] / / ...

[0115] yogaNode1.calculateLayout();

[0116] The following is an example of the implementation code for constructing a native view tree based on a virtual view tree:

[0117]

[0118] In specific implementation, the calculateLayout() function can be used to trigger the Yoga engine's layout calculation. After the calculation is completed, the Yoga engine assigns the layout information of the native view tree to the Yoga node tree, so that the layout information of each node in the Yoga node tree is assigned to the corresponding node in the native view tree. Taking node 1 as an example, the implementation code example of assigning the view attribute information of each node in the Yoga node tree to the corresponding node in the native view tree is as follows:

[0119] nativeNode1.setBackgroundColor(node1.backgroundColor);

[0120] nativeNode1.setX(yogaNode1.getX());

[0121] nativeNode1.setY(yogaNode1.getY());

[0122] nativeNode1.layoutParams.apply{

[0123] width=yogaNode1.witdh;

[0124] height = yogaNode1.height;

[0125] }

[0126] For other nodes in the Yoga node tree, refer to the above code to assign them to the corresponding nodes in the native view.

[0127] After the native View tree is constructed, the Android or iOS SDK on the client will render the native view tree to generate the corresponding user interface.

[0128] Based on the same inventive concept, the present disclosure also provides a card interface generation device, as described in the following embodiment. Since the principle of solving the problem in the device embodiment is similar to that in the above method embodiment, the implementation of the device embodiment can refer to the implementation of the above method embodiment, and the repeated parts will not be repeated.

[0129] Figure 11 FIG. 1 is a schematic diagram of a card interface generation device according to an exemplary embodiment. Figure 11The device includes a card layout information acquisition module 111, a virtual view tree generation module 112, a layout engine node tree generation module 113, a layout information conversion module 114, a native view tree generation module 115 and a rendering module 116.

[0130] Among them, the card layout information acquisition module 111 is configured to receive the layout information of the card interface, the layout information includes one or more components, each component corresponds to a view of the native software development kit SDK, and the component includes a component identifier, view attribute information corresponding to the component, and a corresponding sub-component identifier; the virtual view tree generation module 112 is configured to generate a virtual view tree according to the layout information of the card interface, the virtual view tree includes one or more virtual nodes, and the virtual nodes correspond to the components of the layout information; the layout engine node tree generation module 113 is configured to construct a layout engine node tree according to the virtual view tree, and assign the view attribute information corresponding to each virtual node in the virtual view tree to the corresponding node of the layout engine node tree, The layout engine node tree includes one or more nodes, and the nodes of the layout engine node tree correspond to the virtual nodes of the virtual view tree; the layout information conversion module 114 is configured to use the cross-platform layout calculation engine to calculate the view attribute information applicable to each node in the native view tree based on the view attribute information corresponding to each node in the layout engine node tree; the native view tree generation module 115 is configured to generate a native view tree based on the virtual view tree, and the native view tree includes one or more nodes, and the nodes of the native view tree correspond to the virtual nodes of the virtual view tree, and the view attribute information corresponding to each node in the native view tree is assigned to the corresponding node of the native view tree; the rendering module 116 is configured to generate a card interface based on the native view tree rendering.

[0131] In some embodiments, the component also includes: event information corresponding to the component; the card interface generation device provided in the embodiment of the present disclosure also includes: an event binding module 117, which is configured to bind parameter information of corresponding events to each node in the native view tree according to the event information corresponding to each virtual node in the virtual view tree; wherein the rendering module is also configured to render and generate a card interface according to the view attribute information and event information corresponding to each node in the native view tree.

[0132] In some embodiments, the event information includes: event type and event identifier; wherein, the event binding module 117 is also configured to search for the corresponding event from the pre-generated event dictionary information according to the event type and event identifier corresponding to each node in the virtual view tree, and bind the parameter information of the corresponding event to each node in the native view tree.

[0133] In some embodiments, the card interface generation device provided in the embodiments of the present disclosure may also include: an event predefinition module 118, configured to predefine the event type and event identifier of one or more events; an event dictionary information generation module 119, configured to generate event dictionary information based on the event type and event identifier of each event, wherein the event dictionary information stores each event, event identifier, and event type, each event type corresponds to one or more event identifiers, and each event identifier corresponds to an event; wherein the event binding module is also configured to search for corresponding events from the event dictionary information based on the event type and event identifier corresponding to each node in the virtual view tree, and bind the parameter information of the corresponding event to each node in the native view tree.

[0134] In some embodiments, the virtual view tree generation module 112 is further configured to traverse each component of the layout information, create a virtual node according to the component identifier of each component, and generate a connection relationship between each node according to the sub-component identifier corresponding to each component to obtain a virtual view tree.

[0135] In some embodiments, the virtual view tree generation module 112 is further configured to assign view attribute information and event information corresponding to each component to a corresponding node of the virtual view tree.

[0136] In some embodiments, the layout information conversion module 114 is further configured to store the calculated view attribute information applicable to each node in the native view tree to a corresponding node in the layout engine node tree.

[0137] It should be noted that the examples and application scenarios implemented by the above modules and corresponding steps are the same, but are not limited to the contents disclosed in the above method embodiments. It should be noted that the above modules as part of the device can be executed in a computer system such as a set of computer executable instructions.

[0138] Regarding the apparatus in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

[0139] Based on the same inventive concept, the present disclosure also provides a card interface generation system, as described in the following embodiments. Since the principles of the system embodiment to solve the problem are similar to those of the above method embodiment, the implementation of the system embodiment can refer to the implementation of the above method embodiment, and the repeated parts will not be repeated.

[0140] The card interface generation system provided in the embodiment of the present disclosure may include: a client (which may be Figure 1 The terminal device 101 shown) and the server (which may be Figure 1 server as shown).

[0141] Among them, the server is used to issue the layout information of the card interface, and the layout information includes one or more components, each component corresponds to a view of the native software development kit SDK, and the component includes a component identifier, the view attribute information corresponding to the component, and the corresponding sub-component identifier; the client is used to generate a virtual view tree according to the layout information of the card interface, and construct a layout engine node tree according to the virtual view tree, and assign the view attribute information corresponding to each virtual node in the virtual view tree to the corresponding node of the layout engine node tree, and use the cross-platform layout calculation engine to calculate the view attribute information applicable to each node in the native view tree according to the view attribute information corresponding to each node in the layout engine node tree, generate a native view tree according to the virtual view tree, assign the view attribute information corresponding to each node in the native view tree to the corresponding node of the native view tree, and render and generate a card interface according to the native view tree, wherein the virtual view tree includes one or more virtual nodes, and the virtual nodes correspond to the components of the layout information; the native view tree includes one or more nodes, and the nodes of the native view tree correspond to the virtual nodes of the virtual view tree.

[0142] Those skilled in the art will appreciate that various aspects of the present disclosure may be implemented as systems, methods, or program products. Therefore, various aspects of the present disclosure may be implemented in the following forms: a complete hardware implementation, a complete software implementation (including firmware, microcode, etc.), or a combination of hardware and software implementations, which may be collectively referred to herein as "circuits," "modules," or "systems."

[0143] Refer to the following Figure 12 12 is a diagram to describe the electronic device 1200 according to this embodiment of the present disclosure. Figure 12 The electronic device 1200 shown is merely an example and should not limit the functions and scope of use of the embodiments of the present disclosure.

[0144] like Figure 12 As shown, electronic device 1200 is implemented as a general-purpose computing device. Components of electronic device 1200 may include, but are not limited to, the aforementioned at least one processing unit 1210, the aforementioned at least one storage unit 1220, and a bus 1230 connecting various system components (including storage unit 1220 and processing unit 1210).

[0145] The storage unit stores program codes, which can be executed by the processing unit 1210, so that the processing unit 1210 executes the steps described in the above “Exemplary Method” section of this specification according to various exemplary embodiments of the present disclosure. For example, the processing unit 1210 can execute the following steps of the above-mentioned method embodiment: receiving layout information of the card interface, the layout information includes one or more components, each component corresponds to a view of the native software development kit SDK, and the component includes a component identifier, view attribute information corresponding to the component, and a corresponding sub-component identifier; generating a virtual view tree according to the layout information of the card interface, the virtual view tree includes one or more virtual nodes, and the virtual nodes correspond to the components of the layout information; generating a layout engine node tree according to the virtual view tree, and assigning the view attribute information corresponding to each virtual node in the virtual view tree to the corresponding node of the layout engine node tree, the layout engine node tree includes one or more nodes, and the nodes of the layout engine node tree correspond to the virtual nodes of the virtual view tree; using a cross-platform layout calculation engine to calculate view attribute information applicable to each node in the native view tree according to the view attribute information corresponding to each node in the layout engine node tree; generating a native view tree according to the virtual view tree, and assigning the calculated view attribute information applicable to each node in the native view tree to the corresponding node of the native view tree, the native view tree includes one or more nodes, and the nodes of the native view tree correspond to the virtual nodes of the virtual view tree; rendering and generating a card interface according to the native view tree.

[0146] The storage unit 1220 may include a readable medium in the form of a volatile storage unit, such as a random access memory unit (RAM) 12201 and / or a cache memory unit 12202 , and may further include a read-only memory unit (ROM) 12203 .

[0147] The storage unit 1220 may also include a program / utility 12204 having a set (at least one) of program modules 12205, such program modules 12205 including but not limited to: an operating system, one or more application programs, other program modules, and program data, each of which or some combination may include an implementation of a network environment.

[0148] The bus 1230 may represent one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, a processing unit, or a local bus using any of a variety of bus architectures.

[0149] Electronic device 1200 can also communicate with one or more external devices 1240 (e.g., a keyboard, pointing device, Bluetooth device, etc.), one or more devices that enable a user to interact with electronic device 1200, and / or any device that enables electronic device 1200 to communicate with one or more other computing devices (e.g., a router, modem, etc.). Such communication can occur via input / output (I / O) interface 1250. Furthermore, electronic device 1200 can communicate with one or more networks (e.g., a local area network (LAN), a wide area network (WAN), and / or a public network such as the Internet) via network adapter 1260. As shown, network adapter 1260 communicates with other modules of electronic device 1200 via bus 1230. It should be understood that, although not shown in the figure, other hardware and / or software modules can be used in conjunction with electronic device 1200, including but not limited to microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0150] Through the description of the above embodiments, it is easy for those skilled in the art to understand that the example embodiments described herein can be implemented by software or by combining software with necessary hardware. Therefore, the technical solution according to the embodiments of the present disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.) or on a network, and includes several instructions to enable a computing device (which can be a personal computer, a server, a terminal device, or a network device, etc.) to execute the method according to the embodiments of the present disclosure.

[0151] In an exemplary embodiment of the present disclosure, a computer-readable storage medium is also provided. The computer-readable storage medium may be a readable signal medium or a readable storage medium. A program product capable of implementing the above-mentioned method of the present disclosure is stored thereon. In some possible implementations, various aspects of the present disclosure may also be implemented in the form of a program product, which includes program code. When the program product is run on a terminal device, the program code is used to cause the terminal device to execute the steps according to various exemplary embodiments of the present disclosure described in the "Exemplary Methods" section above of this specification.

[0152] More specific examples of computer-readable storage media in the present disclosure may include, but are not limited to, an electrical connection having one or more conductors, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), optical fibers, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0153] In the present disclosure, a computer-readable storage medium may include a data signal propagated in baseband or as part of a carrier wave, which carries readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A readable signal medium may also be any readable medium other than a readable storage medium that can transmit, propagate, or transfer a program for use by or in conjunction with an instruction execution system, apparatus, or device.

[0154] Alternatively, the program code contained on the computer-readable storage medium may be transmitted using any appropriate medium, including but not limited to wireless, wired, optical cable, RF, etc., or any suitable combination thereof.

[0155] In a specific implementation, the program code for performing the operations of the present disclosure may be written in any combination of one or more programming languages, including object-oriented programming languages such as Java, C++, and the like, as well as conventional procedural programming languages such as "C" or similar programming languages. The program code may be executed entirely on the user computing device, partially on the user device, as a standalone software package, partially on the user computing device and partially on a remote computing device, or entirely on a remote computing device or server. In the case of a remote computing device, the remote computing device may be connected to the user computing device via any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computing device (e.g., via the Internet using an Internet service provider).

[0156] In an exemplary embodiment of the present disclosure, a computer program product is further provided, including a computer program / instruction, which implements any of the above-mentioned card interface generation methods when executed by a processor.

[0157] It should be noted that although several modules or units of the device for action execution are mentioned in the detailed description above, this division is not mandatory. In fact, according to the embodiments of the present disclosure, the features and functions of two or more modules or units described above can be concretized in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided into multiple modules or units to be concretized.

[0158] Furthermore, although the steps of the method of the present disclosure are described in a particular order in the accompanying drawings, this does not require or imply that the steps must be performed in this particular order, or that all steps shown must be performed to achieve the desired results. Additionally or alternatively, some steps may be omitted, multiple steps may be combined into one step, and / or one step may be decomposed into multiple steps.

[0159] Through the description of the above embodiments, it is easy for those skilled in the art to understand that the example embodiments described herein can be implemented by software or by combining software with necessary hardware. Therefore, the technical solution according to the embodiments of the present disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.) or on a network, and includes several instructions to enable a computing device (which can be a personal computer, a server, a mobile terminal, or a network device, etc.) to execute the method according to the embodiments of the present disclosure.

[0160] Those skilled in the art will readily conceive of other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. This disclosure is intended to cover any variations, uses, or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art not disclosed herein. The description and examples are to be considered as exemplary only, and the true scope and spirit of the present disclosure are indicated by the appended claims.

[0161] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes can be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A card interface generation method, characterized in that: include: Receive layout information of the card interface, the layout information including one or more components, each component corresponding to a view of a native software development kit (SDK), the component including a component identifier, view attribute information corresponding to the component, and a corresponding subcomponent identifier; Generate a virtual view tree according to the layout information of the card interface, wherein the virtual view tree includes one or more virtual nodes, and the virtual nodes correspond to components of the layout information; generating a layout engine node tree according to the virtual view tree, and assigning view attribute information corresponding to each virtual node in the virtual view tree to a corresponding node of the layout engine node tree, wherein the layout engine node tree includes one or more nodes, and the nodes of the layout engine node tree correspond to the virtual nodes of the virtual view tree; Utilizing a cross-platform layout calculation engine to calculate view attribute information applicable to each node in the native view tree based on view attribute information corresponding to each node in the layout engine node tree; Generating a native view tree according to the virtual view tree, and assigning calculated view attribute information applicable to each node in the native view tree to a corresponding node in the native view tree, wherein the native view tree includes one or more nodes, and the nodes of the native view tree correspond to the virtual nodes of the virtual view tree; The card interface is generated according to the native view tree rendering.

2. The card interface generation method according to claim 1, characterized in that: The component further includes: event information corresponding to the component; before rendering and generating the card interface according to the native view tree, the method further includes: Binding parameter information of corresponding events to each node in the native view tree according to event information corresponding to each virtual node in the virtual view tree; The card interface is generated by rendering according to the native view tree, including: rendering and generating the card interface according to the view attribute information and event information corresponding to each node in the native view tree.

3. The card interface generation method according to claim 2, characterized in that: The event information includes: event type and event identifier; Among them, according to the event information corresponding to each virtual node in the virtual view tree, the parameter information of the corresponding event is bound to each node in the native view tree, including: according to the event type and event identifier corresponding to each node in the virtual view tree, the corresponding event is searched from the pre-generated event dictionary information, and the parameter information of the corresponding event is bound to each node in the native view tree.

4. The card interface generation method according to claim 3, characterized in that: Before searching for parameter information of the corresponding event from pre-generated event dictionary information based on the event type and event identifier corresponding to each node in the virtual view tree and binding the parameter information of the corresponding event to each node in the native view tree, the method further includes: Predefine event types and event identifiers of one or more events; According to the event type and event identifier of each event, event dictionary information is generated, wherein the event dictionary information stores each event, event identifier, and event type. Each event type corresponds to one or more event identifiers, and each event identifier corresponds to one event.

5. The card interface generation method according to claim 1, characterized in that: Generating a virtual view tree according to the layout information of the card interface includes: Traversing each component of the layout information, and creating a virtual node according to the component identifier of each component; According to the sub-component identifier corresponding to each component, the connection relationship between each node is generated to obtain a virtual view tree.

6. The card interface generation method according to claim 5, characterized in that: After generating a connection relationship between nodes based on the sub-component identifier corresponding to each component to obtain a virtual view tree, the method further includes: The view attribute information and event information corresponding to each component are assigned to the corresponding node of the virtual view tree.

7. The card interface generation method according to claim 1, characterized in that: After calculating view attribute information applicable to each node in the native view tree using the cross-platform layout calculation engine based on the view attribute information corresponding to each node in the layout engine node tree, the method further includes: The calculated view attribute information applicable to each node in the native view tree is stored in the corresponding node of the layout engine node tree.

8. A card interface generation device, characterized in that: include: A card layout information acquisition module is configured to receive layout information of the card interface, wherein the layout information includes one or more components, each component corresponds to a view of the native software development kit (SDK), and the component includes a component identifier, view attribute information corresponding to the component, and a corresponding subcomponent identifier; a virtual view tree generating module configured to generate a virtual view tree according to the layout information of the card interface, wherein the virtual view tree includes one or more virtual nodes corresponding to components of the layout information; a layout engine node tree generation module configured to construct a layout engine node tree based on the virtual view tree, and assign view attribute information corresponding to each virtual node in the virtual view tree to a corresponding node of the layout engine node tree, wherein the layout engine node tree includes one or more nodes, and the nodes of the layout engine node tree correspond to the virtual nodes of the virtual view tree; a layout information conversion module configured to calculate, using a cross-platform layout calculation engine, view attribute information applicable to each node in the native view tree based on view attribute information corresponding to each node in the layout engine node tree; a native view tree generation module configured to generate a native view tree based on the virtual view tree, the native view tree including one or more nodes, the nodes of the native view tree corresponding to the virtual nodes of the virtual view tree, and assigning view attribute information corresponding to each node in the native view tree to the corresponding node of the native view tree; A rendering module is configured to generate the card interface according to the native view tree rendering.

9. A card interface generation system, characterized in that: include: Client and server; The server is used for the layout information of the card interface, and the layout information includes one or more components, each component corresponds to a view of the native software development kit SDK, and the component includes a component identifier, view attribute information corresponding to the component, and a corresponding subcomponent identifier; The client is used to generate a virtual view tree according to the layout information of the card interface, and construct a layout engine node tree according to the virtual view tree, and assign the view attribute information corresponding to each virtual node in the virtual view tree to the corresponding node of the layout engine node tree, and use a cross-platform layout calculation engine to calculate the view attribute information applicable to each node in the native view tree according to the view attribute information corresponding to each node in the layout engine node tree, generate a native view tree according to the virtual view tree, assign the view attribute information corresponding to each node in the native view tree to the corresponding node of the native view tree, and render and generate the card interface according to the native view tree, wherein the virtual view tree includes one or more virtual nodes, and the virtual nodes correspond to the components of the layout information; the native view tree includes one or more nodes, and the nodes of the native view tree correspond to the virtual nodes of the virtual view tree.

10. An electronic device, characterized in that: include: processor; a memory for storing instructions executable by the processor; The processor is configured to execute the instructions to implement the card interface generation method according to any one of claims 1 to 7.

11. A computer-readable storage medium, characterized in that When the instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the card interface generation method according to any one of claims 1 to 7.

Images