CN115357319A - 一种用户界面渲染方法及装置 - Google Patents

Abstract

本发明实施例提供了一种用户界面渲染方法及装置，涉及计算机技术领域，应用于客户端，所述客户端集成有用于对用户界面模板和业务数据进行合并的模板引擎，具体实现方案为：向服务器发送针对用户界面的数据请求；接收所述服务器发送的目标业务的目标用户界面模板和目标业务数据，其中，所述目标业务为：所述数据请求所指示的业务；调用所述模板引擎按照预设的跨平台界面描述规则合并所述目标用户界面模板和所述目标业务数据，得到目标用户界面数据；对所述目标用户界面数据进行数据渲染，得到目标用户界面。应用本发明实施例提供的方案，能够对用户界面进行动态渲染。

Description

一种用户界面渲染方法及装置

技术领域

本发明涉及计算机技术领域，特别是涉及一种用户界面渲染方法及装置。

背景技术

随着用户需求的不断扩展，各种各样的应用程序向用户提供的业务越来越多，为便于用户与客户端交互，进而请求各种业务，客户端会展示用户界面。由于用户界面是与业务相关联的，且各种业务不断发生变化，为此，需要提供一种能够随着业务动态变化而动态渲染用户界面的方案。

发明内容

本发明实施例的目的在于提供一种用户界面渲染方法及装置，以实现对用户界面进行动态渲染。具体技术方案如下：

在本发明实施的第一方面，首先提供了一种用户界面渲染方法，应用于应用于客户端，所述客户端集成有用于对用户界面模板和业务数据进行合并的模板引擎，所述方法包括：

向服务器发送针对用户界面的数据请求；

接收所述服务器发送的目标业务的目标用户界面模板和目标业务数据，其中，所述目标业务为：所述数据请求所指示的业务；

调用所述模板引擎按照预设的跨平台界面描述规则合并所述目标用户界面模板和所述目标业务数据，得到目标用户界面数据；

对所述目标用户界面数据进行数据渲染，得到目标用户界面。

在本发明实施的第二方面，还提供了一种用户界面渲染方法，应用于服务器，所述方法包括：

接收客户端发送的针对用户界面的数据请求；

确定所述数据请求所指示的目标业务的目标用户界面模板和目标业务数据；

向所述客户端发送所述目标用户界面模板和所述目标业务数据，以使得所述客户端根据所述目标用户界面模板和所述目标业务数据，渲染用户界面。

在本发明实施的第三方面，还提供了一种用户界面渲染装置，应用于客户端，所述客户端集成有用于对用户界面模板和业务数据进行合并的模板引擎，所述装置包括：

数据请求发送模块，用于向服务器发送针对用户界面的数据请求；

模板及数据接收模块，用于接收所述服务器发送的目标业务的目标用户界面模板和目标业务数据，其中，所述目标业务为：所述数据请求所指示的业务；

用户界面数据获得模块，用于调用所述模板引擎按照预设的跨平台界面描述规则合并所述目标用户界面模板和所述目标业务数据，得到目标用户界面数据；

第一数据渲染模块，用于对所述目标用户界面数据进行数据渲染，得到目标用户界面。

在本发明实施的第四方面，还提供了一种用户界面渲染装置，应用于服务器，所述装置包括：

数据请求接收模块，用于接收客户端发送的针对用户界面的数据请求；

模板及数据确定模块，用于确定所述数据请求所指示的目标业务的目标用户界面模板和目标业务数据；

模板及数据发送模块，用于向所述客户端发送所述目标用户界面模板和所述目标业务数据，以使得所述客户端根据所述目标用户界面模板和所述目标业务数据，渲染用户界面。

在本发明实施的第五方面，还提供了一种电子设备，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；

存储器，用于存放计算机程序；

处理器，用于执行存储器上所存放的程序时，实现上述任一所述的用户界面渲染方法步骤。

在本发明实施的第六方面，还提供了一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现上述任一所述的用户界面渲染方法步骤。

在本发明实施的第七方面，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述任一所述的用户界面渲染方法步骤。

由上可见，本发明实施例提供的方案中，客户端集成了模板引擎，进而客户端具有了对用户界面模板和业务数据进行合并的能力。在此基础上，客户端进行用户界面渲染时，从服务器获得目标用户界面模板和目标业务数据即可，这样客户端就能够按照跨平台界面描述规则合并得到目标用户界面数据，对用户界面数据进行渲染之后，能够得到目标用户界面。由于目标业务发生变化后目标业务数据也会发生改变，这样客户端能够随着目标业务数据的变化而合并得到变化的目标用户界面数据，进而能够渲染得到变化的用户界面，因此，本发明实施例提供的方案实现了随着业务动态变化，动态渲染不同的用户界面。

另外，由于在本发明实施例提供的方案中，客户端完成了用户界面模板和业务数据的合并过程，这样服务器不需要参与该合并过程，也就不需要实现合并的功能。相比于客户端接收服务器已经合并好的用户界面数据进行数据渲染，本发明实施例提供的方案降低了客户端对服务器在功能上的依赖，降低了客户端与服务器的耦合程度。

对于服务器而言，不参与合并过程，在开发过程中，服务器侧的开发人员不需要学习合并得到用户界面数据所需的跨平台界面描述规则，降低了服务器侧开发人员的学习成本，提高了开发效率。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍。

图1为本发明实施例提供的第一种用户界面渲染方法的流程示意图；

图2为本发明实施例提供的第二种用户界面渲染方法的流程示意图；

图3为本发明实施例提供的第三种用户界面渲染方法的流程示意图；

图4为本发明实施例提供的一种用户界面渲染方法的流程框图；

图5为本发明实施例提供的一种用户界面刷新方法的流程框图；

图6为本发明实施例提供的第一种用户界面渲染装置的结构示意图；

图7为本发明实施例提供的第二种用户界面渲染装置的结构示意图；

图8为本发明实施例提供的第三种用户界面渲染装置的结构示意图；

图9为本发明实施例提供的一种电子设备的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行描述。

下面对本发明涉及的概念进行说明。

客户端：客户端为向用户提供服务的软件端。客户端可以通过用户界面与用户交互。客户端也可以被称为前端。

服务器：服务器为用于处理业务数据的设备。业务数据的种类和处理方式根据服务器所提供业务的不同而不同，例如，针对商品交易业务的业务数据可以是商品、订单的属性，处理方式可以是统计订单的总量等。服务器也可以被成为后端。

服务器和客户端可以基于预设的协议发送和接收数据，且服务器以及客户端均可以作为发送方或者接收方。预设的协议可以是HTTP(Hyper Text Transfer Protocol，HTTP)、FTP(File Transfer Protocol，文件传输协议)等。

用户界面数据：用户界面数据按照一定的界面描述规则，描述具有指定布局和内容的用户界面。例如，用户界面数据可以是一个HTML(HyperText Markup Language，超文本标记语言)文档，在该文档中，不同的标签对应界面上不同组件的内容，标签之间的包含或者并列关系对应用户界面的布局。用户界面数据也可以是XML(Extensible MarkupLanguage，可扩展标记语言)文档等，本发明实施例并不对生成的用户界面数据的具体类型进行限定。

模板引擎：模板引擎可以理解为生成用户界面数据的程序。模板引擎采用用户界面模板和业务数据得到用户界面数据。

采用不同的编程语言可以编写出不同的模板引擎。例如，模板引擎可以基于JavaScript语言实现，或者可以基于PHP语言实现。

不同的编程语言实现的模板引擎，能够基于相应编程语言实现的用户界面模板，得到用户界面数据。例如，模板引擎为基于JavaScript语言实现的引擎，也简称为JS模板引擎，用户界面模板为基于JavaScript语言实现的模板，以下简称为JS模板。此种情况下，可以应用JS模板引擎获得用于渲染用户界面的用户界面数据。

用户界面模板：用户界面模板是采用预设的描述规则描述布局的文本。在用户界面模板中可以固定设置用户界面的具体布局信息，也可以设置生成具体的用户界面中界面元素的函数，且基于上述函数记录生成的方式，将具体的界面元素的布局信息作为上述函数的变量。其中，具体布局信息可以是用户界面中界面元素的颜色、尺寸等，具体布局信息可以由业务数据中记录的布局信息指定。

下面通过具体实施例对本发明实施例提供的用户界面渲染方法进行详细说明。

本发明的一个实施例中，提供了一种用户界面渲染方法，应用于客户端，客户端集成有用于对用户界面模板和业务数据进行合并的模板引擎，该方法包括：

向服务器发送针对用户界面的数据请求；

接收服务器发送的目标业务的目标用户界面模板和目标业务数据，其中，目标业务为：数据请求所指示的业务；

调用模板引擎按照预设的跨平台界面描述规则合并目标用户界面模板和目标业务数据，得到目标用户界面数据；

对目标用户界面数据进行数据渲染，得到目标用户界面。

由上可见，本发明实施例提供的方案中，客户端集成了模板引擎，进而客户端具有了对用户界面模板和业务数据进行合并的能力。在此基础上，客户端进行用户界面渲染时，从服务器获得目标用户界面模板和目标业务数据即可，这样客户端就能够按照跨平台界面描述规则合并得到目标用户界面数据，对用户界面数据进行渲染之后，能够得到目标用户界面。由于目标业务发生变化后目标业务数据也会发生改变，这样客户端能够随着目标业务数据的变化而合并得到变化的目标用户界面数据，进而能够渲染得到变化的用户界面，因此，本发明实施例提供的方案实现了随着业务动态变化，动态渲染不同的用户界面。

另外，由于在本发明实施例提供的方案中，客户端完成了用户界面模板和业务数据的合并过程，这样服务器不需要参与该合并过程，也就不需要实现合并的功能。相比于客户端接收服务器已经合并好的用户界面数据进行数据渲染，本发明实施例提供的方案降低了客户端对服务器在功能上的依赖，降低了客户端与服务器的耦合程度。

对于服务器而言，不参与合并过程，在开发过程中，服务器侧的开发人员不需要学习合并得到用户界面数据所需的跨平台界面描述规则，降低了服务器侧开发人员的学习成本，提高了开发效率。

本发明的一个实施例中，参见图1，提供了第一种用户界面渲染方法的流程示意图，该方法应用于客户端，客户端集成有用于对用户界面模板和业务数据进行合并的模板引擎。该方法包括以下步骤S101-S104。

步骤S101：向服务器发送针对用户界面的数据请求。

数据请求用于获取描述用户界面的数据。数据请求可以基于预设的通信协议形成，上述预设的通信协议为：客户端与作为数据请求发送的目标的服务器之间的通信协议，例如，当预设的通信协议为HTTP协议时，数据请求可以是HTTP请求。

客户端向服务器发送数据请求是为了从服务器获得数据，下面说明两种通过数据请求从服务器处获得数据的实现方式。

其一，可以在数据请求的请求信息中指定渲染用户界面所需数据的URL(uniformresource locator，统一资源定位符)地址。相应的，接收到该数据请求的服务器可以从该URL地址获取发送至客户端的数据。

其二，不同的业务可以采用不同的用户界面进行展示。在此情况下，业务与用户界面具有预先指定的匹配关系。则在数据请求的请求信息中，可以设置业务名称作为请求参数，即，数据请求通过业务名称指示了业务。在发送这样的数据请求后，服务器接收该数据请求，根据数据请求得到的请求参数中的业务名称，确定数据请求对应的业务，再根据业务与用户界面的匹配关系，确定用于展示业务的用户界面，并将渲染用户界面的数据发送至客户端。

步骤S102：接收服务器发送的目标业务的目标用户界面模板和目标业务数据。

其中，上述目标业务为：数据请求所指示的业务。指示方式参见步骤S101，此处不再详述。

上述目标用户界面模板描述向用户提供目标业务时所使用的用户界面的模板。上述目标业务数据为实现目标业务所使用的业务数据。

目标业务数据和目标用户界面模板间存在预设的匹配关系，匹配关系可以通过在目标用户界面模板和目标业务数据中设置相同的变量名表示。例如，目标用户界面模板中设置了引入图片的字符串“<img src＝”{{imgURL}}”>”,imgURL为引入图片的地址的变量名，则业务数据中具有imgURL变量名对应的图片地址与模板中引入图片的字符串具有匹配关系。

步骤S103：调用模板引擎按照预设的跨平台界面描述规则合并目标用户界面模板和目标业务数据，得到目标用户界面数据。

上述跨平台界面描述规则为预设的、用于合并得到用户界面数据的规则，该规则定义用户界面数据描述用户界面的语言，以及使用该语言描述用户界面中元素时采用的格式。例如，跨平台界面描述规则可以规定“->”字符串在用户界面上形成一个箭头图案。

跨平台界面描述规则在不同的软件平台上通用，例如，跨平台界面描述规则可以基于DSL(domain specific language，特定领域语言)制定。具体的，DSL可以采用JSON(JavaScript Object Notation,JavaScript对象简谱)进行描述。

另外，跨平台界面描述规则也可以基于通用语言制定，例如，采用HTML和CSS(Cascading Style Sheets，层叠样式表)制定跨平台界面描述规则。

对目标用户界面模板和目标业务数据进行合并，可以是将目标业务数据作为参数，替换目标用户界面模板中的待替换的标识，其中，待替换的标识可以是变量、表达式、占位符等。替换过程中，根据跨平台界面描述规则，将具有各种格式的业务数据转换为符合跨平台界面描述规则的格式的参数。例如，跨平台界面描述规则采用JSON进行描述，则可以在JavaScript模板中，可以采用stringify()方法将字符串格式的业务数据转成JSON格式的参数。这样，合并后的目标用户界面数据中界面元素的表示方式均符合跨平台界面描述规则。

完成赋值后，以目标业务数据作为实际参数的目标用户界面模板可以表示具有实际样式的界面元素。

步骤S104：对目标用户界面数据进行数据渲染，得到目标用户界面。

本发明的一个实施例中，可以确定目标用户界面数据描述的用户界面中各元素的布局信息，根据所确定的布局信息形成渲染树，渲染树的节点为各元素，并按照渲染树节点的层次结构绘制其表示的界面元素，最终得到目标用户界面。

由上可见，本发明实施例提供的方案中，客户端集成了模板引擎，进而客户端具有了对用户界面模板和业务数据进行合并的能力。在此基础上，客户端进行用户界面渲染时，从服务器获得目标用户界面模板和目标业务数据即可，这样客户端就能够按照跨平台界面描述规则合并得到目标用户界面数据，对用户界面数据进行渲染之后，能够得到目标用户界面。由于目标业务发生变化后目标业务数据也会发生改变，这样客户端能够随着目标业务数据的变化而合并得到变化的目标用户界面数据，进而能够渲染得到变化的用户界面，因此，本发明实施例提供的方案实现了随着业务动态变化，动态渲染不同的用户界面。

另外，由于在本发明实施例提供的方案中，客户端完成了用户界面模板和业务数据的合并过程，这样服务器不需要参与该合并过程，也就不需要实现合并的功能。相比于客户端接收服务器已经合并好的用户界面数据进行数据渲染，本发明实施例提供的方案降低了客户端对服务器在功能上的依赖，降低了客户端与服务器的耦合程度。

对于服务器而言，不参与合并过程，在开发过程中，服务器侧的开发人员不需要学习合并得到用户界面数据所需的跨平台界面描述规则，降低了服务器侧开发人员的学习成本，提高了开发效率。

在完成上述步骤S104，得到目标用户界面之后，目标用户界面在用于和用户进行交互时可以根据用户的交互行为进行刷新，在此过程中，需要用新的用户界面代替原有的目标用户界面用于交互。下面对新的用户界面的具体获得方式进行说明。

本发明的一个实施例中，参见图2，提供了第二种用户界面渲染方法的流程示意图，该方法应用于客户端，包括以下步骤S201-S209。

步骤S201：向服务器发送针对用户界面的数据请求。

步骤S202：接收服务器发送的目标业务的目标用户界面模板和目标业务数据。

步骤S203：调用模板引擎按照预设的跨平台界面描述规则合并目标用户界面模板和目标业务数据，得到目标用户界面数据。

步骤S204：对目标用户界面数据进行数据渲染，得到目标用户界面。

上述步骤S201-S204分别与前述步骤S101-S104相同，此处不再详述。

步骤S205：响应于目标用户界面的更改事件，从目标业务数据中，确定更改事件所指示的发生更改的目标界面元素对应的第一业务数据。

其中，上述更改事件为：响应于目标用户界面被操作而引起的界面发生变化的事件。

更改事件可以是预先设置为对应用户界面元素的UI(User Interface，用户界面)事件，在目标用户界面被操作时，由不同操作行为触发，引起界面发生不同的变化，具体的操作行为可由用户选择并实施。例如，更改事件为click(点击)事件，该事件可以被用户在用户界面上的点击行为触发；更改事件为load(加载)事件，该事件可以被用户打开用户界面上的新窗口的操作行为触发。

本发明的一个实施例中，可以预先设置更改事件被触发后发生更改的界面元素，并为界面元素设置更改事件发生后的事件处理方式。例如，用户界面上存在的元素为超链接A，在用户界面显示时，超链接A引用图片a并展示在用户界面上。更改事件可以设置为用户点击图片a，事件处理方式可以是获取引用图片b的超链接B，并将超链接A替换为引用图片b的超链接B。

由上可知，可以根据用户界面元素的设置信息确定更改事件所指示的发生更改的目标界面元素。在此情况下，上述第一业务数据即为更改事件发生之前目标界面元素对应的业务数据。延用上述实施例，用户点击图片a的更改事件发生时，所更改的目标界面元素为超链接A，对应的第一业务数据为超链接A的字符串。

步骤S206：根据预先设定的目标界面元素对应的业务数据获得逻辑，获得目标界面元素对应的第二业务数据。

业务数据获得逻辑可以表示获取业务数据的方式，在业务数据获得逻辑中，可以声明获取业务数据的内容，指定业务数据的来源和限定获取业务数据的数据量等。

目标界面元素与业务数据获得逻辑的对应关系可以预先设定。具体的，可以为用户界面上的每一界面元素设定对应的脚本或者关联的本地代码，在脚本或者本地代码中描述上述业务数据获得逻辑的实现方式。

上述方式中，采用脚本描述业务数据获得逻辑的过程可以参考如下：

本发明的一个实施例中，上述模板引擎中内嵌不同界面元素对应的逻辑脚本，逻辑脚本用于描述获得界面元素对应的业务数据的逻辑；

在此情况下，可以确定模板引擎中内嵌的目标界面元素对应的目标逻辑脚本；运行目标逻辑脚本获得目标界面元素对应的第二业务数据。

目标逻辑脚本实现的业务数据获得逻辑中指定获取的业务数据为目标界面元素对应的业务数据，第二业务数据。

目标逻辑脚本为目标界面元素对应的逻辑脚本，可以由目标界面元素接收的用户的交互行为触发，触发后，运行目标逻辑脚本获取第二业务数据。

具体的，可以在目标逻辑脚本中指定存储第二业务数据的文件或者数据库表，按照所指定的存储方式所设置的存储位置中获取第二业务数据。

采用逻辑脚本相对于采用本地代码表示业务数据获得逻辑具有更强的灵活性。即，更改本地代码需要额外的修改本地文件，而逻辑脚本通常可以内嵌于用户界面模板中，只需要在模板内修改即可调整业务数据获得逻辑，不涉及用户界面模板之外的其他客户端代码。

逻辑脚本的类型可以根据其内嵌的用户界面模板的模板类型不同而不同，例如，模板类型为JavaScript模板类型时，逻辑脚本可以是JavaScript脚本类型；模板类型为ASP模板类型时，逻辑脚本可以是VBScript脚本类型。

由上可见，本发明实施例提供的方案中，采用逻辑脚本实现业务数据获得逻辑，使得可以运行目标界面元素对应的目标逻辑脚本，获得第二业务数据，使得用户界面可以根据所得第二业务数据完成后续的更新。并且，使用逻辑脚本便于对业务数据获得逻辑进行调整和修改，仅需要调整内嵌逻辑脚本的模板，不要更改其它客户端文件或者本地文件，提高了开发效率。

步骤S207：将目标业务数据中的第一业务数据替换为第二业务数据，得到第三业务数据。

本发明的一个实施例中，可以为各业务数据设置不同的变量名，按照变量名对各业务数据进行引用。改变引用第一业务数据的变量的引用指向，使其引用第二业务数据，即可完成替换。替换后，包含第二业务数据的目标业务数据为第三业务数据。

步骤S208：调用模板引擎按照跨平台界面描述规则合并目标用户界面模板和第三业务数据。

合并目标用户界面模板和第三业务数据的方式类似前述步骤S103中合并目标用户界面模板和目标业务数据，区别仅在于第三业务数据和目标业务数据等名称概念上的替换，此处不再详述。

步骤S209：对合并后的数据进行数据渲染，得到新的用户界面。

由上可见，当目标用户界面发生了更改事件时，将发生改更的目标界面元素的第一业务数据替换为第二业务数据，并根据替换后得到的第三业务数据与目标用户界面合并。这样，对合并后的数据进行数据渲染得到的新的用户界面中包含第二业务数据对应的新的界面元素，实现了用户界面的动态更新，进一步增强了客户端的动态化能力。

并且，上述过程仅在客户端中就可以完成，服务器并不参与合并得到新的用户界面数据的过程，在调试客户端的情况下，不需要与服务器进行交互，在客户端实时调整业务数据或者用户界面模板，就能够实时地调试用户界面数据生成的功能，提高了调试的效率，缩短了包含该客户端的软件产品的迭代周期。

对应于客户端所用的用户界面渲染方法，本发明的一个实施例中，提供了第三种用户界面渲染方法，应用于服务器，参见图3的流程示意图，该方法包括以下步骤S301-S303。

步骤S301：接收客户端发送的针对用户界面的数据请求。

上述客户端为前述步骤S101中向服务器发送数据请求的客户端。服务器可以接收多个客户端发送的针对用户界面的数据请求，并针对每一个客户端进行下述步骤的处理。

步骤S302：确定数据请求所指示的目标业务的目标用户界面模板和目标业务数据。

以下对目标用户界面模板的确定方式进行举例说明。

按照前述步骤S102所提及的方式，数据请求可以指示目标业务。因此，根据所接收的数据请求，确定所指示的目标业务后，可以从预先存储于服务器的所有包含用户界面模板的文件中，查找与目标业务具有匹配关系的用户界面所具有的用户界面模板作为目标用户界面模板。

以下对目标业务数据的确定方式进行举例说明。

本发明的一个实施例中，可以预设目标业务所需的数据类型，并从服务器存储的业务数据中选出具有指定数据类型的业务数据作为目标业务数据。也可以将属于不同业务的业务数据分别存储在不同的存储单元中，并为存储单元标记其存储的业务数据所属业务的业务名称，这样就可以根据目标业务的业务名称确定存储单元，再从存储单元中获得目标业务数据。存储单元具体可以数据库表等。

步骤S303：向客户端发送目标用户界面模板和目标业务数据，以使得客户端根据目标用户界面模板和目标业务数据，渲染用户界面。

具体的渲染用户界面的方式参见前述实施例，此处不再详述。

由上可见，结合前述客户端的用户界面渲染方案实施例可知，在本发明实施例提供的方案中，服务器只负责业务数据和用户界面模板的发送，通过集成有模板引擎的客户端对用户界面模板和业务数据进行合并，得到用户界面数据，可以完成用户界面渲染，并且根据服务器发送的业务数据不同，合并得到的用户界面数据不同，进而能够根据业务数据的不同渲染得到不同的用户界面。因此，本发明实施例提供的方案实现了随着业务动态变化，动态渲染不同的用户界面。

另外，服务器不需要参与合并得到用户界面数据获得过程，减轻了服务器压力，在此情况下，再者，开发服务器的过程中不涉及获得用户界面数据的过程中需要采用的前端开发方法，降低了服务器的开发成本，服务器的资源包中不需要配置实现上述前端开发方法所需的数据，减少了服务器资源包的大小。

下面以JS模板引擎为例，对本发明实施例提供用户界面渲染的方案流程进行整体描述。

参见图4，template.json为用户界面模板。预先编写该模板时，所采用的编写方式符合跨平台界面描述规则，此处为基于JSON格式的DSL描述的跨平台界面描述规则。对template.json所表示的用户界面模板进行预编译，使其转换为JS模板，即图中template.js。

具体的预编译可以采用如下方式：

按照art-template模板引擎预设的格式转换方式，将用户界面模板转换art-template格式的过渡模板。art-template模板引擎可以对art-template格式的过渡模板进行编译，得到最终的JS模板。

JS模板被传递给Card(卡片)模板后台，并且数据后台也将数据传递给Card模板后台，所传递的数据为业务数据。

Card模板后台接收JS模板和业务数据，并判断所接收的JS模板和业务数据是否属于同一目标业务，并将属于同一目标业务的JS模板和业务数据发送至客户端，即图中发送模板/数据的过程。

JS模板引擎对接收到的JS模板和业务数据进行合并，得到用户界面数据，并按照DSL描述的跨平台界面描述规则对用户界面数据进行数据渲染，完成最后UI渲染的过程。

完成渲染得到用户界面后，根据更改事件对用户界面进行刷新的方式可以参考图5所示的流程框图。

其中，Native端的流程表示客户端本地进行的流程，JS端的流程表示模板引擎中进行流程，在本实施例中，客户端继承的模板引擎为JS模板引擎。

UI事件为本实施例中发生的更改事件。事件处理模块捕捉到所发生的更改事件，并按照前述实施例的描述，确定发生更改的目标界面元素对应的第一业务数据，即图中的oldData(旧数据)。oldData被发送给业务逻辑模块进行处理，确定用于替换oldData的第二业务数据，即图中的newData(新数据)。

第二业务数据替换第一业务数据后，得到第三业务数据，并在渲染数据模块中，根据第三业务数据，按照前述实施例的步骤，得到新的用户界面数据，即newDSL，客户端的DSL比对模块会将newDSL与旧的用户界面数据比对，确定用户界面上存在待修改的界面内容，用户界面更新模块根据所确定的待修改的界面内容，重新渲染用户界面，实现用户界面的刷新。

与上述实施例中，应用于客户端的用户界面渲染方法相对应，本发明实施例还提供了一种用户界面渲染装置。

本发明的实施例中，参见图6，提供了第一种用户界面渲染装置的结构示意图，应用于客户端，所述客户端集成有用于对用户界面模板和业务数据进行合并的模板引擎，所述装置包括：

数据请求发送模块601，用于向服务器发送针对用户界面的数据请求；

模板及数据接收模块602，用于接收所述服务器发送的目标业务的目标用户界面模板和目标业务数据，其中，所述目标业务为：所述数据请求所指示的业务；

用户界面数据获得模块603，用于调用所述模板引擎按照预设的跨平台界面描述规则合并所述目标用户界面模板和所述目标业务数据，得到目标用户界面数据；

第一数据渲染模块604，用于对所述目标用户界面数据进行数据渲染，得到目标用户界面。

由上可见，本发明实施例提供的方案中，客户端集成了模板引擎，进而客户端具有了对用户界面模板和业务数据进行合并的能力。在此基础上，客户端进行用户界面渲染时，从服务器获得目标用户界面模板和目标业务数据即可，这样客户端就能够按照跨平台界面描述规则合并得到目标用户界面数据，对用户界面数据进行渲染之后，能够得到目标用户界面。由于目标业务发生变化后目标业务数据也会发生改变，这样客户端能够随着目标业务数据的变化而合并得到变化的目标用户界面数据，进而能够渲染得到变化的用户界面，因此，本发明实施例提供的方案实现了随着业务动态变化，动态渲染不同的用户界面。

另外，由于在本发明实施例提供的方案中，客户端完成了用户界面模板和业务数据的合并过程，这样服务器不需要参与该合并过程，也就不需要实现合并的功能。相比于客户端接收服务器已经合并好的用户界面数据进行数据渲染，本发明实施例提供的方案降低了客户端对服务器在功能上的依赖，降低了客户端与服务器的耦合程度。

对于服务器而言，不参与合并过程，在开发过程中，服务器侧的开发人员不需要学习合并得到用户界面数据所需的跨平台界面描述规则，降低了服务器侧开发人员的学习成本，提高了开发效率。

本发明的一个实施例中，参见图7，提供了第二种用户界面渲染装置的结构示意图，应用于客户端，所述装置包括：

数据请求发送模块701，用于向服务器发送针对用户界面的数据请求；

模板及数据接收模块702，用于接收所述服务器发送的目标业务的目标用户界面模板和目标业务数据，其中，所述目标业务为：所述数据请求所指示的业务；

用户界面数据获得模块703，用于调用所述模板引擎按照预设的跨平台界面描述规则合并所述目标用户界面模板和所述目标业务数据，得到目标用户界面数据；

第一数据渲染模块704，用于对所述目标用户界面数据进行数据渲染，得到目标用户界面。

第一业务数据确定模块705，用于所述第一数据渲染模块对所述目标用户界面数据进行数据渲染，得到目标用户界面之后，响应于所述目标用户界面的更改事件，从所述目标业务数据中，确定所述更改事件所指示的发生更改的目标界面元素对应的第一业务数据，其中，所述更改事件为：响应于所述目标用户界面被操作而引起的界面发生变化的事件；

第二业务数据获得模块706，用于根据预先设定的所述目标界面元素对应的业务数据获得逻辑，获得所述目标界面元素对应的第二业务数据；

第三业务数据获得模块707，用于将所述目标业务数据中的所述第一业务数据替换为所述第二业务数据，得到第三业务数据；

模板及数据合并模块708，用于调用所述模板引擎按照所述跨平台界面描述规则合并所述目标用户界面模板和所述第三业务数据；

第二数据渲染模块709，用于对合并后的数据进行数据渲染，得到新的用户界面。

由上可见，当目标用户界面发生了更改事件时，将发生改更的目标界面元素的第一业务数据替换为第二业务数据，并根据替换后得到的第三业务数据与目标用户界面合并。这样，对合并后的数据进行数据渲染得到的新的用户界面中包含第二业务数据对应的新的界面元素，实现了用户界面的动态更新，进一步增强了客户端的动态化能力。

并且，上述过程仅在客户端中就可以完成，服务器并不参与合并得到新的用户界面数据的过程，在调试客户端的情况下，不需要与服务器进行交互，在客户端实时调整业务数据或者用户界面模板，就能够实时地调试用户界面数据生成的功能，提高了调试的效率，缩短了包含该客户端的软件产品的迭代周期。

本发明的一个实施例中，所述模板引擎中内嵌不同界面元素对应的逻辑脚本，所述逻辑脚本用于描述获得界面元素对应的业务数据的逻辑；

所述第二业务数据获得模块706，具体用于确定所述模板引擎中内嵌的所述目标界面元素对应的目标逻辑脚本；运行所述目标逻辑脚本获得所述目标界面元素对应的第二业务数据。

由上可见，本发明实施例提供的方案中，采用逻辑脚本实现业务数据获得逻辑，使得可以运行目标界面元素对应的目标逻辑脚本，获得第二业务数据，使得用户界面可以根据所得第二业务数据完成后续的更新。并且，使用逻辑脚本便于对业务数据获得逻辑进行调整和修改，仅需要调整内嵌逻辑脚本的模板，不要更改其它客户端文件或者本地文件，提高了开发效率。

本发明的一个实施例中，所述模板引擎为：基于JavaScript语言实现的引擎；所述用户界面模板为：基于JavaScript语言实现的模板。

此种情况下，可以应用JS模板引擎获得用于渲染用户界面的用户界面数据。

与上述实施例中，应用于服务器的用户界面渲染方法相对应，本发明实施例还提供了一种用户界面渲染装置。

本发明的一个实施例中，参见图8，提供了第三种用户界面渲染装置的结构示意图，应用于服务器，所述装置包括：

数据请求接收模块801，用于接收客户端发送的针对用户界面的数据请求；

模板及数据确定模块802，用于确定所述数据请求所指示的目标业务的目标用户界面模板和目标业务数据；

模板及数据发送模块803，用于向所述客户端发送所述目标用户界面模板和所述目标业务数据，以使得所述客户端根据所述目标用户界面模板和所述目标业务数据，渲染用户界面。

由上可见，结合前述客户端的用户界面渲染方案实施例可知，在本发明实施例提供的方案中，服务器只负责业务数据和用户界面模板的发送，通过集成有模板引擎的客户端对用户界面模板和业务数据进行合并，得到用户界面数据，可以完成用户界面渲染，并且根据服务器发送的业务数据不同，合并得到的用户界面数据不同，进而能够根据业务数据的不同渲染得到不同的用户界面。因此，本发明实施例提供的方案实现了随着业务动态变化，动态渲染不同的用户界面。

另外，服务器不需要参与合并得到用户界面数据获得过程，减轻了服务器压力，在此情况下，再者，开发服务器的过程中不涉及获得用户界面数据的过程中需要采用的前端开发方法，降低了服务器的开发成本，服务器的资源包中不需要配置实现上述前端开发方法所需的数据，减少了服务器资源包的大小。

本发明实施例还提供了一种电子设备，如图9所示，包括处理器901、通信接口902、存储器903和通信总线904，其中，处理器901，通信接口902，存储器903通过通信总线904完成相互间的通信，

存储器903，用于存放计算机程序；

处理器901，用于执行存储器903上所存放的程序时，实现前述应用于客户端的用户界面渲染方法的步骤，或者实现前述应用于服务器的用户界面渲染方法的步骤。

上述终端提到的通信总线可以是外设部件互连标准(Peripheral ComponentInterconnect，简称PCI)总线或扩展工业标准结构(Extended Industry StandardArchitecture，简称EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

通信接口用于上述终端与其他设备之间的通信。

存储器可以包括随机存取存储器(Random Access Memory，简称RAM)，也可以包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。

上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(Digital Signal Processor，简称DSP)、专用集成电路(Application SpecificIntegrated Circuit，简称ASIC)、现场可编程门阵列(Field－Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

在本发明提供的又一实施例中，还提供了一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现上述实施例中任一所述的用户界面渲染方法。

在本发明提供的又一实施例中，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述实施例中任一所述的用户界面渲染方法。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本发明实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims (10)

1.一种用户界面渲染方法，其特征在于，应用于客户端，所述客户端集成有用于对用户界面模板和业务数据进行合并的模板引擎，所述方法包括：

向服务器发送针对用户界面的数据请求；

接收所述服务器发送的目标业务的目标用户界面模板和目标业务数据，其中，所述目标业务为：所述数据请求所指示的业务；

调用所述模板引擎按照预设的跨平台界面描述规则合并所述目标用户界面模板和所述目标业务数据，得到目标用户界面数据；

对所述目标用户界面数据进行数据渲染，得到目标用户界面。

2.根据权利要求1所述的方法，其特征在于，在所述对所述目标用户界面数据进行数据渲染，得到目标用户界面之后，还包括：

响应于所述目标用户界面的更改事件，从所述目标业务数据中，确定所述更改事件所指示的发生更改的目标界面元素对应的第一业务数据，其中，所述更改事件为：响应于所述目标用户界面被操作而引起的界面发生变化的事件；

根据预先设定的所述目标界面元素对应的业务数据获得逻辑，获得所述目标界面元素对应的第二业务数据；

将所述目标业务数据中的所述第一业务数据替换为所述第二业务数据，得到第三业务数据；

调用所述模板引擎按照所述跨平台界面描述规则合并所述目标用户界面模板和所述第三业务数据；

对合并后的数据进行数据渲染，得到新的用户界面。

3.根据权利要求2所述的方法，其特征在于，所述模板引擎中内嵌不同界面元素对应的逻辑脚本，所述逻辑脚本用于描述获得界面元素对应的业务数据的逻辑；

所述根据预先设定的所述目标界面元素对应的业务数据获得逻辑，获得所述目标界面元素对应的第二业务数据，包括：

确定所述模板引擎中内嵌的所述目标界面元素对应的目标逻辑脚本；

运行所述目标逻辑脚本获得所述目标界面元素对应的第二业务数据。

4.根据权利要求1-3中任一项所述的方法，其特征在于，

所述模板引擎为：基于JavaScript语言实现的引擎；

所述用户界面模板为：基于JavaScript语言实现的模板。

5.一种用户界面渲染方法，其特征在于，应用于服务器，所述方法包括：

接收客户端发送的针对用户界面的数据请求；

确定所述数据请求所指示的目标业务的目标用户界面模板和目标业务数据；

向所述客户端发送所述目标用户界面模板和所述目标业务数据，以使得所述客户端根据所述目标用户界面模板和所述目标业务数据，渲染用户界面。

6.一种用户界面渲染装置，其特征在于，应用于客户端，所述客户端集成有用于对用户界面模板和业务数据进行合并的模板引擎，所述装置包括：

数据请求发送模块，用于向服务器发送针对用户界面的数据请求；

模板及数据接收模块，用于接收所述服务器发送的目标业务的目标用户界面模板和目标业务数据，其中，所述目标业务为：所述数据请求所指示的业务；

用户界面数据获得模块，用于调用所述模板引擎按照预设的跨平台界面描述规则合并所述目标用户界面模板和所述目标业务数据，得到目标用户界面数据；

第一数据渲染模块，用于对所述目标用户界面数据进行数据渲染，得到目标用户界面。

7.根据权利要求6所述的装置，其特征在于，所述装置还包括：

第一业务数据确定模块，用于所述第一数据渲染模块对所述目标用户界面数据进行数据渲染，得到目标用户界面之后，响应于所述目标用户界面的更改事件，从所述目标业务数据中，确定所述更改事件所指示的发生更改的目标界面元素对应的第一业务数据，其中，所述更改事件为：响应于所述目标用户界面被操作而引起的界面发生变化的事件；

第二业务数据获得模块，用于根据预先设定的所述目标界面元素对应的业务数据获得逻辑，获得所述目标界面元素对应的第二业务数据；

第三业务数据获得模块，用于将所述目标业务数据中的所述第一业务数据替换为所述第二业务数据，得到第三业务数据；

模板及数据合并模块，用于调用所述模板引擎按照所述跨平台界面描述规则合并所述目标用户界面模板和所述第三业务数据；

第二数据渲染模块，用于对合并后的数据进行数据渲染，得到新的用户界面。

8.一种用户界面渲染装置，其特征在于，应用于服务器，所述装置包括：

数据请求接收模块，用于接收客户端发送的针对用户界面的数据请求；

模板及数据确定模块，用于确定所述数据请求所指示的目标业务的目标用户界面模板和目标业务数据；

模板及数据发送模块，用于向所述客户端发送所述目标用户界面模板和所述目标业务数据，以使得所述客户端根据所述目标用户界面模板和所述目标业务数据，渲染用户界面。

9.一种电子设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；

存储器，用于存放计算机程序；

处理器，用于执行存储器上所存放的程序时，实现权利要求1-4或5任一所述的方法步骤。

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

Images