CN107391114B - 页面可视化渲染方法及装置 - Google Patents

Abstract

提供一种页面可视化渲染方法，应用于客户端，所述客户端搭载了包含若干页面组件的页面组件池，其中所述若干页面组件之间相互隔离；并且，所述若干页面组件与页面搭载的业务相互隔离；所述方法包括：获取服务端下发的与页面组件对应的可视化配置数据；将所述可视化配置数据绑定至所述页面组件池中对应的页面组件，以触发所述页面组件基于所述可视化配置数据自主执行可视化渲染；基于可视化渲染完成的页面组件组装生成用户访问的目标页面。

Description

页面可视化渲染方法及装置

技术领域

本说明书涉及计算机应用领域，尤其涉及一种页面可视化渲染方法及装置。

背景技术

在移动端的解决方案中，通常是通过开发APP客户端，来承载服务端面向用户提供的各种服务。在APP客户端的开发的过程中，开发人员可以基于特定的移动端开发平台，开发出预先设计好的用户界面以及业务逻辑相关的源代码(native代码)，然后对开发出的源代码进行编译打包后生成与APP客户端相关的APK安装包，发布在APP应用市场中。

当用户从APP应用市场中下载APK完成APP客户端的安装后，APP客户端可以通过已经编译完成的与用户界面相关的源代码，对用户界面进行可视化渲染和展现，而用户可以通过在用户界面上执行相应的操作(比如诸如用户的点击行为)，来触发APP客户端与后台的服务端进行通信，从服务端请求相应的数据，并通过APP客户端已经编译完成的与业务逻辑相关的源代码对获取到的这些数据进行业务处理。

发明内容

本说明书提出一种页面可视化渲染方法，应用于客户端，所述客户端搭载了包含若干页面组件的页面组件池，其中所述若干页面组件之间相互隔离；并且，所述若干页面组件与页面搭载的业务相互隔离；所述方法包括：

获取服务端下发的与页面组件对应的可视化配置数据；

将所述可视化配置数据绑定至所述页面组件池中对应的页面组件，以触发所述页面组件基于所述可视化配置数据自主执行可视化渲染；

基于可视化渲染完成的页面组件组装生成用户访问的目标页面。

可选的，所述获取服务端下发的与页面组件对应的可视化配置数据，包括：

检测到用户针对所述目标页面的访问操作时，向所述服务端发送对应于所述目标页面的访问请求；其中，所述访问请求携带所述用户的用户标识；

获取服务端在接收到所述访问请求后，基于所述用户标识下发的与所述目标页面中的各页面组件对应的可视化配置数据。

可选的，将所述可视化配置数据绑定至所述页面组件池中对应的页面组件，以触发所述页面组件基于所述可视化配置数据自主执行可视化渲染，包括：

判断所述服务端下发的所述可视化配置数据是否发生更新；

如果所述可视化配置数据发生更新，将所述可视化配置数据绑定至所述页面组件池中对应的页面组件，以触发所述页面组件基于所述可视化配置数据自主执行可视化渲染。

可选的，所述若干页面组件之间，以及所述若干页面组件与页面搭载的业务通过预设的消息总线相互隔离；其中，所述业务对应的业务处理逻辑搭载于所述目标页面的页面控制器；或者，所述业务对应的业务处理逻辑与所述目标页面的页面控制器相互分离；

所述方法还包括：

与所述目标页面对应的页面控制器监听所述消息总线中的事件消息；其中，所述消息总线中的事件消息由所述目标页面中的页面组件，在检测到用户针对该页面组件的预设触发操作时，提交至所述消息总线；

当监听到预设事件消息时，所述页面控制器基于搭载的业务处理逻辑对该事件消息执行进一步的业务处理；或者，所述页面控制器进一步提交所述事件消息，以由与所述页面控制器相互分离的业务处理逻辑对该事件消息执行进一步的业务处理。

可选的，还包括：

将业务处理结果转发至所述目标页面中与所述预设事件消息对应的页面组件关联的其它页面组件；或者，

如果所述业务处理结果触发了所述其它页面组件的可视化配置数据的更新，将更新后的可视化配置数据绑定至所述其它页面组件，以触发所述其它页面组件基于更新后的可视化配置数据重新执行可视化渲染。

本说明书还提出一种页面可视化渲染装置，应用于客户端，所述客户端搭载了包含若干页面组件的页面组件池，其中所述若干页面组件之间相互隔离；并且，所述若干页面组件与页面搭载的业务逻辑相互隔离；所述装置包括：

获取模块，获取服务端下发的与页面组件对应的可视化配置数据；

绑定模块，将所述可视化配置数据绑定至所述页面组件池中对应的页面组件，以触发所述页面组件基于所述可视化配置数据自主执行可视化渲染；

生成模块，基于可视化渲染完成的页面组件组装生成用户访问的目标页面。

可选的，所述获取模块：

检测到用户针对所述目标页面的访问操作时，向所述服务端发送对应于所述目标页面的访问请求；其中，所述访问请求携带所述用户的用户标识；

获取服务端在接收到所述访问请求后，基于所述用户标识下发的与所述目标页面中的各页面组件对应的可视化配置数据。

可选的，所述绑定模块：

判断所述服务端下发的所述可视化配置数据是否发生更新；

如果所述可视化配置数据发生更新，将所述可视化配置数据绑定至所述页面组件池中对应的页面组件，以触发所述页面组件基于所述可视化配置数据自主执行可视化渲染。

可选的，所述若干页面组件之间，以及所述若干页面组件与页面搭载的业务通过预设的消息总线相互隔离；其中，所述业务对应的业务处理逻辑搭载于所述目标页面的页面控制器；或者，所述业务对应的业务处理逻辑与所述目标页面的页面控制器相互分离；

所述装置还包括：

页面控制器，监听所述消息总线中的事件消息；其中，所述消息总线中的事件消息由所述目标页面中的页面组件，在检测到用户针对该页面组件的预设触发操作时，提交至所述消息总线；当监听到预设事件消息时，基于搭载的业务处理逻辑对该事件消息执行进一步的业务处理；或者，将所述事件消息提交至业务处理模块，以由所述业务处理模块对该事件消息执行进一步的业务处理。

可选的，所述页面控制器或者所述业务处理模块进一步：

将业务处理结果转发至所述目标页面中与所述预设事件消息对应的页面组件关联的其它页面组件；或者，

如果所述业务处理结果触发了所述其它页面组件的可视化配置数据的更新，将更新后的可视化配置数据绑定至所述其它页面组件，以触发所述其它页面组件基于更新后的可视化配置数据重新执行可视化渲染。

本说明书还提出一种页面可视化渲染装置，应用于客户端，所述客户端搭载了包含若干页面组件的页面组件池，其中所述若干页面组件之间相互隔离；并且，所述若干页面组件与页面搭载的业务逻辑相互隔离；所述装置包括：

处理器；

用于存储机器可执行指令的存储器；

其中，通过读取并执行所述存储器存储的与页面可视化渲染的控制逻辑对应的机器可执行指令，所述处理器被促使：

获取服务端下发的与页面组件对应的可视化配置数据；

将所述可视化配置数据绑定至所述页面组件池中对应的页面组件，以触发所述页面组件基于所述可视化配置数据自主执行可视化渲染；

基于可视化渲染完成的页面组件组装生成用户访问的目标页面。

本说明书中，提出一种客户端的系统架构，在该系统架构中客户端中可以搭载包含若干页面组件的页面组件池，其中，页面组件池中的页面组件之间；以及，页面组件池中的页面组件与页面搭载的业务相互隔离；并且，页面组件池中的页面组件可以基于服务端下发的可视化配置数据自主的执行可视化渲染，从而当用户访问客户端搭载的目标页面时，客户端可以将服务端下发的可视化配置数据绑定至页面组件池中对应的页面组件，驱动这些页面组件自主的执行可视化渲染，并在可视化渲染完成后，由该目标页面的页面控制器基于可视化渲染完成的页面组件组装生成该目标页面；

由于页面组件池中的页面组件之间，以及页面组件池中的页面组件与页面搭载的业务之间均相互隔离；并且，页面组件池中的页面组件具有基于服务端下发的可视化配置数据，自主的执行可视化渲染的能力；

一方面，使得页面组件池中的页面组件，可以在客户端搭载的不同的业务页面中进行复用；

另一方面，当不同的人群在访问目标页面时，服务端可以通过动态下发与组成该目标页面的各页面组件相应的可视化配置数据，来驱动各页面组件自主的执行可视化渲染，而不再需要重新发布与客户端对应的安装文件，对客户端中的源代码进行更新，从而显著提升了客户端架构的结构化以及个性化定制的能力，能够快速高效的针对不同的访问人群，为目标页面个性化定制不同的可视化展示效果。

附图说明

图1是本说明书一实施例示出的一种页面组件复用的示意图；

图2是本说明书一实施例示出的一种页面可视化渲染方法的流程图；

图3是本说明书一实施例示出的一种客户端的系统架构图；

图4是本说明书一实施例示出的一种页面组件触发其它页面组件更新可视化展示效果的示意图；

图5是本说明书一实施例提供的承载所述一种页面可视化渲染装置的电子设备所涉及的硬件结构图；

图6是本说明书一实施例提供的一种页面可视化渲染装置的的逻辑框图。

具体实施方式

本说明书旨在提出一种客户端的系统架构，在该系统架构中客户端中可以搭载包含若干页面组件的页面组件池；其中，页面组件池中的页面组件之间；以及，页面组件池中的页面组件与页面搭载的业务之间均相互隔离；并且，页面组件池中的页面组件可以基于服务端下发的可视化配置数据自主的执行可视化渲染，从而当用户访问客户端搭载的目标页面时，客户端可以将服务端下发的可视化配置数据绑定至页面组件池中对应的页面组件，驱动这些页面组件自主的执行可视化渲染，并在可视化渲染完成后，由该目标页面的页面控制器基于可视化渲染完成的页面组件组装生成该目标页面；

在该系统架构中，由于页面组件池中的页面组件之间，以及页面组件池中的页面组件与页面搭载的业务之间均相互隔离；并且，页面组件池中的页面组件具有基于服务端下发的可视化配置数据，自主的执行可视化渲染的能力；

一方面，使得页面组件池中的页面组件，可以在客户端搭载的不同的业务页面中进行复用；

例如，以上述客户端为金融类APP为例，在这种场景下，上述目标页面可以包括APP中的买入页面和卖出页面。

请参见图1，在金融类APP中，买入页面和买出页面中，通常都是由若干个页面组件构成；而在构成买入页面和卖出页面的页面元素中，部分页面组件会存在复用的需求；比如，请继续参见图1，假设买入页面和卖出页面均对应同一款理财产品“XX月度理财”，那么在该理财产品的买入页面和卖出页面中，用于展示与该理财产品相关的基本信息的页面组件通常可以是相同的。在这种情况下，该页面组件可以同时在买入页面和卖出页面中进行复用，作为页面元素分别在买入页面和卖出页面中进行展示。

另一方面，当不同的人群在访问目标页面时，服务端可以通过动态下发与组成该目标页面的各页面组件相应的可视化配置数据，来驱动各页面组件自主的执行可视化渲染，而不再需要重新发布与客户端对应的安装文件，对客户端中的源代码进行更新，从而显著提升了客户端架构的结构化以及个性化定制的能力，能够快速高效的针对不同的访问人群，为目标页面个性化定制不同的可视化展示效果。

例如，仍以上述客户端为金融类APP为例，在这种场景下，该APP的服务端可以基于后台海量的用户交易数据，进行大数据分析，得到用户个性化的行为偏好等信息，然后基于这些大数据分析出的用户个性化的行为偏好，为访问目标页面的不同的用户人群，分别个性化定制不同的可视化展示效果，并针对目标页面的不同的访问人群，为组成该目标页面的页面组件，分别定义不同的可视化配置数据(即对于组成目标页面的某一页面组件而言，当不同的用户人群访问该目标页面时，该页面组件的可视化展示效果将存在差异)，然后将定义的可视化配置数据动态下发至APP，以驱动APP搭载的页面组件池中相应的页面组件基于下发的该可视化配置数据，自主的执行可视化渲染。当组成用户访问的目标页面的页面组件均可视化渲染完成后，该目标页面的页面控制器(Page Controller)可以基于渲染完成的各页面组件组成生成该目标页面。比如，以图1中示出的买入页面或者卖出页面为例，当不同的用户人群访问该买入页面或者卖出页面时，该买入页面或者卖出页面中的各页面组件可以存在差异。

下面通过具体实施例并结合具体的应用场景进行详细描述。

请参考图2，图2是本说明书一实施例提供的一种页面可视化渲染方法，应用于客户端，所述客户端搭载了包含若干页面组件的页面组件池，其中所述若干页面组件之间相互隔离；并且，所述若干页面组件与页面搭载的业务相互隔离；执行以下步骤：

步骤202，获取服务端下发的与页面组件对应的可视化配置数据；

步骤204，将所述可视化配置数据绑定至所述页面组件池中对应的页面组件，以触发所述页面组件基于所述可视化配置数据自主执行可视化渲染；

步骤206，基于可视化渲染完成的页面组件组装生成用户访问的目标页面。

上述客户端，可以包括其搭载的业务页面基于组件化架构设计的任意形式的客户端软件；比如，金融类APP；

上述页面组件，具体可以包括按照功能进行划分的组成页面的若干基本的页面元素；

例如，请继续参见图1，以上述目标页面为金融类APP中的买入页面为例，上述页面组件具体可以包括页面中的文本框(展示理财产品基本信息)、输入框(输入买入份额)、页面选项(用户选择是否自动转入下一期)、按钮(申购确认按钮)等页面元素。

当然，在实际应用中，除了图1中示出的上述页面组件以外，在实际应用中，上述页面组件也可以是诸如表格、下拉框、导航标签等其它形式的页面组件，在本说明书中不再一一列举。

上述页面组件池，可以包括若干由开发人员预先开发完成的页面组件，组成的一个页面组件的“资源池”。客户端中搭载的各种业务页面的页面控制器(Page Controller)，可以通过调用上述“资源池”中的页面组件，按照由开发人员预先设计出的页面布局方式，来组装出相应的业务页面。

其中，需要说明的是，上述页面组件池中的页面组件之间，以及上述页面组件池中的页面组件与页面搭载的业务逻辑之间，均相互隔离。

例如，在实际应用中，在上述客户端的系统架构中，可以通过引入消息总线机制，来实现上述页面组件池中的页面组件之间，以及上述页面组件池中的页面组件与页面搭载的业务逻辑之间的隔离(解耦合)。

另外，需要说明的是，上述页面组件池中的页面组件，均具有基于服务端下发的可视化配置数据执行自主的可视化渲染的能力；在这种情况下，开发人员在开发上述页面组件池中的页面组件时，可以仅开发出这些页面组件相关的一些基础源代码；比如，这些基础源代码通常包括与组件的基本框架、基本的业务功能、触发方式、组件支持的可视化配置数据的基本数据格式等源代码，而不再需要将为各页面组件个性化化定制的可视化展示效果以native源代码的形式，写死在上述客户端的安装文件中。

上述可视化配置数据，包括与各页面组件的可视化展示效果相关的结构化的配置数据；比如，基于Json格式的配置数据。

其中，上述可视化配置数据所包含的具体内容，在本说明书中不进行具体限定，本领域技术人员可以基于实际的可视化展示需求进行自定义配置；

例如，在实际应用中，上述可视化配置数据，通常包括需要在页面组件中静态展示，或者在页面组件被触发后动态展示的展示内容(比如文本、图片等)，以及与展示内容相关的可视化配置(比如文本/图片的颜色、样式、大小等)。

请参见图3，图3为本说明书一实施例示出的一种客户端的系统架构图。

以下将结合图3示出的系统架构图，并通过具体的实施例对本说明书的技术方案进行详细描述。

如图3所示，在初始状态下，后台服务端可以基于后台海量的用户数据，进行大数据分析，得到用户个性化的行为偏好等信息；

例如，以上述客户端为金融类APP为例，上述海量用户数据具体可以是海量的用户交易数据，后台服务端通过对这些用户交易数据进行大数据分析，可以得到用户的日常的交易习惯等偏好信息，然后可以基于这些偏好信息，为用户定制交易页面的可视化展示效果；比如，对于同一个款理财产品，可以通过大数据分析出的不同用户人群的交易量，为不同的用户人群定制差异化的理财产品费率，并在该理财产品的交易界面中相关的页面组件中进行展示(即在同一款理财产品的交易界面中，针对不同的用户人群展示差异化的理财产品费率)。

其中，对海量用户数据进行大数据分析的过程，在本说明书中不再进行详述，本领域技术人员在将本申请的技术方案付诸实现时，可以参考相关技术中的记载。

当服务端通过大数据分析，得到用户个性化的行为偏好基于这些大数据分析出的用户个性化的行为偏好后，可以为访问目标页面的不同用户人群，分别个性化定制不同的可视化展示效果，为不同的用户人群分别定义对应于上述目标页面中各页面组件的个性化的可视化配置数据，并在本地保存这些用户的用户标识，与为这些用户定义的可视化配置数据之间的映射关系，然后在服务端一侧维护的模型仓库中，基于这些个性化的可视化配置数据，为不同的用户人群分别创建对应的可视化效果模型，并依托于这些可视化效果模型，对为不同的用户人群定义的可视化配置数据进行维护和管理。

请参见图3，当服务端完成以上示出的可视化效果模型的建模过程后，上述可视化效果模型的原始数据(即服务端为不同的用户人群分别定义对应于上述目标页面中各页面组件的个性化的可视化配置数据)，下发至上述客户端，以驱动上述客户端搭载相关页面组件执行自主的可视化渲染。

其中，在示出的一种实施方式中，上述客户端可以在用户访问目标页面时，主动向服务端请求由服务端已经定义完成的可视化配置数据。这种方式，适用于一些实时性较高的业务；比如，金融类APP中理财产品的交易业务。

在实现时，上述客户端可以检测用户针对上述目标页面的访问操作，并在检测到用户针对上述目标页面的访问操作时，向服务端发送一个对应于该目标页面的访问请求，并在该访问请求中携带该用户的用户标识(比如用户的账号等)。

其中，上述访问请求具体可以是一个http请求；针对上述目标页面的访问操作，具体可以是用户针对上述客户端中预置的用于触发访问上述目标页面的用户选项的触发操作；例如，以上述目标页面为图1示出的金融类APP中的买入页面为例，在该APP中可以可以预置一“买入”按钮，用户可以通过诸如点击等操作来触发该“买入”按钮，访问上述买入页面。当上述APP检测到用户针对该“买入”按钮的访问操作后，可以向服务端发送一个对应的访问请求。

当服务端收到客户端发送的访问请求后，可以基于该访问请求与上述客户端创建“短连接”，然后读取该访问请求中携带的用户标识，并查找本地维护的上述映射关系，将与该用户标识对应的可视化配置数据，基于建立的该“短连接”下发至上述客户端。

以上示出的可视化配置数据下发方式，可以称之为基于短连接的主动“拉”模式(pull模式)。

当然，在实际应用中，除了以上示出的主动“拉”模式以外，对于一些对实时性要求不高的业务，也可以通过被动“推”模式(push模式)，或者“事务模式”。

其中，所谓被动“推”模式，是指服务端在用户访问上述目标页面之前，一旦获取到该用户的用户标识时(比如在用户登录上述客户端时获取该用户的用户标识)，就可以立即将已定义的上述可视化配置数据主动下发至该客户端。在这种情况下，上述服务端与上述客户端可以通过诸如socket的方式保持一个“长连接”，上述服务端在获取到该用户的用户标识后，可以基于上述长连接主动的将已定义的上述可视化配置数据“推送”给上述客户端。

所谓“事务模式”，是指在用户访问上述目标页面之前，一旦获取到该用户的用户标识时，可以立即向上述客户端下发一些用于获取可视化配置数据的可执行代码或者脚本，而上述客户端可以通过在本地执行这些可执行代码或者脚本，从上述服务端上或者其它路径读取相关的可视化配置数据，或者在本地基于用户输入的信息生成相关的可视化配置数据。

当服务端将与页面组件对应的可视化配置数据下发至客户端后，客户端可以基于这些可视化配置数据来驱动页面组件池中对应的页面组件自主的执行可视化渲染。

以下将继续结合图3，对上述客户端的系统架构中的各个功能实体以及数据流向进行详细介绍。

请继续参见图3，在上述客户端的系统架构中，包括模型原始数据解析模块、本地模型仓库管理模块，组件高效渲染模块、页面组件池、消息总线、至少一个页面控制器等。

其中，上述模型原始数据解析模块，用于对服务端下发的与页面组件对应的可视化配置数据进行数据解析，获取可视化配置数据的具体内容。比如，以服务端以Json格式下发可视化配置数据为例，该模块可以解析Json格式的可视化配置数据中各个字段(key)，获取各个字段对应具体取值(value)。上述本地模型仓库管理模块，用于基于解析完成的可视化配置数据，在本地模型仓库中创建对应的可视化效果模型，并依托于创建的可视化效果模型，对服务端下发的可视化配置数据进行维护和管理；

例如，在实际应用中，上述本地模型仓库管理模块，可以以列表的形式，将创建完成的可视化效果模型对应的可视化配置数据，在本地进行维护和管理。此时对于上述目标页面中的每一个页面组件而言，都会唯一对应一个基于服务端个性化定制的可视化配置数据创建的可视化效果模型。

上述组件高效渲染模块，用于检测本地模型仓库中的可视化效果模型对应的可视化配置数据是否发生更新，并在本地模型仓库中的可视化效果模型对应的可视化配置数据发生更新时，将该发生更新的可视化配置数据绑定至上述页面组件池中对应的页面组件，并维护页面组件与可视化效果模型的绑定关系，以驱动该页面组件自主的执行可视化渲染，从而对于可视化配置数据未发生更新的可视化效果模型对应的页面组件，可以避免重复的可视化渲染，进而可以提升页面组件的可视化渲染的效率。

例如，在示出的一种实施方式中，上述本地模型仓库管理模块具体，可以以列表的形式，将创建完成的可视化效果模型对应的可视化配置数据，在本地进行维护和管理。

在这种情况下，当服务端下发了新的可视化配置数据后，上述组件高效渲染模块，可以计算该新的可视化配置数据的摘要数据，并遍历上述列表，计算本地模型仓库管理模块中维护的原始的可视化效果模型对应的可视化配置数据的摘要数据，然后将计算出的新的可视化配置数据的摘要数据，与原始的可视化效果模型对应的可视化配置数据的摘要数据逐一进行匹配，进而可以通过摘要数据是否发生变化，来确定各页面组件对应的可视化配置数据是否发生更新。

当通过这种方式确定出任一页面组件对应的可视化配置数据发生更新，则可以使用新下发的可视化配置数据，对本地模型仓库管理模块中维护的原始的可视化效果模型进行更新，并将更新后的可视化效果模型对应的可视化配置数据重新绑定至上述页面组件池中的页面组件，驱动该页面组件基于更新后的可视化配置数据重新进行可视化渲染。而对于那些可视化配置数据未发生更新的页面组件而言，则可以不再重复的执行可视化渲染。

上述页面组件池，可以包括若干由开发人员预先开发完成的页面组件，各页面组件均可以作为独立的业务单元面向用户提供服务。

其中，开发人员可以针对页面组件池中的页面组件预先设计独立的生命周期(所谓生命周期是指由若干种预先设计的组件状态构成的一个状态机)，并基于各页面组件的生命周期，对各页面组件状态管理。以及，页面组件池中的页面组件均具有基于上述组件高效渲染模块绑定的可视化配置数据，自主的执行可视化渲染的能力；即各页面组件均可以将绑定的可视化效果模型对应的可视化配置数据作为唯一数据来源，正确“绘制”自身的可视化展示效果。

并且，各页面组件之间，以及各页面组件与页面搭载的业务，均通过上述消息总线进行隔离，实现各页面组件之间，以及各页面组件与页面搭载的业务之间的解耦和。

在这种情况下，各页面组件之间，以及各页面组件与页面控制器之间均不互相感知，并且无法直接进行通信。当各页面组件预先定义的事件被触发后，可以向上述消息总线发送一个对应的事件消息即可，而不需要关注该事件消息后续的业务处理，也不需要订阅其它页面组件发送至消息总线的事件消息，从而可以实现各页面组件之间，以及各页面组件与页面搭载的业务的解耦和。

其中，在本例中，各页面组件中定义的事件，具体可以包括各页面组件被触发的事件，以及各页面组件的生命周期中的某一组件状态被触发的事件。

在一种情况下，当各页面组件被源代码中预先定义的触发方式触发后，可以向上述消息总线发送一个对应的事件消息；在另一种情况下，当各页面组件的生命周期中的某一组件状态被触发后(即页面组件达到了生命周期中的某种状态)，也可以向上述消息总线发送一个对应的事件消息。

例如，在各页面组件的生命周期中，可以包含一“组件渲染完成”的组件状态，当各页面组件基于绑定的可视化配置数据可视化渲染完成后，可以向上述消息总线上发送一个“组件渲染完成”的事件消息。而页面控制器通过监听这些事件消息确定出目标页面中的页面组件均可视化渲染完成后，可以立即开始基于这些可视化渲染完成的页面组件组装上述目标页面的操作。

上述页面控制器，用于面向对应的业务页面进行页面管理，以及基于对应的业务页面中的各页面组件组装生成该页面页面。其中，对于客户端搭载的所有业务页面，可以分别对应一个独立的页面控制器。并且，不同的业务页面的页面控制器之间可以相互隔离。

在页面控制器中，可以面向对应的业务页面中的各页面组件，分别设置一个独立的管理实例，并对不同的管理实例的上下文环境进行隔离。页面控制器可以预先订阅上述消息总线上自身关心的事件消息，通过各管理实例分别监听对应的页面组件发送至上述消息总线的事件消息，并基于监听到的事件消息对页面进行管理；

比如，在一种情况下，页面控制器可以通过各管理实例监听各页面组件发送至消息总线的“组件渲染完成”的事件消息，来确定出用户访问的目标页面中的页面组件是否均可视化渲染完成，并在确定出目标页面中的页面组件是否均可视化渲染完成后，立即触发基于这些可视化渲染完成的页面组件组装上述目标页面的操作。

在另一种情况下，当上述目标页面组装完成后，可以将组装按成的该目标页面向用户进行展示，此时用户可以针对上述目标页面中的页面组件执行预设的触发操作；其中，触发页面组件的具体操作，通常定义在与组件相关的源代码里；比如，以上触发操作可以包括诸如点击、滑动等操作。当上述目标页面中的任一页面组件检测到用户针对该页面组件的预设触发操作时，此时该页面组件的业务功能被触发，可以向上述消息总线中发送一个“业务功能被触发”的事件消息。当页面控制器通过与该页面组件对应的管理实例，监听到该事件消息后，可以基于该目标页面搭载的业务处理逻辑对该事件消息执行进一步的业务处理。

其中，需要说明的是，上述目标页面搭载的业务处理逻辑，可以具体搭载在与该目标页面中的页面控制器中，也可以与上述页面控制器相互分离(图3中示出的为页面控制器与业务处理逻辑相互分离的情形)。

例如，在实际应用中，开发人员可以采用MVC开发模式，将上述业务处理逻辑集成在页面控制器中，在这种情况下，上述页面控制器可以基于搭载的业务处理逻辑对监听到的事件消息执行进一步的业务处理即可。在另一种情况下，开发人员也可以采用MVP开发模式，将上述业务处理逻辑与上述页面控制器分离，在这种情况下，开发人员需要在上述客户端中基于上述业务处理逻辑开发独立的业务处理模块，上述页面控制器在监听到上述事件消息时，可以将该事件消息提交至该业务处理模块，由该业务处理模块执行进一步的业务处理。

在示出的一种实施方式中，当页面控制器基于搭载的业务处理逻辑，或者上述业务处理模块，完成了针对监听到的上述“业务功能被触发”的事件消息的进一步的业务处理后，如果发送该事件消息的页面组件，与上述目标页面中的其它页面组件建立了业务关联，那么上述页面控制器或者上述业务处理模块，还可以将业务处理结果进一步转发至上述其它页面组件，实现页面组件之间的间接通信。

即在本例中，上述目标页面中的各页面组件之间虽然不能直接的进行通信，但相应的业务结果可以通过消息总线以及页面控制器进行单向流转，实现业务组件之间的间接通信。

其中，上述目标页面中的页面组件之间的业务关联，具体可以通过开发人员在上述客户端的源代码中进行定义。

当然，在实际应用中，如果上述业务处理结果，并未触发上述其它页面组件的可视化配置数据的更新，那么上述页面控制器或者上述业务处理模块，可以对该业务处理结果进行忽略，而不再转发给上述其它页面组件。

在示出的另一种实施方式中，如果上述业务处理结果，最终触发了上述其它页面组件的可视化配置数据的更新，上述组件高效渲染模块在确定与上述其它页面组件对应的可视化配置数据发生更新后，可以使用更新后的可视化配置数据对原始的可视化效果模型进行更新，并将更新后的可视化配置数据重新绑定至上述其它页面组件，以驱动上述其它页面组件，基于更新后的可视化配置数据重新执行可视化渲染。

通过这种方式，可以在用户针对上述目标页面中的某一页面组件执行预设的触发操作，触发了该页面组件时，同步的更新该目标页面中与该页面组件存在业务关联的其它页面组件的可视化展示效果。

例如，请参见图4，以上述目标页面为金融类APP中的买入页面为例，其中在本例中，该买入页面具体为理财产品“XX月度理财”的申购页面。如图4所示，在该页面中的页面组件具体包括与用于描述该理财产品的基本信息的“文本框”、用于输入申购份额的“输入框”、以及用于对申购进行确认的“确认按钮”，等等。

在这种场景下，用户可以通过点击等方式来触发“输入框”，在输入框中手动输入申购份额，并向消息总线发送一条“申购份额输入完成”的事件消息。该买入页面对应的页面控制器，在通过与该“输入框”对应的管理实例监听到该事件消息后，可以针对该事件消息执行进一步的业务处理。比如，此时的业务处理逻辑具体可以是核实该用户的账户余额是否充足、该理财产品的可申购份额是否充足，等等。

假设“输入框”与“确认按钮”预先建立了业务关联，该事件消息的业务处理结果，最终会触发买入页面中的“确认按钮”的可视化配置数据的更新，使得“确认按钮”将按钮颜色由默认的灰色切换(指示确认按钮处于不可交互状态)为指定颜色(指示确认按钮已经处于可交互状态)。那么，在针对该事件消息的业务处理完成后，可以将“确认按钮”更新后的可视化配置数据，重新绑定至该“确认按钮”，以驱动该“确认按钮”自主的执行可视化渲染，将按钮颜色由默认的灰色切换为指定颜色。

通过这种方式，可以在用户触发了买入页面中的“输入框”，并“输入框”中输入了申购份额后，可以同步的更新与“输入框”存在了业务关联的“确认按钮”的可视化展示效果，将该“确认按钮”的按钮颜色由默认的灰色切换为指定颜色。

以上结合附图3对客户端的系统架构中的各个功能实体以及数据流向进行详细介绍。需要补充说明的是，以上实施例中描述的各个功能实体均为软件层面的逻辑实体，在实际应用中，本领域技术人员可以在以上实施例中公开的内容的基础上，对以上示出的各个功能实体中的部分功能实体按照需求进一步划分为多个功能实体，或者将以上示出的多个各个功能中的部分功能实体进一步合并为一个功能实体，在实施例中不再进行详述。

与上述方法实施例相对应，本说明书还提供了一种页面可视化渲染装置的实施例。

本说明书的页面可视化渲染装置的实施例可以应用在电子设备上。装置实施例可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。以软件实现为例，作为一个逻辑意义上的装置，是通过其所在电子设备的处理器将非易失性存储器中对应的计算机程序指令读取到内存中运行形成的。从硬件层面而言，如图5所示，为本说明书的页面可视化渲染装置所在电子设备的一种硬件结构图，除了图5所示的处理器、内存、网络接口、以及非易失性存储器之外，实施例中装置所在的电子设备通常根据该电子设备的实际功能，还可以包括其他硬件，对此不再赘述。

图6是本说明书一示例性实施例示出的一种页面可视化渲染装置的框图。

请参考图6，所述页面可视化渲染装置60可以应用在前述图5所示的电子设备中，包括有：获取模块601、绑定模块602、生成模块603。

其中，获取模块601，获取服务端下发的与页面组件对应的可视化配置数据；

绑定模块602，将所述可视化配置数据绑定至所述页面组件池中对应的页面组件，以触发所述页面组件基于所述可视化配置数据自主执行可视化渲染；

生成模块603，基于可视化渲染完成的页面组件组装生成用户访问的目标页面。

在本例中，所述获取模块601：

检测到用户针对所述目标页面的访问操作时，向所述服务端发送对应于所述目标页面的访问请求；其中，所述访问请求携带所述用户的用户标识；

获取服务端在接收到所述访问请求后，基于所述用户标识下发的与所述目标页面中的各页面组件对应的可视化配置数据。

在本例中，所述绑定模块602：

判断所述服务端下发的所述可视化配置数据是否发生更新；

如果所述可视化配置数据发生更新，将所述可视化配置数据绑定至所述页面组件池中对应的页面组件，以触发所述页面组件基于所述可视化配置数据自主执行可视化渲染。

在本例中，所述若干页面组件之间，以及所述若干页面组件与页面搭载的业务通过预设的消息总线相互隔离；其中，所述业务对应的业务处理逻辑搭载于所述目标页面的页面控制器；或者，所述业务对应的业务处理逻辑与所述目标页面的页面控制器相互分离；

所述装置60还包括：

页面控制器604(图4中未示出)，监听所述消息总线中的事件消息；其中，所述消息总线中的事件消息由所述目标页面中的页面组件，在检测到用户针对该页面组件的预设触发操作时，提交至所述消息总线；当监听到预设事件消息时，基于搭载的业务处理逻辑对该事件消息执行进一步的业务处理；或者，将所述事件消息提交至业务处理模块605(图4中未示出)，以由所述业务处理模块605对该事件消息执行进一步的业务处理。

在本例中，所述页面控制器604或者所述业务处理模块605进一步：

将业务处理结果转发至所述目标页面中与所述预设事件消息对应的页面组件关联的其它页面组件；或者，

如果所述业务处理结果触发了所述其它页面组件的可视化配置数据的更新，将更新后的可视化配置数据绑定至所述其它页面组件，以触发所述其它页面组件基于更新后的可视化配置数据重新执行可视化渲染。

上述装置中各个模块的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程，在此不再赘述。

对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本说明书方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机，计算机的具体形式可以是个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件收发设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任意几种设备的组合。

与上述方法实施例相对应，本说明书还提供了一种页面可视化渲染设备的实施例。该页面可视化渲染设备包括：处理器以及用于存储机器可执行指令的存储器；其中，处理器和存储器通常通过内部总线相互连接。在其他可能的实现方式中，所述设备还可能包括外部接口，以能够与其他设备或者部件进行通信。

在本实施例中，通过读取并执行所述存储器存储的与数据库损坏的恢复的控制逻辑对应的机器可执行指令，所述处理器被促使：

获取服务端下发的与页面组件对应的可视化配置数据；

将所述可视化配置数据绑定至所述页面组件池中对应的页面组件，以触发所述页面组件基于所述可视化配置数据自主执行可视化渲染；

基于可视化渲染完成的页面组件组装生成用户访问的目标页面。

在本例中，通过读取并执行所述存储器存储的与数据库损坏的恢复的控制逻辑对应的机器可执行指令，所述处理器还被促使：

检测到用户针对所述目标页面的访问操作时，向所述服务端发送对应于所述目标页面的访问请求；其中，所述访问请求携带所述用户的用户标识；

获取服务端在接收到所述访问请求后，基于所述用户标识下发的与所述目标页面中的各页面组件对应的可视化配置数据。

在本例中，通过读取并执行所述存储器存储的与数据库损坏的恢复的控制逻辑对应的机器可执行指令，所述处理器还被促使：

判断所述服务端下发的所述可视化配置数据是否发生更新；

如果所述可视化配置数据发生更新，将所述可视化配置数据绑定至所述页面组件池中对应的页面组件，以触发所述页面组件基于所述可视化配置数据自主执行可视化渲染。

在本例中，所述若干页面组件之间，以及所述若干页面组件与页面搭载的业务通过预设的消息总线相互隔离；其中，所述业务对应的业务处理逻辑搭载于所述目标页面的页面控制器；或者，所述业务对应的业务处理逻辑与所述目标页面的页面控制器相互分离；

在本例中，通过读取并执行所述存储器存储的与数据库损坏的恢复的控制逻辑对应的机器可执行指令，所述处理器还被促使：

与所述目标页面对应的页面控制器监听所述消息总线中的事件消息；其中，所述消息总线中的事件消息由所述目标页面中的页面组件，在检测到用户针对该页面组件的预设触发操作时，提交至所述消息总线；

当监听到预设事件消息时，所述页面控制器基于搭载的业务处理逻辑对该事件消息执行进一步的业务处理；或者，所述页面控制器进一步提交所述事件消息，以由与所述页面控制器相互分离的业务处理逻辑对该事件消息执行进一步的业务处理。

在本例中，通过读取并执行所述存储器存储的与数据库损坏的恢复的控制逻辑对应的机器可执行指令，所述处理器还被促使：

将业务处理结果转发至所述目标页面中与所述预设事件消息对应的页面组件关联的其它页面组件；或者，

如果所述业务处理结果触发了所述其它页面组件的可视化配置数据的更新，将更新后的可视化配置数据绑定至所述其它页面组件，以触发所述其它页面组件基于更新后的可视化配置数据重新执行可视化渲染。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本说明书的其它实施方案。本说明书旨在涵盖本说明书的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本说明书的一般性原理并包括本说明书未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本说明书的真正范围和精神由下面的权利要求指出。

应当理解的是，本说明书并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本说明书的范围仅由所附的权利要求来限制。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

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

Claims (11)

1.一种页面可视化渲染方法，应用于客户端，所述客户端搭载了包含若干页面组件的页面组件池，其中所述若干页面组件之间相互隔离；并且，所述若干页面组件与页面搭载的业务相互隔离；所述方法包括：

获取服务端下发的与页面组件对应的可视化配置数据；

将所述可视化配置数据绑定至所述页面组件池中对应的页面组件，以触发所述页面组件基于所述可视化配置数据自主执行可视化渲染；

基于可视化渲染完成的页面组件组装生成用户访问的目标页面；

监听针对所述目标页面中的页面组件执行的触发操作，基于该目标页面搭载的业务处理逻辑对监听到的触发操作执行业务处理；

如果所述业务处理结果触发了其它页面组件的可视化配置数据的更新，将更新后的可视化配置数据绑定至所述其它页面组件，以触发所述其它页面组件基于更新后的可视化配置数据重新执行可视化渲染。

2.根据权利要求1所述的方法，所述获取服务端下发的与页面组件对应的可视化配置数据，包括：

检测到用户针对所述目标页面的访问操作时，向所述服务端发送对应于所述目标页面的访问请求；其中，所述访问请求携带所述用户的用户标识；

获取服务端在接收到所述访问请求后，基于所述用户标识下发的与所述目标页面中的各页面组件对应的可视化配置数据。

3.根据权利要求1所述的方法，将所述可视化配置数据绑定至所述页面组件池中对应的页面组件，以触发所述页面组件基于所述可视化配置数据自主执行可视化渲染，包括：

判断所述服务端下发的所述可视化配置数据是否发生更新；

如果所述可视化配置数据发生更新，将所述可视化配置数据绑定至所述页面组件池中对应的页面组件，以触发所述页面组件基于所述可视化配置数据自主执行可视化渲染。

4.根据权利要求1所述的方法，所述若干页面组件之间，以及所述若干页面组件与页面搭载的业务通过预设的消息总线相互隔离；其中，所述业务对应的业务处理逻辑搭载于所述目标页面的页面控制器；或者，所述业务对应的业务处理逻辑与所述目标页面的页面控制器相互分离；

所述监听针对所述目标页面中的页面组件执行的触发操作，基于该目标页面搭载的业务处理逻辑对监听到的触发操作执行业务处理，包括：

与所述目标页面对应的页面控制器监听所述消息总线中的事件消息；其中，所述消息总线中的事件消息由所述目标页面中的页面组件，在检测到用户针对该页面组件的预设触发操作时，提交至所述消息总线；

当监听到预设事件消息时，所述页面控制器基于搭载的业务处理逻辑对该事件消息执行进一步的业务处理；或者，所述页面控制器进一步提交所述事件消息，以由与所述页面控制器相互分离的业务处理逻辑对该事件消息执行进一步的业务处理。

5.根据权利要求4所述的方法，还包括：将业务处理结果转发至所述目标页面中与所述预设事件消息对应的页面组件关联的其它页面组件。

6.一种页面可视化渲染装置，应用于客户端，所述客户端搭载了包含若干页面组件的页面组件池，其中所述若干页面组件之间相互隔离；并且，所述若干页面组件与页面搭载的业务逻辑相互隔离；所述装置包括：

获取模块，获取服务端下发的与页面组件对应的可视化配置数据；

绑定模块，将所述可视化配置数据绑定至所述页面组件池中对应的页面组件，以触发所述页面组件基于所述可视化配置数据自主执行可视化渲染；

生成模块，基于可视化渲染完成的页面组件组装生成用户访问的目标页面；

页面控制器，监听针对所述目标页面中的页面组件执行的触发操作，基于该目标页面搭载的业务处理逻辑对监听到的触发操作执行业务处理；

如果所述业务处理结果触发了其它页面组件的可视化配置数据的更新，将更新后的可视化配置数据绑定至所述其它页面组件，以触发所述其它页面组件基于更新后的可视化配置数据重新执行可视化渲染。

7.根据权利要求6所述的装置，所述获取模块：

检测到用户针对所述目标页面的访问操作时，向所述服务端发送对应于所述目标页面的访问请求；其中，所述访问请求携带所述用户的用户标识；

获取服务端在接收到所述访问请求后，基于所述用户标识下发的与所述目标页面中的各页面组件对应的可视化配置数据。

8.根据权利要求6所述的装置，所述绑定模块：

判断所述服务端下发的所述可视化配置数据是否发生更新；

如果所述可视化配置数据发生更新，将所述可视化配置数据绑定至所述页面组件池中对应的页面组件，以触发所述页面组件基于所述可视化配置数据自主执行可视化渲染。

9.根据权利要求6所述的装置，所述若干页面组件之间，以及所述若干页面组件与页面搭载的业务通过预设的消息总线相互隔离；其中，所述业务对应的业务处理逻辑搭载于所述目标页面的页面控制器；或者，所述业务对应的业务处理逻辑与所述目标页面的页面控制器相互分离；

所述页面控制器，还包括：

监听所述消息总线中的事件消息；其中，所述消息总线中的事件消息由所述目标页面中的页面组件，在检测到用户针对该页面组件的预设触发操作时，提交至所述消息总线；当监听到预设事件消息时，基于搭载的业务处理逻辑对该事件消息执行进一步的业务处理；或者，将所述事件消息提交至业务处理模块，以由所述业务处理模块对该事件消息执行进一步的业务处理。

10.根据权利要求9所述的装置，所述页面控制器或者所述业务处理模块进一步：

将业务处理结果转发至所述目标页面中与所述预设事件消息对应的页面组件关联的其它页面组件。

11.一种页面可视化渲染装置，应用于客户端，所述客户端搭载了包含若干页面组件的页面组件池，其中所述若干页面组件之间相互隔离；并且，所述若干页面组件与页面搭载的业务逻辑相互隔离；所述装置包括：

处理器；

用于存储机器可执行指令的存储器；

其中，通过读取并执行所述存储器存储的与页面可视化渲染的控制逻辑对应的机器可执行指令，所述处理器被促使：

获取服务端下发的与页面组件对应的可视化配置数据；

将所述可视化配置数据绑定至所述页面组件池中对应的页面组件，以触发所述页面组件基于所述可视化配置数据自主执行可视化渲染；

基于可视化渲染完成的页面组件组装生成用户访问的目标页面；

监听针对所述目标页面中的页面组件执行的触发操作，基于该目标页面搭载的业务处理逻辑对监听到的触发操作执行业务处理；

如果所述业务处理结果触发了其它页面组件的可视化配置数据的更新，将更新后的可视化配置数据绑定至所述其它页面组件，以触发所述其它页面组件基于更新后的可视化配置数据重新执行可视化渲染。

Images