卡片布局方法、装置、介质及电子设备与流程

1.本公开涉及电子信息技术领域，具体地，涉及一种卡片布局方法、装置、介质及电子设备。


背景技术：

2.卡片是一种显示在客户端中，以便与用户产生交互的控件。传统的客户端中的卡片都是由客户端决定的，如果需要增加卡片需要对上线的客户端进行下线，然后经过开发、测试、发版和用户下载新版本的客户端等流程才能实现增加了卡片的客户端的上线使用，此流程会严重影响用户对客户端的使用；此外，客户端增加卡片就会增加一套相关代码，随着卡片数量的增多，客户端的代码量也不断增加，后期代码维护难度高。


技术实现要素：

3.提供该发明内容部分以便以简要的形式介绍构思，这些构思将在后面的具体实施方式部分被详细描述。该发明内容部分并不旨在标识要求保护的技术方案的关键特征或必要特征，也不旨在用于限制所要求的保护的技术方案的范围。
4.第一方面，本公开提供一种卡片布局方法，包括：
5.接收服务器端发送的卡片的卡片数据，其中，所述卡片数据包括布局信息，所述布局信息包括目标锚点、所述卡片与所述目标锚点之间的间距以及目标容器；
6.根据所述布局信息，配置所述卡片的布局属性的属性值，所述布局属性包括位置属性，所述位置属性用于确定所述卡片在客户端页面显示的位置。
7.第二方面，本公开提供一种卡片布局方法，包括：
8.向终端发送卡片的卡片数据；
9.其中，所述卡片数据包括布局信息，所述布局信息至少包括目标锚点、所述卡片与所述目标锚点之间的间距以及目标容器，所述布局信息用于所述终端配置所述卡片的布局属性的属性值，所述布局属性包括位置属性，所述位置属性用于确定所述卡片在客户端页面显示的位置。
10.第三方面，本公开提供一种卡片布局装置，包括：
11.接收模块，用于接收服务器端发送的卡片的卡片数据，其中，所述卡片数据包括布局信息，所述布局信息包括目标锚点、所述卡片与所述目标锚点之间的间距以及目标容器；
12.第一配置模块，用于根据所述布局信息，配置所述卡片的布局属性的属性值，所述布局属性包括位置属性，所述位置属性用于确定所述卡片在客户端页面显示的位置。
13.第四方面，本公开提供一种卡片布局装置，包括：
14.发送模块，用于向终端发送卡片的卡片数据；
15.其中，所述卡片数据包括布局信息，所述布局信息至少包括目标锚点、所述卡片与所述目标锚点之间的间距以及目标容器，所述布局信息用于所述终端配置所述卡片的布局属性的属性值，所述布局属性包括位置属性，所述位置属性用于确定所述卡片在客户端页
面显示的位置。
16.第五方面，本公开提供一种计算机可读介质，其上存储有计算机程序，该程序被处理装置执行时实现第一方面或第二方面中所述方法的步骤。
17.第六方面，本公开提供一种电子设备，包括：
18.存储装置，其上存储有计算机程序；
19.处理装置，用于执行所述存储装置中的所述计算机程序，以实现第一方面或第二方面中所述方法的步骤。
20.通过上述技术方案，由服务器下发卡片的卡片数据至搭载客户端的终端，从而终端可以基于卡片数据中布局信息包括的目标锚点、卡片与目标锚点之间的间距以及目标容器，配置卡片的布局属性的属性值，其中，布局属性包括用于确定卡片在客户端页面显示的位置的位置属性，从而无需下线客户端也无需用户下载新版本的客户端，即可实现卡片在客户端中的动态布局，提升了卡片的上线效率；此外，由于无需客户端配置卡片数据，从而降低了客户端代码量，利于后期代码的维护。
21.本公开的其他特征和优点将在随后的具体实施方式部分予以详细说明。
附图说明
22.结合附图并参考以下具体实施方式，本公开各实施例的上述和其他特征、优点及方面将变得更加明显。贯穿附图中，相同或相似的附图标记表示相同或相似的元素。应当理解附图是示意性的，原件和元素不一定按照比例绘制。在附图中：
23.图1是根据本公开一示例性实施例示出的卡片布局方法的一种应用环境的示意图。
24.图2是根据本公开一示例性实施例示出的客户端页面的示意图。
25.图3是根据本公开一示例性实施例示出的一种客户端页面的容器的示意图。
26.图4是根据本公开一示例性实施例示出的一种卡片布局方法的流程图。
27.图5是根据本公开一示例性实施例示出的一种卡片与目标锚点的位置的示意图。
28.图6是根据本公开一示例性实施例示出的一种卡片与目标锚点的位置的示意图。
29.图7是根据本公开一示例性实施例示出的一种客户端页面的示意图。
30.图8是根据本公开一示例性实施例示出的一种卡片布局方法的流程图。
31.图9是根据本公开一示例性实施例示出的一种卡片布局装置的框图。
32.图10是根据本公开一示例性实施例示出的一种卡片布局装置的框图。
33.图11是根据本公开一示例性实施例示出的一种电子设备的框图。
具体实施方式
34.下面将参照附图更详细地描述本公开的实施例。虽然附图中显示了本公开的某些实施例，然而应当理解的是，本公开可以通过各种形式来实现，而且不应该被解释为限于这里阐述的实施例，相反提供这些实施例是为了更加透彻和完整地理解本公开。应当理解的是，本公开的附图及实施例仅用于示例性作用，并非用于限制本公开的保护范围。
35.应当理解，本公开的方法实施方式中记载的各个步骤可以按照不同的顺序执行，和/或并行执行。此外，方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本公
开的范围在此方面不受限制。
36.本文使用的术语“包括”及其变形是开放性包括，即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“一个实施例”表示“至少一个实施例”；术语“另一实施例”表示“至少一个另外的实施例”；术语“一些实施例”表示“至少一些实施例”。其他术语的相关定义将在下文描述中给出。
37.需要注意，本公开中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分，并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。
38.需要注意，本公开中提及的“一个”、“多个”的修饰是示意性而非限制性的，本领域技术人员应当理解，除非在上下文另有明确指出，否则应该理解为“一个或多个”。
39.本公开实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的，而并不是用于对这些消息或信息的范围进行限制。
40.可以理解的是，在使用本公开各实施例公开的技术方案之前，均应当依据相关法律法规通过恰当的方式对本公开所涉及个人信息的类型、使用范围、使用场景等告知用户并获得用户的授权。
41.例如，在响应于接收到用户的主动请求时，向用户发送提示信息，以明确地提示用户，其请求执行的操作将需要获取和使用到用户的个人信息。从而，使得用户可以根据提示信息来自主地选择是否向执行本公开技术方案的操作的电子设备、应用程序、服务器或存储介质等软件或硬件提供个人信息。
42.作为一种可选的但非限定性的实现方式，响应于接收到用户的主动请求，向用户发送提示信息的方式例如可以是弹窗的方式，弹窗中可以以文字的方式呈现提示信息。此外，弹窗中还可以承载供用户选择“同意”或者“不同意”向电子设备提供个人信息的选择控件。
43.可以理解的是，上述通知和获取用户授权过程仅是示意性的，不对本公开的实现方式构成限定，其它满足相关法律法规的方式也可应用于本公开的实现方式中。
44.同时，可以理解的是，本技术方案所涉及的数据(包括但不限于数据本身、数据的获取或使用)应当遵循相应法律法规及相关规定的要求。
45.首先，对本公开中涉及应用环境进行解释说明。
46.图1是根据本公开一示例性实施例示出的卡片布局方法的一种应用环境的示意图。参照图1，包括服务器端和搭载客户端的终端，终端接收服务器端发送的卡片的卡片数据，卡片数据包括布局信息，布局信息包括目标锚点、卡片与目标锚点之间的间距以及目标容器，终端根据布局信息，配置卡片的布局属性的属性值，布局属性包括用于确定卡片在客户端页面显示的位置的位置属性，从而实现动态布局客户端页面的卡片。
47.图2是根据本公开一示例性实施例示出的客户端页面的示意图。参照图2，客户端页面配置有具有与用户产生交互的控件，控件可以用文字标识，例如图2中的“首页”、“朋友”、“消息”和“推荐”等等，控件也可以用图标标识，例如图2中的“桃心标识”和“五角星标识”等等，这些控件可以作为目标锚点。值得说明的是，客户端页面中的控件以及控件所在的位置是固定的，一般是在开发客户端时配置好的，因此，在客户端上线后，控件以及控件所在的位置一般不发生变化，因此，可以作为卡片在动态插入到客户端页面中的参照物，用于卡片在客户端页面的定位。
48.另外，在客户端页面中，通常设置有具有层级关系的不同容器，对于具有上下层级关系的两个容器而言，上层容器中所容纳的内容会负载下层容器中所容纳的内容。这里的内容例如上述客户端页面的控件和卡片等等。为了便于向客户端页面中插入卡片，可以预先在开发客户端时配置一些空闲的容器，便于后期动态向这些容器内插入卡片，实现卡片的动态布局。
49.参照图3所示的一种客户端页面的容器的示意图，客户端页面可以包括容器1、容器2，
……
，容器n，n为大于2的整数。值得说明的是，同一层级还可以包括多个容器，例如，容器2和容器21属于同一层级的容器，容器2和容器21的尺寸不同，即相对于终端屏幕的位置可以不同。
50.图4是根据本公开一示例性实施例示出的一种卡片布局方法的流程图。该卡片布局方法可以由搭载客户端的终端执行，参照图1，该方法可以包括以下步骤：
51.步骤401，接收服务器端发送的卡片的卡片数据，其中，卡片数据包括布局信息，布局信息包括目标锚点、卡片与目标锚点之间的间距以及目标容器。
52.值得说明的是，目标锚点可以是上述控件，目标容器可以是预先在开发客户端时配置一些空闲的容器。
53.示例地，卡片与目标锚点之间的间距可以是卡片左端与目标锚点右端的间距，卡片与目标锚点之间的间距可以是卡片左端与目标锚点左端的间距，卡片与目标锚点之间的间距可以是卡片右端与目标锚点右端的间距，卡片与目标锚点之间的间距可以是卡片右端与目标锚点左端的间距，卡片与目标锚点之间的间距可以是卡片顶端与目标锚点顶端的间距，卡片与目标锚点之间的间距可以是卡片顶端与目标锚点底端的间距，卡片与目标锚点之间的间距可以是卡片底端与目标锚点顶端的间距，卡片与目标锚点之间的间距可以是卡片底端与目标锚点的底端间距，等等。
54.参照图5所示的一种卡片与目标锚点的位置的示意图。参照图5，卡片左端与目标锚点右端的间距为距离a，卡片的底端与目标锚点的顶端的间距为距离b。
55.其中，卡片与所述目标锚点之间的间距可以通过第一预设变量以及第二预设变量进行描述。其中，第一预设变量用于描述卡片与目标锚点的依赖关系，示例地，参照下表1的各第一预设变量，下表1第一列表示第一预设变量的含义，第二列表示第一预设变量的字符串的表示：
56.卡片左端与目标锚点右端left_to_right_of卡片左端与目标锚点左端left_to_left_of卡片右端与目标锚点右端right_to_right_of卡片右端与目标锚点左端right_to_left_of卡片顶端与目标锚点顶端top_to_top_of卡片顶端与目标锚点底端top_to_bottom_of卡片底端与目标锚点顶端bottom_to_top_of卡片底端与目标锚点底端bottom_to_bottom_of
57.表1
58.其中，上表1示例了卡片与目标锚点的依赖关系。
59.其中，第二预设变量用于描述对应第一预设变量表征的依赖关系具体的间距。示
例地，参照下表2的第二预设变量，下表2中第一列表示第二预设变量的含义，第二列表示第二预设变量的字符串的表示：
60.距离1offset_left距离2offset_bottom距离3offset_right距离4offset_top
61.表2
62.其中，offset_left可以描述卡片左端与目标锚点右端的间距和卡片左端与目标锚点左端的间距，offset_bottom可以描述卡片底端与目标锚点顶端的间距和卡片底端与目标锚点底端的间距，offset_right可以描述卡片右端与目标锚点右端的间距和卡片右端与目标锚点左端的间距，offset_top可以描述卡片顶端与目标锚点顶端的间距和卡片顶端与目标锚点底端的间距。
63.例如，以以下代码描述图5中卡片与目标锚点的间距为例：
64.{
65.left_to_right_of:"目标锚点"，
66.offset_left:"距离a",
67.bottom_to_top_of:"目标锚点",
68.offset_bottom:"距离b"
69.}
70.步骤402，根据布局信息，配置卡片的布局属性的属性值，布局属性包括位置属性，位置属性用于确定卡片在客户端页面显示的位置。
71.由上述可知，客户端页面可以包括多个容器，因此，这里的卡片在客户端页面显示的位置包括卡片在屏幕所在的平面位置，以及卡片所在的容器。承接图5示例，根据距离a和距离b，可以定位到卡片在屏幕的平面位置。另外，卡片所在的容器由目标容器决定。
72.另外，布局信息还包括指定尺寸，布局属性还包括尺寸属性。因此，上述根据布局信息，配置卡片的布局属性的属性值还可以包括：根据该指定尺寸配置卡片尺寸属性的属性值，这里的指定尺寸可以包括卡片的宽度和卡片的高度，对应地，尺寸属性包括宽度属性和高度属性。
73.其中，宽度属性可以通过字符串width表示，高度属性可以通过字符串height表示。
74.另外，还可以根据卡片与目标锚点之间的间距来确定卡片的宽度和高度。值得说明的是，计算卡片的宽度与计算卡片的宽度类似，例如，以计算卡片的宽度为例，在卡片与目标锚点之间的间距包括卡片左端与目标锚点右端的间距以及卡片右端与目标锚点右端的间距时，可以以卡片右端与目标锚点右端的间距与卡片左端与目标锚点右端的间距为约束，得到卡片的宽度，即可以将卡片右端与目标锚点右端的间距与卡片左端与目标锚点右端的间距的差值作为卡片的宽度。
75.再例如，参照图6，在图6中，服务器端下发的布局数据中包括两个目标锚点，第一目标锚点和第二目标锚点。以计算卡片的宽度为例，在卡片与第一目标锚点之间的间距包括卡片左端与第一目标锚点右端的间距以及卡片右端与第二目标锚点左端的间距时，可以
以卡片与第一目标锚点之间的间距包括卡片左端与第一目标锚点右端的间距为约束，得到卡片的宽度。
76.通过上述方式，由服务器下发卡片的卡片数据至搭载客户端的终端，从而终端可以基于卡片数据中布局信息包括的目标锚点、卡片与目标锚点之间的间距以及目标容器，配置卡片的布局属性的属性值，其中，布局属性包括用于确定卡片在客户端页面显示的位置的位置属性，从而无需下线客户端也无需用户下载新版本的客户端，即可实现卡片在客户端中的动态布局，提升了卡片的上线效率；此外，由于无需客户端配置卡片数据，从而降低了客户端代码量，利于后期代码的维护。
77.在一些实施例中，上述根据布局信息，配置卡片的布局属性的属性值的步骤可以通过以下方式实施：确定目标锚点相对于目标容器的第一位置信息；根据第一位置信息和卡片与目标锚点之间的间距，确定卡片相对于目标容器的第二位置信息；根据第二位置信息和目标容器在客户端页面的位置，配置卡片的位置属性的属性值。
78.其中，这里的卡片的位置属性可以包括横向位置属性、纵向位置属性以及以及卡片的容器属性，横向位置属性包括描述卡片左端与目标容器左端的间距的属性和描述卡片右端与目标容器右端的间距的属性，纵向位置属性包括描述卡片顶端与目标容器顶端的间距的属性和描述卡片底端距离目标容器底端的间距的属性。
79.其中，横向位置属性和纵向位置属性的属性值的类型为int类型，即数值，容器属性的属性值的类型为string类型，即卡片容器标识，关于卡片容器标识可以参照下述相关实施例，本实施例在此不作赘述。
80.其中，以横向位置属性为例，第一位置信息是与计算横向位置属性的属性值的位置信息，即第一位置信息可以包括目标锚点左端与目标容器左端的间距以及目标锚点右端与目标容器右端的间距；相应地，卡片与目标锚点之间的间距可以包括目标锚点左端与卡片左端的间距以及目标锚点右端与卡片右端的间距；相应地，卡片相对于目标容器的第二位置信息可以包括卡片左端与目标容器左端的间距以及卡片右端与目标容器右端的间距，根据这里的间距配置描述相对应属性的属性值。
81.以纵向位置属性为例，第一位置信息是与计算纵向位置属性的属性值的位置信息，即第一位置信息可以理解可以包括目标锚点顶端与目标容器顶端的间距以及目标锚点底端与目标容器底端的间距；相应地，卡片与目标锚点之间的间距包括目标锚点顶端与卡片顶端的间距以及目标锚点底端与卡片底端的间距；相应地，卡片相对于目标容器的第二位置信息包括卡片顶端与目标容器顶端的间距以及卡片底端与目标容器底端的间距，根据这里的间距配置描述相对应属性的属性值。
82.值得说明的是，由于不同容器可以具有不同大小，卡片和锚点所在的容器的层级可能不同，因此，需要确定卡片与其所在目标容器的相对位置，即横向位置属性的属性值和纵向位置属性的属性值。为了确定卡片与其所在目标容器的相对位置，需要将目标锚点、卡片以及目标容器统一在同一个坐标系下，值得说明的是，卡片与目标容器是在统一坐标系下的，而确定目标锚点相对于目标容器的第一位置信息，则可以将目标锚点和目标容器统一在统一坐标下。
83.参照图7，卡片位于目标容器内，目标容器的层级是目标锚点所在容器的层级的上一层容器。以终端屏幕为参考物，可以确定目标容器相对于终端屏幕的相对位置信息，即第
三线型所示的间距；以终端屏幕为参考物，可以确定目标锚点相对于终端屏幕的相对位置信息，即第一线型所示的间距；根据目标容器相对于终端屏幕的相对位置信息和目标锚点相对于终端屏幕的相对位置信息，可以确定目标锚点相对于目标容器的第一位置信息。再根据目标锚点相对于目标容器的第一位置信息以及卡片与目标锚点之间的间距，确定卡片相对于目标容器的第二位置信息，即第二线型所示的距离。通过第二线型所示的距离，可以配置对应该距离的属性的属性值，根据该属性的属性值，可以定位卡片在客户端页面显示的位置。
84.参照图7，对计算卡片左端相对于目标容器左端的间距为例进行说明，在图7中，在同一坐标系下，目标锚点左端是位于目标容器外的，依据卡片左端与目标锚点左端的间距和目标锚点左端与目标容器左端的间距，即将卡片左端与目标锚点左端的间距和目标锚点左端与目标容器左端的间距之差作为卡片左端与目标容器左端的间距。
85.对计算卡片右端相对于目标容器右端的间距为例进行说明，在图7中，在同一坐标系下，目标锚点右端是位于目标容器内的，依据卡片右端与目标锚点右端的间距和目标锚点右端与目标容器右端的间距，即将目标锚点右端与目标容器右端的间距和卡片右端与目标锚点右端的间距之差作为卡片左端与目标容器左端的间距。
86.值得说明的是，计算卡片顶端相对于目标容器顶端的间距和卡片底端相对于目标容器底端的间距的计算方式可以参照上述相关实施例，本实施例在此不作赘述。
87.在一些实施例中，位置属性包括描述卡片顶端与目标容器顶端的间距的属性、描述卡片底端与目标容器底端的间距的属性、描述卡片左端与目标容器左端的间距的属性以及描述卡片右端与目标容器右端的间距的属性。其中，通过描述卡片顶端与目标容器顶端的间距的属性的属性值以及描述卡片底端与目标容器底端的间距的属性的属性值，可以确定出卡片的高度，通过描述卡片左端与目标容器左端的间距的属性的属性值以及描述卡片右端与目标容器右端的间距的属性的属性值，可以确定出卡片的宽度，这里通过位置属性的属性值确认出的宽度和高度在相关实施例称为目标尺寸。
88.而由上述可知，服务器端下发的布局信息包括了指定尺寸，在此基础上，方法还可以包括：根据位置属性的属性值，确定卡片的目标尺寸，并在目标尺寸与指定尺寸不一致的情况下，将配置的卡片的尺寸属性的属性值更新为目标尺寸。
89.其中，根据位置属性的属性值确定卡片的目标尺寸可以参照上述相关实施例，本实施例在此不作赘述。
90.值得说明的是，在代码流程中，是先读取指定尺寸，基于读取到的指定尺寸对对应的尺寸属性进行赋值；因此，在目标尺寸与指定尺寸不一致的情况下，需要将配置的卡片的尺寸属性的属性值更新为目标尺寸，即需要重新基于目标尺寸对对应的尺寸属性进行赋值。
91.通过上述方式，通过位置属性的属性值来计算卡片相对于目标容器左右两侧，以及上下两侧的位置信息，从而实现卡片宽度和卡片高度的准确约束，以尽量避免新增卡片对客户端页面整体的布局。
92.在一些实施例中，方法还可以包括：在检测到目标锚点在客户端页面的位置发生变化的情况下，重新执行根据布局信息，配置卡片的布局属性的属性值的步骤。
93.其中，可以设置监听者，用于监听目标锚点在客户端页面的位置是否发生变化。
94.值得说明的是，客户端是不断迭代更新的，在这个更新过程中，可能会改变目标锚点在客户端页面的位置，由于目标锚点作为确定卡片在客户端页面的位置，因此，可以在检测到目标锚点在客户端页面的位置发生变化的情况下，需要重新执行布局信息，配置卡片的布局属性的属性值的步骤，从而实现卡片在客户端页面的位置的准确布局。
95.在一些实施例中，方法还可以包括：获取至少一个锚点的锚点标识；将至少一个锚点的锚点标识存储到客户端的软件开发工具包，以使服务器端通过访问软件开发工具包中的至少一个锚点的锚点标识确定所述目标锚点。
96.值得说明的是，客户端的sdk(software development kit，软件开发工具包)可以通过编译器、调试器、软件框架等来促进应用程序(即客户端)的创建，可以简单的为某个程序设计语言提供api(application programming interface，应用程序接口)的一些文件，通过调用api实现代码的调用。在本实施例，可以通过sdk提供的api实现卡片的动态布局。
97.举例来讲，服务器端可以访问sdk中存储的锚点的锚点标识，从而得到实现布局信息中目标锚点的配置。客户端接收到服务器端下发的卡片数据后，sdk会进行解析，由于sdk中存储有锚点的锚点标识，因此，sdk可以根据下发的卡片数据与自身存储的锚点标识，解析得到卡片依赖的目标锚点。
98.通过上述方式，利用sdk作为服务器端和客户端的桥梁，实现卡片的动态布局。
99.在一些实施例中，方法还可以包括：获取至少一个卡片容器的容器标识，卡片容器是预埋在客户端页面中的；将至少一个卡片容器的容器标识存储到客户端的软件开发工具包，以使服务器端通过访问软件开发工具包中的至少一个卡片容器的容器标识确定目标容器。
100.继续参照图3，不同容器用于实现内容在客户端页面的布局，因此，可以在开发客户端时，预先在客户端页面中配置多个卡片容器，卡片容器中的目标容器用于可以容纳卡片。其中，容器标识可以用字符串标识。
101.与锚点标识类似的，在服务器端可以访问sdk中存储的卡片容器的容器标识，从而得到实现布局信息中目标容器的配置。客户端接收到服务器端下发的卡片数据后，sdk会进行解析，由于sdk中存储有卡片容器的容器标识，因此，sdk可以根据下发的卡片数据与自身存储的容器标识，解析得到卡片依赖的目标容器。通过上述方式，利用sdk作为服务器端和客户端的桥梁，实现卡片的动态布局。
102.在一些实施例中，卡片数据还包括渲染信息，方法还包括：根据渲染信息，配置卡片的渲染属性的属性值，其中，渲染信息用于确定卡片的渲染时机和卡片在渲染时是否可见。
103.参见下表3：
[0104][0105]
表3
[0106]
其中，渲染属性可以包括渲染时机属性和可见性控制属性。渲染时机属性可以用参数render_mode表示，render_mode的属性值的类型可以是int类型，渲染时机属性用于指定卡片的渲染时机。例如，render_mode的属性值可以是0、1、2和3，0表示滑动到视频立即渲染，1表示滑动到视频延迟预设时长后渲染，2表示滑动到视频前一个视频就开始渲染，3表示滑动到视频也不主动渲染。这里的视频可以是指定类型的视频，例如产品展示的视频。这里的预设时长由参数render_delay_time指定，render_delay_time的属性值的类型也可以是int类型，render_delay_time指定预设时长。
[0107]
可见性控制属性可以用参数visible表示，visible的属性值的类型可以是boolean类型，visible的属性值可以是true或false，其中，true表示渲染时卡片可见，false表示渲染时卡片不可见，且若不可见，客户端可以在合适的时机通过setvisible方法将其属性值从false改为true，即调整为可见。
[0108]
值得说明的是，与上述锚点标识类似的，上述表3可以存储在客户端的sdk中，服务器端可以访问中表3中的用于标识渲染属性的参数和对应的属性值，从而确定渲染信息，实现卡片的动态布局。
[0109]
基于同一发明构思，本公开还提供一种卡片布局方法，卡片布局方法可以有服务器端执行，该卡片布局方法可以包括：向客户端发送卡片的卡片数据，其中，卡片数据包括布局信息，布局信息至少包括目标锚点、卡片与目标锚点之间的间距以及目标容器，布局信息用于客户端配置卡片的布局属性的属性值，布局属性包括位置属性，位置属性用于确定卡片在客户端页面显示的位置。
[0110]
值得说明的是，这里的客户端是搭载在终端上的。
[0111]
另外，关于本实施例中卡片布局方法的实施方式可以参照上述相关方法的实施方式，本实施例在此不作赘述。
[0112]
图8是根据本公开一示例性实施例示出的一种卡片布局方法的流程图。参照图8，包括服务器端向终端发送卡片的卡片数据。终端接收服务器端发送的卡片的卡片数据，其中，卡片数据包括布局信息，布局信息包括目标锚点、卡片与目标锚点之间的间距以及目标容器；终端根据布局信息，配置卡片的布局属性的属性值，布局属性包括位置属性，位置属性用于确定卡片在客户端页面显示的位置。
[0113]
值得说明的是，这里终端是搭载客户端的。
[0114]
另外，关于本实施例中卡片布局方法的具体实施方式可以参照上述相关方法的具体实施方式，本实施例在此不作赘述。
[0115]
基于同一发明构思，本公开还提供一种卡片布局装置，图9是根据本公开一示例性实施例示出的一种卡片布局装置的框图，该卡片布局装置900包括：
[0116]
接收模块901，用于接收服务器端发送的卡片的卡片数据，其中，所述卡片数据包括布局信息，所述布局信息包括目标锚点、所述卡片与所述目标锚点之间的间距以及目标容器；
[0117]
第一配置模块902，用于根据所述布局信息，配置所述卡片的布局属性的属性值，所述布局属性包括位置属性，所述位置属性用于确定所述卡片在客户端页面显示的位置。
[0118]
在一些实施例中，所述第一配置模块902包括：
[0119]
第一确定子模块，用于确定所述目标锚点相对于所述目标容器的第一位置信息；
[0120]
第二确定子模块，用于根据所述第一位置信息和所述卡片与所述目标锚点之间的间距，确定所述卡片相对于所述目标容器的第二位置信息；
[0121]
配置子模块，用于根据所述第二位置信息和所述目标容器在所述客户端页面的位置，配置所述卡片的位置属性的属性值。
[0122]
在一些实施例中，所述位置属性包括描述所述卡片顶端与所述目标容器顶端的间距的属性、描述所述卡片底端与所述目标容器底端的间距的属性、描述所述卡片左端与所述目标容器左端的间距的属性以及描述所述卡片右端与所述目标容器右端的间距的属性，所述布局信息还包括指定尺寸，所述布局属性还包括尺寸属性，所述配置子模块还用于根据所述指定尺寸，配置所述卡片的尺寸属性的属性值；
[0123]
所述装置900还包括：
[0124]
更新模块，用于根据所述位置属性的属性值，确定所述卡片的目标尺寸，并在所述目标尺寸与所述指定尺寸不一致的情况下，将配置的所述卡片的尺寸属性的属性值更新为所述目标尺寸。
[0125]
在一些实施例中，所述第一配置模块902还用于在检测到所述目标锚点在所述客户端页面的位置发生变化的情况下，重新执行根据所述布局信息，配置所述卡片的布局属性的属性值的步骤。
[0126]
在一些实施例中，所述装置900还包括：
[0127]
第一获取模块，用于获取至少一个锚点的锚点标识；
[0128]
第一存储模块，用于将所述至少一个锚点的锚点标识存储到所述客户端的软件开发工具包，以使所述服务器端通过访问所述软件开发工具包中的所述至少一个锚点的锚点标识确定所述目标锚点。
[0129]
在一些实施例中，所述装置900还包括：
[0130]
第二获取模块，用于获取至少一个卡片容器的容器标识，所述卡片容器是预埋在所述客户端页面中的；
[0131]
第二存储模块，用于将所述至少一个卡片容器的容器标识存储到所述客户端的软件开发工具包，以使所述服务器端通过访问所述软件开发工具包中的所述至少一个卡片容器的容器标识确定所述目标容器。
[0132]
在一些实施例中，所述卡片数据还包括渲染信息，所述装置900还包括：
[0133]
第二配置模块，用于根据所述渲染信息，配置所述卡片的渲染属性的属性值，其中，所述渲染信息用于确定所述卡片的渲染时机和所述卡片在渲染时是否可见。
[0134]
其中，关于上述装置900中各模块的实施方式可以参照上述相关实施例，本实施例在此不作赘述。
[0135]
基于同一发明构思，本公开还提供一种卡片布局装置，图10是根据本公开一示例性实施例示出的一种卡片布局装置的框图，该卡片布局装置1000包括：
[0136]
发送模块1001，用于向终端发送卡片的卡片数据；
[0137]
其中，所述卡片数据包括布局信息，所述布局信息至少包括目标锚点、所述卡片与所述目标锚点之间的间距以及目标容器，所述布局信息用于所述终端配置所述卡片的布局属性的属性值，所述布局属性包括位置属性，所述位置属性用于确定所述卡片在客户端页面显示的位置。
[0138]
其中，关于上述装置1000中各模块的实施方式可以参照上述相关实施例，本实施例在此不作赘述。
[0139]
基于同一发明构思，本公开实施例还提供一种计算机可读介质，其上存储有计算机程序，该程序被处理装置执行时实现上述方法的步骤。
[0140]
基于同一发明构思，本公开实施例还提供一种电子设备，包括：
[0141]
存储装置，其上存储有计算机程序；
[0142]
处理装置，用于执行所述存储装置中的所述计算机程序，以实现上述方法的步骤。
[0143]
下面参考图11，其示出了适于用来实现本公开实施例的电子设备(例如图1中的终端或服务器端)1100的结构示意图。本公开实施例中的终端设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、pda(个人数字助理)、pad(平板电脑)、pmp(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字tv、台式计算机等等的固定终端。图11示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。
[0144]
如图11所示，电子设备1100可以包括处理装置(例如中央处理器、图形处理器等)1101，其可以根据存储在只读存储器(rom)1102中的程序或者从存储装置1108加载到随机访问存储器(ram)1103中的程序而执行各种适当的动作和处理。在ram 1103中，还存储有电子设备1100操作所需的各种程序和数据。处理装置1101、rom 1102以及ram 1103通过总线1104彼此相连。输入/输出(i/o)接口1105也连接至总线1104。
[0145]
通常，以下装置可以连接至i/o接口1105：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置1106；包括例如液晶显示器(lcd)、扬声器、振动器等的输出装置1107；包括例如磁带、硬盘等的存储装置1108；以及通信装置1109。通信装置1109可以允许电子设备1100与其他设备进行无线或有线通信以交换数据。虽然图11示出了具有各种装置的电子设备1100，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。
[0146]
特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在非暂态计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置1109从网络上被下载和安装，或者从存储
装置1108被安装，或者从rom 1102被安装。在该计算机程序被处理装置1101执行时，执行本公开实施例的方法中限定的上述功能。
[0147]
需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑磁盘只读存储器(cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、rf(射频)等等，或者上述的任意合适的组合。
[0148]
在一些实施方式中，客户端、服务器端可以利用诸如http(hypertext transfer protocol，超文本传输协议)之类的任何当前已知或未来研发的网络协议进行通信，并且可以与任意形式或介质的数字数据通信(例如，通信网络)互连。通信网络的示例包括局域网(“lan”)，广域网(“wan”)，网际网(例如，互联网)以及端对端网络(例如，ad hoc端对端网络)，以及任何当前已知或未来研发的网络。
[0149]
上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。
[0150]
上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：接收服务器端发送的卡片的卡片数据，其中，所述卡片数据包括布局信息，所述布局信息包括目标锚点、所述卡片与所述目标锚点之间的间距以及目标容器；根据所述布局信息，配置所述卡片的布局属性的属性值，所述布局属性包括位置属性，所述位置属性用于确定所述卡片在客户端页面显示的位置。
[0151]
可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括但不限于面向对象的程序设计语言—诸如java、smalltalk、c++，还包括常规的过程式程序设计语言——诸如“c”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(lan)或广域网(wan)——连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
[0152]
附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代
表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
[0153]
描述于本公开实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，模块的名称在某种情况下并不构成对该模块本身的限定。
[0154]
本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如，非限制性地，可以使用的示范类型的硬件逻辑部件包括：现场可编程门阵列(fpga)、专用集成电路(asic)、专用标准产品(assp)、片上系统(soc)、复杂可编程逻辑设备(cpld)等等。
[0155]
在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(ram)、只读存储器(rom)、可擦除可编程只读存储器(eprom或快闪存储器)、光纤、便捷式紧凑盘只读存储器(cd-rom)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
[0156]
以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开中所涉及的公开范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述公开构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。
[0157]
此外，虽然采用特定次序描绘了各操作，但是这不应当理解为要求这些操作以所示出的特定次序或以顺序次序执行来执行。在一定环境下，多任务和并行处理可能是有利的。同样地，虽然在上面论述中包含了若干具体实现细节，但是这些不应当被解释为对本公开的范围的限制。在单独的实施例的上下文中描述的某些特征还可以组合地实现在单个实施例中。相反地，在单个实施例的上下文中描述的各种特征也可以单独地或以任何合适的子组合的方式实现在多个实施例中。
[0158]
尽管已经采用特定于结构特征和/或方法逻辑动作的语言描述了本主题，但是应当理解所附权利要求书中所限定的主题未必局限于上面描述的特定特征或动作。相反，上面所描述的特定特征和动作仅仅是实现权利要求书的示例形式。关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

技术特征：
1.一种卡片布局方法，其特征在于，包括：接收服务器端发送的卡片的卡片数据，其中，所述卡片数据包括布局信息，所述布局信息包括目标锚点、所述卡片与所述目标锚点之间的间距以及目标容器；根据所述布局信息，配置所述卡片的布局属性的属性值，所述布局属性包括位置属性，所述位置属性用于确定所述卡片在客户端页面显示的位置。2.根据权利要求1所述的方法，其特征在于，所述根据所述布局信息，配置所述卡片的布局属性的属性值，包括：确定所述目标锚点相对于所述目标容器的第一位置信息；根据所述第一位置信息和所述卡片与所述目标锚点之间的间距，确定所述卡片相对于所述目标容器的第二位置信息；根据所述第二位置信息和所述目标容器在所述客户端页面的位置，配置所述卡片的位置属性的属性值。3.根据权利要求2所述的方法，其特征在于，所述位置属性包括描述所述卡片顶端与所述目标容器顶端的间距的属性、描述所述卡片底端与所述目标容器底端的间距的属性、描述所述卡片左端与所述目标容器左端的间距的属性以及描述所述卡片右端与所述目标容器右端的间距的属性，所述布局信息还包括指定尺寸，所述布局属性还包括尺寸属性，所述根据所述布局信息，配置所述卡片的布局属性的属性值还包括：根据所述指定尺寸，配置所述卡片的尺寸属性的属性值；所述方法还包括：根据所述位置属性的属性值，确定所述卡片的目标尺寸，并在所述目标尺寸与所述指定尺寸不一致的情况下，将配置的所述卡片的尺寸属性的属性值更新为所述目标尺寸。4.根据权利要求1所述的方法，其特征在于，所述方法还包括：在检测到所述目标锚点在所述客户端页面的位置发生变化的情况下，重新执行根据所述布局信息，配置所述卡片的布局属性的属性值的步骤。5.根据权利要求1所述的方法，其特征在于，所述方法还包括：获取至少一个锚点的锚点标识；将所述至少一个锚点的锚点标识存储到所述客户端的软件开发工具包，以使所述服务器端通过访问所述软件开发工具包中的所述至少一个锚点的锚点标识确定所述目标锚点。6.根据权利要求1所述的方法，其特征在于，所述方法还包括：获取至少一个卡片容器的容器标识，所述卡片容器是预埋在所述客户端页面中的；将所述至少一个卡片容器的容器标识存储到所述客户端的软件开发工具包，以使所述服务器端通过访问所述软件开发工具包中的所述至少一个卡片容器的容器标识确定所述目标容器。7.根据权利要求1所述的方法，其特征在于，所述卡片数据还包括渲染信息，所述方法还包括：根据所述渲染信息，配置所述卡片的渲染属性的属性值，其中，所述渲染信息用于确定所述卡片的渲染时机和所述卡片在渲染时是否可见。8.一种卡片布局方法，其特征在于，包括：向终端发送卡片的卡片数据；
其中，所述卡片数据包括布局信息，所述布局信息至少包括目标锚点、所述卡片与所述目标锚点之间的间距以及目标容器，所述布局信息用于所述终端配置所述卡片的布局属性的属性值，所述布局属性包括位置属性，所述位置属性用于确定所述卡片在客户端页面显示的位置。9.一种卡片布局装置，其特征在于，包括：接收模块，用于接收服务器端发送的卡片的卡片数据，其中，所述卡片数据包括布局信息，所述布局信息包括目标锚点、所述卡片与所述目标锚点之间的间距以及目标容器；第一配置模块，用于根据所述布局信息，配置所述卡片的布局属性的属性值，所述布局属性包括位置属性，所述位置属性用于确定所述卡片在客户端页面显示的位置。10.一种卡片布局装置，其特征在于，包括：发送模块，用于向终端发送卡片的卡片数据；其中，所述卡片数据包括布局信息，所述布局信息至少包括目标锚点、所述卡片与所述目标锚点之间的间距以及目标容器，所述布局信息用于所述终端配置所述卡片的布局属性的属性值，所述布局属性包括位置属性，所述位置属性用于确定所述卡片在客户端页面显示的位置。11.一种计算机可读介质，其上存储有计算机程序，其特征在于，该程序被处理装置执行时实现权利要求1-8中任一项所述方法的步骤。12.一种电子设备，其特征在于，包括：存储装置，其上存储有计算机程序；处理装置，用于执行所述存储装置中的所述计算机程序，以实现权利要求1-8中任一项所述方法的步骤。

技术总结
本公开涉及一种卡片布局方法、装置、介质及电子设备，包括：接收服务器端发送的卡片的卡片数据，其中，所述卡片数据包括布局信息，所述布局信息包括目标锚点、所述卡片与所述目标锚点之间的间距以及目标容器；根据所述布局信息，配置所述卡片的布局属性的属性值，所述布局属性包括位置属性，所述位置属性用于确定所述卡片在客户端页面显示的位置，提升了卡片的上线效率并降低了客户端代码量。上线效率并降低了客户端代码量。上线效率并降低了客户端代码量。


技术研发人员：陈龙 陈宇中
受保护的技术使用者：北京有竹居网络技术有限公司
技术研发日：2023.04.14
技术公布日：2023/7/12