CN110647327A

CN110647327A - 基于卡片的用户界面动态控制的方法和装置

Info

Publication number: CN110647327A
Application number: CN201910899734.0A
Authority: CN
Inventors: 彭冬华
Original assignee: JD Digital Technology Holdings Co Ltd
Current assignee: JD Digital Technology Holdings Co Ltd
Priority date: 2019-09-23
Filing date: 2019-09-23
Publication date: 2020-01-03
Anticipated expiration: 2039-09-23
Also published as: CN110647327B

Abstract

本发明公开了基于卡片的用户界面动态控制的方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：解析用户界面列表数据中每个卡片的字典数据，确定所述卡片的内部布局、整体样式以及组件列表数据；解析所述组件列表数据中每个组件的字典数据，确定每个组件的用户界面元素、内部布局和内部样式，并将所述组件与对应的业务数据绑定；基于所述用户界面中所有卡片的组件所绑定的业务数据，渲染所述用户界面，以实现对所述用户界面的动态控制。该实施方式能够大大提高卡片的UI控制力度，单个卡片可以对接不同的业务数据，进而适配不同的业务，具有高业务融合和扩展性。

Description

基于卡片的用户界面动态控制的方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种基于卡片的用户界面动态控制的方法和装置。

背景技术

目前用户界面(User Interface，UI)展示主要基于卡片。卡片的概念是Google在2012年提出，本质是信息的集合体。

在实现本发明过程中，发明人发现现有技术中至少存在如下问题：

1、卡片本身UI控制力度较弱，卡片内部的UI元素的样式和布局基本固定，这会造成最终要实现的卡片数量庞大，且臃肿。比如，如果某个卡片里的图片大小不一样，需要新增卡片支持。

2、卡片业务场景单一，单个卡片的展示内容基本来自同一个业务场景，不能适配多个不同的业务数据。

发明内容

有鉴于此，本发明实施例提供一种基于卡片的用户界面动态控制的方法和装置，能够大大提高卡片的UI控制力度，单个卡片可以对接不同的业务数据，进而适配不同的业务，具有高业务融合和扩展性。

为实现上述目的，根据本发明实施例的一个方面，提供了一种基于卡片的用户界面动态控制的方法，包括：

解析用户界面列表数据中每个卡片的字典数据，确定所述卡片的内部布局、整体样式以及组件列表数据；

解析所述组件列表数据中每个组件的字典数据，确定每个组件的用户界面元素、内部布局和内部样式，并将所述组件与对应的业务数据绑定；

基于所述用户界面中所有卡片的组件所绑定的业务数据，渲染所述用户界面，以实现对所述用户界面的动态控制。

可选地，所述卡片的字典数据包括：卡片类型字段、卡片样式字段和组件列表数据；

确定所述卡片的内部布局、整体样式的步骤包括：根据所述卡片类型字段确定所述卡片的内部布局，根据所述卡片样式字段确定所述卡片的内部整体样式。

可选地，所述组件的字典数据包括：组件类型字段、组件样式字段和组件业务字段；

确定组件的用户界面元素、内部布局和内部样式的步骤包括：根据所述组件的组件类型字段确定所述组件的内部用户界面元素和布局，根据所述组件的组件样式字段确定所述组件的内部样式；解析所述组件业务字段，将所述组件与对应的业务数据绑定。

可选地，解析所述组件业务字段之后，还包括：根据所述组件的组件业务字段确定所述组件的交互方式。

根据本发明实施例的第二方面，提供一种基于卡片的用户界面动态控制的装置，包括：

卡片解析模块，解析用户界面列表数据中每个卡片的字典数据，确定所述卡片的内部布局、整体样式以及组件列表数据；

组件解析模块，解析所述组件列表数据中每个组件的字典数据，确定每个组件的用户界面元素、内部布局和内部样式，并将所述组件与对应的业务数据绑定；

界面渲染模块，基于所述用户界面中所有卡片的组件所绑定的业务数据，渲染所述用户界面，以实现对所述用户界面的动态控制。

可选地，所述组件解析模块还用于：解析所述组件业务字段之后，根据所述组件的组件业务字段确定所述组件的交互方式。

根据本发明实施例的第三方面，提供一种基于卡片的用户界面动态控制的电子设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明实施例第一方面提供的方法。

根据本发明实施例的第四方面，提供一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明实施例第一方面提供的方法。

上述发明中的一个实施例具有如下优点或有益效果：本发明在卡片内部抽象出组件概念，一个卡片包含一个或者多个组件，同一个组件可以对接不同的业务系统，同一个业务系统可以对接不同的组件，大大提高了卡片的UI控制力度，使得单个卡片可以对接不同的业务数据，进而适配不同的业务，具有高业务融合和扩展性。此外，卡片的整体布局以及组件库可以适用于应用程序的任何页面，同时支持无限扩展，复用性高；卡片数据和卡片内部的组件数据都是列表，可随时调整列表的次序以及增删改，实现整体页面动态组织；通过卡片样式字段和组件样式字段实时控制，能够达到页面级的整体换肤效果；每个卡片之间以及每个组件之间相互独立，任何一个出现问题，可在后台实时进行替换或者删除，而不需要重新发布APP，具有可热修复性。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的卡片视图的示意图；

图2是本发明实施例中基于卡片的用户界面动态控制的方法的主要流程示意图；

图3是本发明可选实施例中基于卡片的用户界面动态控制的方法的主要流程示意图；

图4是根据本发明实施例的基于卡片的用户界面动态控制的装置的主要模块的示意图；

图5是本发明实施例可以应用于其中的示例性系统架构图；

图6是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

鉴于现有技术中存在的一个或多个问题，本发明在卡片内部抽象出组件概念。图1是根据本发明实施例的卡片视图的示意图，如图1所示，卡片视图(即用户界面的视图)包括卡片1、卡片2、……、卡片x。每个卡片包含一个或者多个组件。

图2是本发明实施例中基于卡片的用户界面动态控制的方法的主要流程示意图。如图2所示，基于卡片的用户界面动态控制的方法，包括：步骤S201、步骤S202和步骤S203。

步骤S201、解析用户界面列表数据中每个卡片的字典数据，确定所述卡片的内部布局、整体样式以及组件列表数据。

用户界面列表数据包含用户界面包含的各个卡片的字典数据。列表内各个卡片的顺序与界面中卡片的排列顺序有关，可随时调整列表的次序以及增删改，实现整体页面动态组织。

卡片的内部布局是指，卡片内部整体上下、左右和翻页等排版方式。卡片的内部整体样式是指，卡片间的上下左右间距、背景色和背景图等样式。卡片的组件列表数据是指，卡片内包含的各个组件的列表。组件列表数据内各个组件的顺序与卡片内组件的排列顺序有关，可随时调整组件列表数据中各个组件的次序以及增删改组件，实现卡片中组件的动态组织。

卡片的字典数据是描述卡片内数据的信息集合，是对卡片中使用的所有数据元素的定义的集合。可选地，卡片的字典数据包括：卡片类型字段、卡片样式字段和组件列表数据。确定卡片的内部布局、整体样式的步骤包括：根据卡片类型字段确定卡片的内部布局，根据卡片样式字段确定卡片的内部整体样式。

步骤S202、解析所述组件列表数据中每个组件的字典数据，确定每个组件的用户界面元素、内部布局和内部样式，并将所述组件与对应的业务数据绑定。

组件的用户界面元素(即UI元素)是指组件上的各类控件，如菜单、编辑框等。组件的内部布局是指，组件内部整体上下、左右等排版方式。组件的内部样式包括：组件内部的整体样式和/或组件内部的UI元素样式。其中，组件内部的整体样式是指，组件间的上下左右间距，背景色和背景图等。组件内部的UI元素样式是指，字体大小，颜色等，可自由扩展等。

组件的字典数据是描述组件内数据的信息集合，是对组件中使用的所有数据元素的定义的集合。可选地，组件的字典数据包括：组件类型字段、组件样式字段和组件业务字段。确定组件的用户界面元素、内部布局和内部样式的步骤包括：根据组件的组件类型字段确定组件的内部用户界面元素和布局，根据组件的组件样式字段确定组件的内部样式；解析组件业务字段，将组件与对应的业务数据绑定。

解析后的组件业务字段会根据组件中需要的具体UI元素进行绑定。其中，组件内部的UI元素和内部布局可以根据组件类型字段查找内置在应用程序(App)本地的原生组件库来确定，也可以根据后台动态下发的原生组件来确定。本发明实施例对此不作具体限定。

可选地，解析所述组件业务字段之后，还包括：根据所述组件的组件业务字段确定所述组件的交互方式。例如，根据组件业务字段中的Action属性(Intent中的一个属性，Intent是对应用中一次操作的动作、动作涉及数据、附加数据进行的描述)来确定组件的交互方式。通过交互方式控制组件能支持的交互操作方式，如点击、长按、动画转场等。

步骤S203、基于所述用户界面中所有卡片的组件所绑定的业务数据，渲染所述用户界面，以实现对所述用户界面的动态控制。

本发明在卡片内部抽象出组件概念，一个卡片包含一个或者多个组件，同一个组件可以对接不同的业务系统，同一个业务系统可以对接不同的组件，大大提高了卡片的UI控制力度，使得单个卡片可以对接不同的业务数据，进而适配不同的业务，具有高业务融合和扩展性。此外，卡片的整体布局以及组件库可以适用于应用程序的任何页面，同时支持无限扩展，复用性高；卡片数据和卡片内部的组件数据都是列表，可随时调整列表的次序以及增删改，实现整体页面动态组织；通过卡片样式字段和组件样式字段实时控制，能够达到页面级的整体换肤效果；每个卡片之间以及每个组件之间相互独立，任何一个出现问题，可实时进行替换或者删除，而不需要重新发布，具有可热修复性。

图3是本发明可选实施例中基于卡片的用户界面动态控制的方法的主要流程示意图。如图3所示，基于卡片的用户界面动态控制的方法包括如下步骤：

步骤S301、获取用户界面列表数据；

步骤S302、解析第x个卡片的字典数据；

步骤S303、根据卡片类型字段确定卡片的内部布局；

步骤S304、根据卡片样式字段确定卡片的内部整体样式；

步骤S305、解析组件列表数据；

步骤S306、解析第y个组件的字典数据；

步骤S307、根据组件的组件类型字段确定组件的内部用户界面元素和布局；

步骤S308、根据组件的组件样式字段确定组件的内部样式；

步骤S309、根据组件的组件业务字段确定组件的交互方式；

步骤S310、解析组件业务字段，将组件与对应的业务数据绑定；

步骤S311、判断y＝N是否成立，N代表组件列表数据中的组件数量，y初始值为1；若是，则跳转至步骤S312；否则，y+1，然后跳转至步骤S306；

步骤S312、判断x＝M是否成立，M代表用户界面列表数据中的卡片数量，x初始值为1；若是，则跳转至步骤S313；否则，x+1，然后跳转至步骤S302；

步骤S313、绘制页面，即基于用户界面中所有卡片的组件所绑定的业务数据渲染用户界面。

本发明能够大大提高卡片的UI控制力度，单个卡片可以对接不同的业务数据，进而适配不同的业务，具有高业务融合和扩展性。

根据本发明实施例的第二方面，提供一种实现上述方法的装置。

图4是根据本发明实施例的基于卡片的用户界面动态控制的装置的主要模块的示意图，如图4所示，基于卡片的用户界面动态控制的装置400包括：

卡片解析模块401，解析用户界面列表数据中每个卡片的字典数据，确定所述卡片的内部布局、整体样式以及组件列表数据；

组件解析模块402，解析所述组件列表数据中每个组件的字典数据，确定每个组件的用户界面元素、内部布局和内部样式，并将所述组件与对应的业务数据绑定；

界面渲染模块403，基于所述用户界面中所有卡片的组件所绑定的业务数据，渲染所述用户界面，以实现对所述用户界面的动态控制。

一个或多个处理器；

存储装置，用于存储一个或多个程序，

图5示出了可以应用本发明实施例的基于卡片的用户界面动态控制的方法或基于卡片的用户界面动态控制的装置的示例性系统架构500。

如图5所示，系统架构500可以包括终端设备501、502、503，网络504和服务器505。网络504用以在终端设备501、502、503和服务器505之间提供通信链路的介质。网络504可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备501、502、503通过网络504与服务器505交互，以接收或发送消息等。终端设备501、502、503上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。

终端设备501、502、503可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器505可以是提供各种服务的服务器，例如对用户利用终端设备501、502、503所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的产品信息查询请求等数据进行分析等处理，并将处理结果(例如目标推送信息、产品信息--仅为示例)反馈给终端设备。

需要说明的是，本发明实施例所提供的基于卡片的用户界面动态控制的方法一般由服务器505执行，相应地，基于卡片的用户界面动态控制的装置一般设置于服务器505中。

应该理解，图5中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

下面参考图6，其示出了适于用来实现本发明实施例的终端设备的计算机系统600的结构示意图。图6示出的终端设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图6所示，计算机系统600包括中央处理单元(CPU)601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储部分608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM 603中，还存储有系统600操作所需的各种程序和数据。CPU 601、ROM 602以及RAM 603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。

以下部件连接至I/O接口605：包括键盘、鼠标等的输入部分606；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分607；包括硬盘等的存储部分608；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分609。通信部分609经由诸如因特网的网络执行通信处理。驱动器610也根据需要连接至I/O接口605。可拆卸介质611，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器610上，以便于从其上读出的计算机程序根据需要被安装入存储部分608。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分609从网络上被下载和安装，和/或从可拆卸介质611被安装。在该计算机程序被中央处理单元(CPU)601执行时，执行本发明的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括：卡片解析模块，解析用户界面列表数据中每个卡片的字典数据，确定所述卡片的内部布局、整体样式以及组件列表数据；组件解析模块，解析所述组件列表数据中每个组件的字典数据，确定每个组件的用户界面元素、内部布局和内部样式，并将所述组件与对应的业务数据绑定；界面渲染模块，基于所述用户界面中所有卡片的组件所绑定的业务数据，渲染所述用户界面，以实现对所述用户界面的动态控制。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，卡片解析模块还可以被描述为“基于所述用户界面中所有卡片的组件所绑定的业务数据，渲染所述用户界面的模块”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：解析用户界面列表数据中每个卡片的字典数据，确定所述卡片的内部布局、整体样式以及组件列表数据；解析所述组件列表数据中每个组件的字典数据，确定每个组件的用户界面元素、内部布局和内部样式，并将所述组件与对应的业务数据绑定；基于所述用户界面中所有卡片的组件所绑定的业务数据，渲染所述用户界面，以实现对所述用户界面的动态控制。

根据本发明实施例的技术方案，在卡片内部抽象出组件概念，一个卡片包含一个或者多个组件，同一个组件可以对接不同的业务系统，同一个业务系统可以对接不同的组件，大大提高了卡片的UI控制力度，使得单个卡片可以对接不同的业务数据，进而适配不同的业务，具有高业务融合和扩展性。此外，卡片的整体布局以及组件库可以适用于应用程序的任何页面，同时支持无限扩展，复用性高；卡片数据和卡片内部的组件数据都是列表，可随时调整列表的次序以及增删改，实现整体页面动态组织；通过卡片样式字段和组件样式字段实时控制，能够达到页面级的整体换肤效果；每个卡片之间以及每个组件之间相互独立，任何一个出现问题，可实时进行替换或者删除，而不需要重新发布，具有可热修复性。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims

1.一种基于卡片的用户界面动态控制的方法，其特征在于，包括：

2.如权利要求1所述的方法，其特征在于，所述卡片的字典数据包括：卡片类型字段、卡片样式字段和组件列表数据；

3.如权利要求1所述的方法，其特征在于，所述组件的字典数据包括：组件类型字段、组件样式字段和组件业务字段；

4.如权利要求3所述的方法，其特征在于，解析所述组件业务字段之后，还包括：根据所述组件的组件业务字段确定所述组件的交互方式。

5.一种基于卡片的用户界面动态控制的装置，其特征在于，包括：

6.如权利要求5所述的装置，其特征在于，所述卡片的字典数据包括：卡片类型字段、卡片样式字段和组件列表数据；

7.如权利要求5所述的装置，其特征在于，所述组件的字典数据包括：组件类型字段、组件样式字段和组件业务字段；

8.如权利要求7所述的装置，其特征在于，所述组件解析模块还用于：解析所述组件业务字段之后，根据所述组件的组件业务字段确定所述组件的交互方式。

9.一种基于卡片的用户界面动态控制的电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-4中任一所述的方法。

10.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-4中任一所述的方法。