CN116414359A

CN116414359A - Card layout method, device, medium and electronic equipment

Info

Publication number: CN116414359A
Application number: CN202310403869.XA
Authority: CN
Inventors: 陈龙; 陈宇中
Original assignee: Beijing Youzhuju Network Technology Co Ltd
Current assignee: Beijing Youzhuju Network Technology Co Ltd
Priority date: 2023-04-14
Filing date: 2023-04-14
Publication date: 2023-07-11

Abstract

The disclosure relates to a card layout method, a device, a medium and an electronic device, comprising: receiving card data of a card sent by a server, wherein the card data comprises layout information, and the layout information comprises a target anchor point, a distance between the card and the target anchor point and a target container; and configuring attribute values of layout attributes of the cards according to the layout information, wherein the layout attributes comprise position attributes, and the position attributes are used for determining the positions of the cards displayed on the client page, so that the online efficiency of the cards is improved, and the code quantity of the client is reduced.

Description

Card layout method, device, medium and electronic equipment

Technical Field

The disclosure relates to the technical field of electronic information, in particular to a card layout method, a device, a medium and electronic equipment.

Background

A card is a control that is displayed in a client for interaction with a user. The cards in the traditional clients are all determined by the clients, if the clients on line need to be added with the cards, the clients on line can be used by the added cards only through processes of development, testing, version issuing, clients with new version downloading by users and the like, and the processes can seriously influence the use of the clients by users; in addition, a set of related codes can be added when the number of the cards is increased by the client, the code quantity of the client is also increased continuously along with the increase of the number of the cards, and the later-stage code maintenance difficulty is high.

Disclosure of Invention

This summary is provided to introduce a selection of concepts in a simplified form that are further described below in the detailed description. This summary is not intended to identify key features or essential features of the claimed subject matter, nor is it intended to be used to limit the scope of the claimed subject matter.

In a first aspect, the present disclosure provides a card layout method, comprising:

receiving card data of a card sent by a server, wherein the card data comprises layout information, and the layout information comprises a target anchor point, a distance between the card and the target anchor point and a target container;

and configuring attribute values of layout attributes of the cards according to the layout information, wherein the layout attributes comprise position attributes used for determining positions of the cards displayed on the client page.

In a second aspect, the present disclosure provides a card layout method comprising:

transmitting card data of the card to the terminal;

the card data comprises layout information, wherein the layout information at least comprises a target anchor point, a distance between the card and the target anchor point and a target container, the layout information is used for configuring attribute values of layout attributes of the card by the terminal, the layout attributes comprise position attributes, and the position attributes are used for determining positions of the card displayed on a client page.

In a third aspect, the present disclosure provides a card layout apparatus comprising:

the receiving module is used for receiving card data of a card sent by the server side, wherein the card data comprises layout information, and the layout information comprises a target anchor point, a distance between the card and the target anchor point and a target container;

the first configuration module is used for configuring attribute values of layout attributes of the cards according to the layout information, wherein the layout attributes comprise position attributes, and the position attributes are used for determining positions of the cards displayed on a client page.

In a fourth aspect, the present disclosure provides a card layout device, comprising:

the sending module is used for sending card data of the card to the terminal;

In a fifth aspect, the present disclosure provides a computer readable medium having stored thereon a computer program which when executed by a processing device implements the steps of the method described in the first or second aspect.

In a sixth aspect, the present disclosure provides an electronic device, comprising:

a storage device having a computer program stored thereon;

processing means for executing said computer program in said storage means to carry out the steps of the method described in the first or second aspect.

According to the technical scheme, the server transmits the card data of the card to the terminal carrying the client, so that the terminal can configure the attribute value of the layout attribute of the card based on the target anchor point, the distance between the card and the target anchor point and the target container contained in the layout information in the card data, wherein the layout attribute comprises the position attribute for determining the position of the card displayed on the page of the client, and the dynamic layout of the card in the client can be realized without downloading the client of a new version by a user or the client of a new version, and the online efficiency of the card is improved; in addition, the client is not required to configure card data, so that the code quantity of the client is reduced, and the maintenance of later codes is facilitated.

Additional features and advantages of the present disclosure will be set forth in the detailed description which follows.

Drawings

The above and other features, advantages, and aspects of embodiments of the present disclosure will become more apparent by reference to the following detailed description when taken in conjunction with the accompanying drawings. The same or similar reference numbers will be used throughout the drawings to refer to the same or like elements. It should be understood that the figures are schematic and that elements and components are not necessarily drawn to scale. In the drawings:

FIG. 1 is a schematic diagram of one application environment of a card layout method shown in accordance with an exemplary embodiment of the present disclosure.

Fig. 2 is a schematic diagram of a client page shown in accordance with an exemplary embodiment of the present disclosure.

FIG. 3 is a schematic diagram of a container of a client page, according to an exemplary embodiment of the present disclosure.

Fig. 4 is a flow chart illustrating a method of card layout according to an exemplary embodiment of the present disclosure.

Fig. 5 is a schematic diagram illustrating the location of a card and a target anchor point according to an exemplary embodiment of the present disclosure.

Fig. 6 is a schematic diagram illustrating the location of a card and a target anchor according to an exemplary embodiment of the present disclosure.

Fig. 7 is a schematic diagram of a client page shown in accordance with an exemplary embodiment of the present disclosure.

Fig. 8 is a flow chart illustrating a method of card layout according to an exemplary embodiment of the present disclosure.

Fig. 9 is a block diagram of a card layout device, according to an exemplary embodiment of the present disclosure.

Fig. 10 is a block diagram of a card layout device, according to an exemplary embodiment of the present disclosure.

Fig. 11 is a block diagram of an electronic device, according to an exemplary embodiment of the present disclosure.

Detailed Description

Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While certain embodiments of the present disclosure have been shown in the accompanying drawings, it is to be understood that the present disclosure may be embodied in various forms and should not be construed as limited to the embodiments set forth herein, but are provided to provide a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the present disclosure are for illustration purposes only and are not intended to limit the scope of the present disclosure.

It should be understood that the various steps recited in the method embodiments of the present disclosure may be performed in a different order and/or performed in parallel. Furthermore, method embodiments may include additional steps and/or omit performing the illustrated steps. The scope of the present disclosure is not limited in this respect.

The term "including" and variations thereof as used herein are intended to be open-ended, i.e., including, but not limited to. The term "based on" is based at least in part on. The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments. Related definitions of other terms will be given in the description below.

It should be noted that the terms "first," "second," and the like in this disclosure are merely used to distinguish between different devices, modules, or units and are not used to define an order or interdependence of functions performed by the devices, modules, or units.

It should be noted that references to "one", "a plurality" and "a plurality" in this disclosure are intended to be illustrative rather than limiting, and those of ordinary skill in the art will appreciate that "one or more" is intended to be understood as "one or more" unless the context clearly indicates otherwise.

The names of messages or information interacted between the various devices in the embodiments of the present disclosure are for illustrative purposes only and are not intended to limit the scope of such messages or information.

It will be appreciated that prior to using the technical solutions disclosed in the embodiments of the present disclosure, the user should be informed and authorized of the type, usage range, usage scenario, etc. of the personal information related to the present disclosure in an appropriate manner according to the relevant legal regulations.

For example, in response to receiving an active request from a user, a prompt is sent to the user to explicitly prompt the user that the operation it is requesting to perform will require personal information to be obtained and used with the user. Thus, the user can autonomously select whether to provide personal information to software or hardware such as an electronic device, an application program, a server or a storage medium for executing the operation of the technical scheme of the present disclosure according to the prompt information.

As an alternative but non-limiting implementation, in response to receiving an active request from a user, the manner in which the prompt information is sent to the user may be, for example, a popup, in which the prompt information may be presented in a text manner. In addition, a selection control for the user to select to provide personal information to the electronic device in a 'consent' or 'disagreement' manner can be carried in the popup window.

It will be appreciated that the above-described notification and user authorization process is merely illustrative and not limiting of the implementations of the present disclosure, and that other ways of satisfying relevant legal regulations may be applied to the implementations of the present disclosure.

Meanwhile, it can be understood that the data (including but not limited to the data itself, the acquisition or the use of the data) related to the technical scheme should conform to the requirements of the corresponding laws and regulations and related regulations.

First, an explanation will be given in this disclosure concerning the application environment.

FIG. 1 is a schematic diagram of one application environment of a card layout method shown in accordance with an exemplary embodiment of the present disclosure. Referring to fig. 1, the system comprises a server side and a terminal carrying a client side, wherein the terminal receives card data of a card sent by the server side, the card data comprises layout information, the layout information comprises a target anchor point, a distance between the card and the target anchor point and a target container, the terminal configures attribute values of layout attributes of the card according to the layout information, and the layout attributes comprise position attributes for determining the display position of the card on a client page, so that the card of the client page is dynamically laid out.

Fig. 2 is a schematic diagram of a client page shown in accordance with an exemplary embodiment of the present disclosure. Referring to FIG. 2, a client page is configured with controls having interactions with a user, which may be identified by text, such as "first page," "friends," "messages," and "recommendations" in FIG. 2, etc., and icons, such as "heart identification" and "five star identification" in FIG. 2, etc., which may be targeted anchor points. It should be noted that, the control and the position of the control in the client page are fixed and are generally configured when the client is developed, so that after the client is online, the control and the position of the control are generally unchanged, and therefore, the control and the position of the control can be used as a reference object of the card in the client page in a dynamic insertion manner and used for positioning the card in the client page.

In addition, in a client page, different containers having a hierarchical relationship are generally provided, and for two containers having a hierarchical relationship, contents contained in an upper container will load contents contained in a lower container. The content here is for example the controls and cards of the client page described above, etc. In order to facilitate card insertion into the client page, some idle containers can be configured in advance when the client is developed, so that cards can be inserted into the containers in a later dynamic mode, and dynamic layout of the cards is realized.

Referring to the schematic diagram of a container of a client page shown in fig. 3, the client page may include container 1, container 2, … …, and container N, N is an integer greater than 2. It should be noted that the same level may also comprise a plurality of containers, for example, containers 2 and 21 belonging to the same level, the containers 2 and 21 being of different sizes, i.e. the positions with respect to the terminal screen may be different.

Fig. 4 is a flow chart illustrating a method of card layout according to an exemplary embodiment of the present disclosure. The card layout method may be performed by a terminal hosting a client, and referring to fig. 1, the method may include the steps of:

step 401, receiving card data of a card sent by a server, wherein the card data comprises layout information, and the layout information comprises a target anchor point, a distance between the card and the target anchor point and a target container.

It should be noted that, the target anchor point may be the control, and the target container may be a container configured with some idleness in advance when the client is developed.

Illustratively, the spacing between the card and the target anchor point may be the spacing of the card left end and the target anchor point right end, the spacing between the card and the target anchor point may be the spacing of the card left end and the target anchor point left end, the spacing between the card and the target anchor point may be the spacing of the card right end and the target anchor point right end, the spacing between the card and the target anchor point may be the spacing of the card top end and the target anchor point top end, the spacing between the card and the target anchor point may be the spacing of the card top end and the target anchor point bottom end, the spacing between the card and the target anchor point may be the spacing of the card bottom end and the target anchor point top end, the spacing between the card and the target anchor point may be the spacing of the card bottom end and the target anchor point bottom end, and so on.

Referring to FIG. 5, a schematic diagram of the location of a card and a target anchor is shown. Referring to fig. 5, the distance between the left end of the card and the right end of the target anchor point is a distance a, and the distance between the bottom end of the card and the top end of the target anchor point is a distance B.

The distance between the card and the target anchor point can be described through a first preset variable and a second preset variable. The first preset variables are used for describing the dependency relationship between the card and the target anchor point, for example, referring to each first preset variable in the following table 1, the first column in the following table 1 represents the meaning of the first preset variable, and the second column represents the representation of the character string of the first preset variable:

the left end of the card and the right end of the target anchor point	left_to_right_of
		Card left end and target anchor point left end	left_to_left_of
The right end of the card and the right end of the target anchor point	right_to_right_of
		Card right end and target anchor point left end	right_to_left_of
Card top and target anchor top	top_to_top_of
		Card top and target anchor bottom	top_to_bottom_of
The bottom end of the card and the top end of the target anchor point	bottom_to_top_of
		The bottom end of the card and the bottom end of the target anchor point	bottom_to_bottom_of

TABLE 1

Wherein, table 1 above illustrates the dependency of the card on the target anchor point.

The second preset variable is used for describing a specific interval of the dependency relationship represented by the corresponding first preset variable. Illustratively, referring to the second preset variable of table 2 below, the first column in table 2 below represents the meaning of the second preset variable, and the second column represents the representation of the string of the second preset variable:

Distance 1	offset_left
		Distance 2	offset_bottom
Distance 3	offset_right
		Distance 4	offset_top

TABLE 2

The offset_left may describe a distance between the left end of the card and the right end of the target anchor point and a distance between the left end of the card and the left end of the target anchor point, the offset_bottom may describe a distance between the bottom end of the card and the top end of the target anchor point and a distance between the bottom end of the card and the bottom end of the target anchor point, the offset_right may describe a distance between the right end of the card and the right end of the target anchor point and a distance between the right end of the card and the left end of the target anchor point, and the offset_top may describe a distance between the top end of the card and the top end of the target anchor point and a distance between the top end of the card and the bottom end of the target anchor point.

For example, consider the following code describing the spacing of the card from the target anchor in fig. 5:

{

left _ to _ right _ of: "target anchor",

offset _ left: "distance a",

bottom _ to _ top _ of: "target anchor",

offset_bottom: "distance B"

}

And step 402, configuring attribute values of layout attributes of the cards according to the layout information, wherein the layout attributes comprise position attributes for determining positions of the cards displayed on the client page.

As can be seen from the foregoing, the client page may include a plurality of containers, and thus, the positions where the cards are displayed on the client page include the planar positions where the cards are on the screen, and the containers where the cards are located. With the example of fig. 5, the card can be positioned to a planar position on the screen based on distance a and distance B. In addition, the container in which the card is located is determined by the target container.

In addition, the layout information further includes a specified size, and the layout attribute further includes a size attribute. Therefore, the configuring the attribute value of the layout attribute of the card according to the layout information may further include: the attribute values of the card dimension attribute are configured according to the specified dimension, where the specified dimension may include a width of the card and a height of the card, and the dimension attribute includes a width attribute and a height attribute, respectively.

The width attribute may be represented by a character string width, and the height attribute may be represented by a character string height.

In addition, the width and height of the card may also be determined based on the spacing between the card and the target anchor point. It should be noted that, for example, taking the width of the calculated card as an example, when the distance between the card and the target anchor point includes the distance between the left end of the card and the right end of the target anchor point and the distance between the right end of the card and the right end of the target anchor point, the distance between the right end of the card and the right end of the target anchor point and the distance between the left end of the card and the right end of the target anchor point may be used as the constraint to obtain the width of the card, i.e., the difference between the distance between the right end of the card and the right end of the target anchor point and the distance between the left end of the card and the right end of the target anchor point may be used as the width of the card.

For another example, referring to fig. 6, in fig. 6, the layout data issued by the server side includes two target anchors, a first target anchor and a second target anchor. Taking the width of the calculated card as an example, when the distance between the card and the first target anchor point comprises the distance between the left end of the card and the right end of the first target anchor point and the distance between the right end of the card and the left end of the second target anchor point, the distance between the card and the first target anchor point comprises the distance between the left end of the card and the right end of the first target anchor point as constraint, and the width of the card is obtained.

According to the method, the server transmits the card data of the card to the terminal carrying the client, so that the terminal can configure the attribute value of the layout attribute of the card based on the target anchor point, the distance between the card and the target anchor point and the target container, which are included in the layout information in the card data, wherein the layout attribute comprises the position attribute for determining the position of the card displayed on the page of the client, and therefore the dynamic layout of the card in the client can be realized without downloading the client of a new version by a user or the client of a new version, and the online efficiency of the card is improved; in addition, the client is not required to configure card data, so that the code quantity of the client is reduced, and the maintenance of later codes is facilitated.

In some embodiments, the step of configuring the attribute value of the layout attribute of the card according to the layout information may be implemented by: determining first position information of a target anchor point relative to a target container; determining second position information of the card relative to the target container according to the first position information and the distance between the card and the target anchor point; and configuring attribute values of the position attribute of the card according to the second position information and the position of the target container on the client page.

The position attribute of the card may include a transverse position attribute, a longitudinal position attribute and a container attribute of the card, wherein the transverse position attribute includes an attribute describing a distance between the left end of the card and the left end of the target container and an attribute describing a distance between the right end of the card and the right end of the target container, and the longitudinal position attribute includes an attribute describing a distance between the top end of the card and the top end of the target container and an attribute describing a distance between the bottom end of the card and the bottom end of the target container.

The type of the attribute values of the transverse position attribute and the longitudinal position attribute is an int type, i.e. a numerical value, and the type of the attribute values of the container attribute is a string type, i.e. a card container identifier, and the card container identifier may refer to the following related embodiments, which are not described herein.

Taking the transverse position attribute as an example, the first position information is position information of an attribute value of the calculated transverse position attribute, that is, the first position information may include a distance between the left end of the target anchor point and the left end of the target container and a distance between the right end of the target anchor point and the right end of the target container; accordingly, the spacing between the card and the target anchor point may include the spacing between the left end of the target anchor point and the left end of the card and the spacing between the right end of the target anchor point and the right end of the card; accordingly, the second position information of the card relative to the target container may include a spacing of the left end of the card from the left end of the target container and a spacing of the right end of the card from the right end of the target container, and attribute values describing corresponding attributes according to the spacing configuration herein.

Taking the longitudinal position attribute as an example, the first position information is position information of an attribute value of the calculated longitudinal position attribute, that is, the first position information can be understood to include a distance between the top end of the target anchor point and the top end of the target container and a distance between the bottom end of the target anchor point and the bottom end of the target container; correspondingly, the distance between the card and the target anchor point comprises the distance between the top end of the target anchor point and the top end of the card and the distance between the bottom end of the target anchor point and the bottom end of the card; accordingly, the second position information of the card relative to the target container includes a spacing of the top end of the card from the top end of the target container and a spacing of the bottom end of the card from the bottom end of the target container, and attribute values describing corresponding attributes are configured according to the spacing.

It should be noted that, since different containers may have different sizes, the levels of the containers in which the card and the anchor point are located may be different, and thus, the relative positions of the card and the target container in which the card is located, that is, the attribute values of the transverse position attribute and the attribute values of the longitudinal position attribute, need to be determined. In order to determine the relative position of the card and the target container, the target anchor point, the card and the target container are required to be unified under the same coordinate system, it should be noted that, the card and the target container are under the unified coordinate system, and the first position information of the target anchor point relative to the target container is determined, so that the target anchor point and the target container can be unified under the unified coordinate.

Referring to fig. 7, the card is located within a target container, the level of which is the container of the upper layer of the level of the container where the target anchor point is located. The terminal screen is taken as a reference object, and the relative position information of the target container relative to the terminal screen, namely the distance shown by a third line type, can be determined; the terminal screen is taken as a reference object, and the relative position information of the target anchor point relative to the terminal screen, namely the distance shown by the first line type, can be determined; the first location information of the target anchor point relative to the target container may be determined based on the relative location information of the target container relative to the terminal screen and the relative location information of the target anchor point relative to the terminal screen. And determining second position information of the card relative to the target container, namely the distance shown by a second line type, according to the first position information of the target anchor point relative to the target container and the distance between the card and the target anchor point. And configuring the attribute value of the attribute corresponding to the distance through the distance shown by the second line type, and positioning the display position of the card on the page of the client according to the attribute value of the attribute.

Referring to fig. 7, an example of calculating the distance between the left end of the card and the left end of the target container will be described, and in fig. 7, the left end of the target anchor point is located outside the target container under the same coordinate system, and the distance between the left end of the card and the left end of the target anchor point and the distance between the left end of the target anchor point and the left end of the target container are referred to as the distance between the left end of the card and the left end of the target container.

Describing the calculation of the distance between the right end of the card and the right end of the target container as an example, in fig. 7, the right end of the target anchor point is located in the target container under the same coordinate system, and the distance between the right end of the card and the right end of the target anchor point and the distance between the right end of the target anchor point and the right end of the target container are used as the distance between the left end of the card and the left end of the target container.

It should be noted that, the calculating manner of the distance between the top end of the card and the top end of the target container and the distance between the bottom end of the card and the bottom end of the target container may refer to the above-mentioned related embodiments, and this embodiment is not described herein.

In some embodiments, the location attributes include an attribute describing a spacing of a top end of the card from a top end of the target container, an attribute describing a spacing of a bottom end of the card from a bottom end of the target container, an attribute describing a spacing of a left end of the card from a left end of the target container, and an attribute describing a spacing of a right end of the card from a right end of the target container. Wherein the height of the card can be determined from the attribute value describing the spacing of the top end of the card from the top end of the target container and from the attribute value describing the spacing of the bottom end of the card from the bottom end of the target container, and the width of the card can be determined from the attribute value describing the spacing of the left end of the card from the left end of the target container and from the attribute value describing the spacing of the right end of the card from the right end of the target container, where the width and height identified from the attribute value of the position attribute are referred to as the target size in the relevant embodiment.

As can be seen from the above description, the layout information sent by the server side includes a specified size, and on this basis, the method may further include: and determining the target size of the card according to the attribute value of the position attribute, and updating the attribute value of the size attribute of the configured card to the target size under the condition that the target size is inconsistent with the designated size.

The determining the target size of the card according to the attribute value of the location attribute may refer to the above-mentioned related embodiments, which are not described herein.

It is worth to say that, in the code flow, the appointed size is read first, and the corresponding size attribute is assigned based on the read appointed size; therefore, in the case where the target size does not coincide with the specified size, it is necessary to update the attribute value of the size attribute of the configured card to the target size, that is, to assign a value to the corresponding size attribute again based on the target size.

By the method, the position information of the left side, the right side, the upper side and the lower side of the card relative to the target container is calculated through the attribute value of the position attribute, so that accurate constraint of the width and the height of the card is realized, and the layout of the newly added card on the whole client page is avoided as much as possible.

In some embodiments, the method may further comprise: and under the condition that the position of the target anchor point on the client page is detected to be changed, re-executing the step of configuring the attribute value of the layout attribute of the card according to the layout information.

Wherein, a listener can be set for monitoring whether the position of the target anchor point changes in the client page.

It should be noted that, the client is continuously updated iteratively, in this updating process, the position of the target anchor point on the client page may be changed, and because the target anchor point is used to determine the position of the card on the client page, the step of re-executing the layout information and configuring the attribute value of the layout attribute of the card may be required under the condition that the position of the target anchor point on the client page is detected to be changed, so that the accurate layout of the position of the card on the client page is realized.

In some embodiments, the method may further comprise: acquiring an anchor point identification of at least one anchor point; storing the anchor point identification of the at least one anchor point to a software development tool package of the client so that the server side can determine the target anchor point by accessing the anchor point identification of the at least one anchor point in the software development tool package.

It should be noted that, the SDK (Software Development Kit ) of the client may facilitate creation of an application program (i.e., the client) through a compiler, a debugger, a software framework, etc., and may simply provide some files of an API (Application Programming Interface, application program interface) for a programming language, and call a code by calling the API. In this embodiment, the dynamic layout of the card may be implemented through an API provided by the SDK.

For example, the server side may access the anchor point identifier of the anchor point stored in the SDK, so as to obtain the configuration of the target anchor point in the implementation layout information. After the client receives the card data issued by the server, the SDK analyzes the card data, and as the anchor point identifiers of the anchor points are stored in the SDK, the SDK can analyze and obtain target anchor points depending on the card according to the issued card data and the anchor point identifiers stored by the client.

Through the mode, the SDK is used as a bridge between the server side and the client side, so that dynamic layout of the card is realized.

In some embodiments, the method may further comprise: acquiring a container identifier of at least one card container which is pre-buried in a client page; the container identification of the at least one card container is stored to the software development kit of the client so that the server side determines the target container by accessing the container identification of the at least one card container in the software development kit.

With continued reference to fig. 3, different containers are used to implement the layout of the content on the client page, so that multiple card containers may be configured in advance in the client page when the client is developed, and a target container in the card containers is used to accommodate cards. Wherein the container identification may be identified by a string of characters.

Similar to the anchor point identification, the container identification of the card container stored in the SDK can be accessed at the server side, so as to obtain the configuration of the target container in the implementation layout information. After the client receives the card data issued by the server, the SDK analyzes the card data, and the SDK can analyze and obtain a target container on which the card depends according to the issued card data and the container identifier stored by the client because the container identifier of the card container is stored in the SDK. Through the mode, the SDK is used as a bridge between the server side and the client side, so that dynamic layout of the card is realized.

In some embodiments, the card data further includes rendering information, the method further comprising: and configuring an attribute value of the rendering attribute of the card according to the rendering information, wherein the rendering information is used for determining the rendering time of the card and whether the card is visible in rendering.

See table 3 below:

TABLE 3 Table 3

Among other things, the rendering attributes may include a rendering opportunity attribute and a visibility control attribute. The rendering opportunity attribute may be represented by a parameter render_mode, and the type of attribute value of the render_mode may be an int type, and the rendering opportunity attribute is used to specify a rendering opportunity of the card. For example, the attribute values of render_mode may be 0, 1, 2, and 3,0 indicating that the slide to video is immediately rendered, 1 indicating that the slide to video is rendered after a delay of a preset period of time, 2 indicating that the slide to video starts to render immediately before the video, and 3 indicating that the slide to video is not actively rendered. The video here may be a specified type of video, such as a video of a product presentation. The preset duration is specified by a parameter render_delay_time, and the attribute value of render_delay_time may be of the int type.

The visibility control attribute may be represented by a parameter visible, the type of the attribute value of the visible may be a category, the attribute value of the visible may be true or false, where true represents that the card is visible when rendered, false represents that the card is invisible when rendered, and if not visible, the client may change the attribute value of the visible from false to true at a proper time by a setVisible method, i.e. adjust the visible.

It should be noted that, similar to the anchor point identifier, the above table 3 may be stored in the SDK of the client, and the server may access the parameters for identifying the rendering attribute and the corresponding attribute values in table 3, so as to determine the rendering information, and implement the dynamic layout of the card.

Based on the same inventive concept, the present disclosure further provides a card layout method, which may be executed by a server, and the card layout method may include: and sending card data of the card to the client, wherein the card data comprises layout information, the layout information at least comprises a target anchor point, a distance between the card and the target anchor point and a target container, the layout information is used for configuring an attribute value of a layout attribute of the card by the client, the layout attribute comprises a position attribute, and the position attribute is used for determining the display position of the card on a page of the client.

The client is mounted on the terminal.

In addition, for the implementation of the card layout method in this embodiment, reference may be made to the implementation of the related method, which is not described herein.

Fig. 8 is a flow chart illustrating a method of card layout according to an exemplary embodiment of the present disclosure. Referring to fig. 8, the method includes a server side transmitting card data of a card to a terminal. The terminal receives card data of a card sent by a server, wherein the card data comprises layout information, and the layout information comprises a target anchor point, a distance between the card and the target anchor point and a target container; and the terminal configures attribute values of layout attributes of the cards according to the layout information, wherein the layout attributes comprise position attributes used for determining positions of the cards displayed on the client page.

It should be noted that the terminal is mounted on the client.

In addition, reference may be made to the specific implementation manner of the related method for the specific implementation manner of the card layout method in this embodiment, which is not described herein.

Based on the same inventive concept, the present disclosure also provides a card layout device, and fig. 9 is a block diagram of a card layout device according to an exemplary embodiment of the present disclosure, the card layout device 900 including:

The receiving module 901 is configured to receive card data of a card sent by a server, where the card data includes layout information, and the layout information includes a target anchor point, a distance between the card and the target anchor point, and a target container;

the first configuration module 902 is configured to configure an attribute value of a layout attribute of the card according to the layout information, where the layout attribute includes a location attribute, and the location attribute is used to determine a location of the card displayed on a client page.

In some embodiments, the first configuration module 902 includes:

a first determining sub-module for determining first location information of the target anchor point relative to the target container;

a second determining sub-module, configured to determine second position information of the card relative to the target container according to the first position information and a distance between the card and the target anchor point;

and the configuration submodule is used for configuring the attribute value of the position attribute of the card according to the second position information and the position of the target container on the client page.

In some embodiments, the location attributes include an attribute describing a spacing of the top end of the card from the top end of the target container, an attribute describing a spacing of the bottom end of the card from the bottom end of the target container, an attribute describing a spacing of the left end of the card from the left end of the target container, and an attribute describing a spacing of the right end of the card from the right end of the target container, the layout information further includes a specified size, the layout attribute further includes a size attribute, and the configuration sub-module is further configured to configure an attribute value of the size attribute of the card according to the specified size;

The apparatus 900 further comprises:

and the updating module is used for determining the target size of the card according to the attribute value of the position attribute, and updating the configured attribute value of the size attribute of the card to the target size under the condition that the target size is inconsistent with the designated size.

In some embodiments, the first configuration module 902 is further configured to re-execute the step of configuring the attribute value of the layout attribute of the card according to the layout information if the position of the target anchor point on the client page is detected to change.

In some embodiments, the apparatus 900 further comprises:

the first acquisition module is used for acquiring an anchor point identifier of at least one anchor point;

and the first storage module is used for storing the anchor point identification of the at least one anchor point to the software development kit of the client so that the server side can determine the target anchor point by accessing the anchor point identification of the at least one anchor point in the software development kit.

In some embodiments, the apparatus 900 further comprises:

the second acquisition module is used for acquiring a container identifier of at least one card container, and the card container is pre-buried in the client page;

And the second storage module is used for storing the container identification of the at least one card container to the software development kit of the client so that the server side can determine the target container by accessing the container identification of the at least one card container in the software development kit.

In some embodiments, the card data further includes rendering information, and the apparatus 900 further includes:

and the second configuration module is used for configuring attribute values of rendering attributes of the cards according to the rendering information, wherein the rendering information is used for determining rendering time of the cards and whether the cards are visible in rendering.

For the implementation of each module in the apparatus 900, reference may be made to the above-mentioned related embodiments, which are not described herein.

Based on the same inventive concept, the present disclosure also provides a card layout device, and fig. 10 is a block diagram of a card layout device according to an exemplary embodiment of the present disclosure, the card layout device 1000 including:

a sending module 1001, configured to send card data of a card to a terminal;

For the implementation of each module in the apparatus 1000, reference may be made to the above-mentioned related embodiments, which are not described herein.

Based on the same inventive concept, the embodiments of the present disclosure also provide a computer readable medium having stored thereon a computer program which, when executed by a processing device, implements the steps of the above-described method.

Based on the same inventive concept, the embodiments of the present disclosure further provide an electronic device, including:

a storage device having a computer program stored thereon;

processing means for executing said computer program in said storage means to carry out the steps of the above method.

Referring now to fig. 11, a schematic diagram of an electronic device 1100 (e.g., a terminal or server side of fig. 1) suitable for use in implementing embodiments of the present disclosure is shown. The terminal devices in the embodiments of the present disclosure may include, but are not limited to, mobile terminals such as mobile phones, notebook computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), in-vehicle terminals (e.g., in-vehicle navigation terminals), and the like, and stationary terminals such as digital TVs, desktop computers, and the like. The electronic device shown in fig. 11 is merely an example, and should not impose any limitations on the functionality and scope of use of embodiments of the present disclosure.

As shown in fig. 11, the electronic device 1100 may include a processing means (e.g., a central processor, a graphics processor, etc.) 1101 that may perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) 1102 or a program loaded from a storage means 1108 into a Random Access Memory (RAM) 1103. In the RAM 1103, various programs and data necessary for the operation of the electronic device 1100 are also stored. The processing device 1101, ROM 1102, and RAM 1103 are connected to each other by a bus 1104. An input/output (I/O) interface 1105 is also connected to bus 1104.

In general, the following devices may be connected to the I/O interface 1105: input devices 1106 including, for example, a touch screen, touchpad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, and the like; an output device 1107 including, for example, a Liquid Crystal Display (LCD), a speaker, a vibrator, and the like; storage 1108, including for example, magnetic tape, hard disk, etc.; and a communication device 1109. The communication means 1109 may allow the electronic device 1100 to communicate wirelessly or by wire with other devices to exchange data. While fig. 11 illustrates an electronic device 1100 having various means, it is to be understood that not all illustrated means are required to be implemented or provided. More or fewer devices may be implemented or provided instead.

In particular, according to embodiments of the present disclosure, the processes described above with reference to flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a non-transitory computer readable medium, the computer program comprising program code for performing the method shown in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network via communications device 1109, or from storage device 1108, or from ROM 1102. The above-described functions defined in the methods of the embodiments of the present disclosure are performed when the computer program is executed by the processing device 1101.

It should be noted that the computer readable medium described in the present disclosure may be a computer readable signal medium or a computer readable storage medium, or any combination of the two. The computer readable storage medium can be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples of the computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this disclosure, a computer-readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In the present disclosure, however, the computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, with the computer-readable program code embodied therein. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: electrical wires, fiber optic cables, RF (radio frequency), and the like, or any suitable combination of the foregoing.

In some implementations, the client, server side may communicate using any currently known or future developed network protocol, such as HTTP (HyperText Transfer Protocol ), and may be interconnected with any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a local area network ("LAN"), a wide area network ("WAN"), the internet (e.g., the internet), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future developed networks.

The computer readable medium may be contained in the electronic device; or may exist alone without being incorporated into the electronic device.

The computer readable medium carries one or more programs which, when executed by the electronic device, cause the electronic device to: receiving card data of a card sent by a server, wherein the card data comprises layout information, and the layout information comprises a target anchor point, a distance between the card and the target anchor point and a target container; and configuring attribute values of layout attributes of the cards according to the layout information, wherein the layout attributes comprise position attributes used for determining positions of the cards displayed on the client page.

Computer program code for carrying out operations of the present disclosure may be written in one or more programming languages, including, but not limited to, an object oriented programming language such as Java, smalltalk, C ++ and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to an external computer (for example, through the Internet using an Internet service provider).

The flowcharts and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.

The modules described in the embodiments of the present disclosure may be implemented in software or hardware. The name of a module does not in some cases define the module itself.

The functions described above herein may be performed, at least in part, by one or more hardware logic components. For example, without limitation, exemplary types of hardware logic components that may be used include: a Field Programmable Gate Array (FPGA), an Application Specific Integrated Circuit (ASIC), an Application Specific Standard Product (ASSP), a system on a chip (SOC), a Complex Programmable Logic Device (CPLD), and the like.

In the context of this disclosure, a machine-readable medium may be a tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. The machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

The foregoing description is only of the preferred embodiments of the present disclosure and description of the principles of the technology being employed. It will be appreciated by persons skilled in the art that the scope of the disclosure referred to in this disclosure is not limited to the specific combinations of features described above, but also covers other embodiments which may be formed by any combination of features described above or equivalents thereof without departing from the spirit of the disclosure. Such as those described above, are mutually substituted with the technical features having similar functions disclosed in the present disclosure (but not limited thereto).

Moreover, although operations are depicted in a particular order, this should not be understood as requiring that such operations be performed in the particular order shown or in sequential order. In certain circumstances, multitasking and parallel processing may be advantageous. Likewise, while several specific implementation details are included in the above discussion, these should not be construed as limiting the scope of the present disclosure. Certain features that are described in the context of separate embodiments can also be implemented in combination in a single embodiment. Conversely, various features that are described in the context of a single embodiment can also be implemented in multiple embodiments separately or in any suitable subcombination.

Although the subject matter has been described in language specific to structural features and/or methodological acts, it is to be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or acts described above. Rather, the specific features and acts described above are example forms of implementing the claims. The specific manner in which the various modules perform the operations in the apparatus of the above embodiments have been described in detail in connection with the embodiments of the method, and will not be described in detail herein.

Claims

1. A card layout method, comprising:

2. The method of claim 1, wherein configuring the attribute values of the layout attributes of the card according to the layout information comprises:

Determining first location information of the target anchor point relative to the target container;

determining second position information of the card relative to the target container according to the first position information and the distance between the card and the target anchor point;

and configuring an attribute value of the position attribute of the card according to the second position information and the position of the target container on the client page.

3. The method of claim 2, wherein the location attributes include an attribute describing a spacing of the top end of the card from the top end of the target container, an attribute describing a spacing of the bottom end of the card from the bottom end of the target container, an attribute describing a spacing of the left end of the card from the left end of the target container, and an attribute describing a spacing of the right end of the card from the right end of the target container, the layout information further includes a specified size, the layout attributes further include a size attribute, and configuring attribute values of the layout attributes of the card according to the layout information further includes:

configuring an attribute value of a size attribute of the card according to the specified size;

the method further comprises the steps of: and determining the target size of the card according to the attribute value of the position attribute, and updating the configured attribute value of the size attribute of the card to the target size under the condition that the target size is inconsistent with the designated size.

4. The method according to claim 1, wherein the method further comprises:

and re-executing the attribute value of the layout attribute of the card according to the layout information under the condition that the position of the target anchor point on the client page is detected to be changed.

5. The method according to claim 1, wherein the method further comprises:

acquiring an anchor point identification of at least one anchor point;

storing the anchor point identification of the at least one anchor point to a software development tool package of the client so that the server side can determine the target anchor point by accessing the anchor point identification of the at least one anchor point in the software development tool package.

6. The method according to claim 1, wherein the method further comprises:

acquiring a container identifier of at least one card container, wherein the card container is pre-embedded in the client page;

storing the container identification of the at least one card container to a software development kit of the client so that the server side determines the target container by accessing the container identification of the at least one card container in the software development kit.

7. The method of claim 1, wherein the card data further comprises rendering information, the method further comprising:

and configuring an attribute value of the rendering attribute of the card according to the rendering information, wherein the rendering information is used for determining the rendering time of the card and whether the card is visible in rendering.

8. A card layout method, comprising:

transmitting card data of the card to the terminal;

9. A card layout device, comprising:

10. A card layout device, comprising:

the sending module is used for sending card data of the card to the terminal;

11. A computer readable medium on which a computer program is stored, characterized in that the program, when being executed by a processing device, carries out the steps of the method according to any one of claims 1-8.

12. An electronic device, comprising:

a storage device having a computer program stored thereon;

processing means for executing said computer program in said storage means to carry out the steps of the method according to any one of claims 1-8.