CN109558186B - 一种页面显示方法和装置 - Google Patents
一种页面显示方法和装置 Download PDFInfo
- Publication number
- CN109558186B CN109558186B CN201710891878.2A CN201710891878A CN109558186B CN 109558186 B CN109558186 B CN 109558186B CN 201710891878 A CN201710891878 A CN 201710891878A CN 109558186 B CN109558186 B CN 109558186B
- Authority
- CN
- China
- Prior art keywords
- rendering
- template
- information
- module
- configuration
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请提供一种页面显示方法和装置,该方法包括:接收来自业务模块的渲染请求,所述渲染请求携带业务数据和渲染库类型;确定与所述渲染库类型对应的渲染库、与所述渲染请求对应的模板文件;将所述业务数据和所述模板文件发送给所述渲染库,以使所述渲染库根据所述业务数据和所述模板文件渲染出与所述渲染请求对应的视图;接收来自所述渲染库的视图,将所述视图发送给所述业务模块进行显示。通过本申请的技术方案,业务模块不需要关心渲染库的接入、升级,不需要将渲染库的信息配置到业务模块的代码中,若业务模块对应的渲染库发生变化,也不需要对业务模块的代码进行修改,避免工作量较大,需要重新编写大量代码等问题,大大减少人工成本。
Description
技术领域
本申请涉及互联网技术领域,尤其涉及一种页面显示方法和装置。
背景技术
随着技术的进步,移动互联网技术也高速发展,越来越多的用户在移动终端安装大量应用(APP),每个APP可以配置多个业务模块。例如,某购物类的APP,可以有下单模块、购物车模块、搜索模块、订单模块等业务模块,当用户点击该APP的购物车菜单时,购物车模块就可以从服务器获取到业务数据,并利用这些业务数据显示购物车页面;当用户点击该APP的搜索菜单时,搜索模块就可以从服务器获取到业务数据,并利用这些业务数据显示搜索页面。
为了实现页面的显示,可以为APP配置渲染库,业务模块在得到业务数据后,将业务数据提供给渲染库,由渲染库利用该业务数据渲染出页面,并显示该页面。由于渲染库的类型越来越多,如ReactNative、Weex、鸟巢等,为了给用户更好的体验,可以为APP配置多个渲染库,不同业务模块可以对应相同或不同的渲染库,如购物车模块对应ReactNative、搜索模块对应Weex。基于此,购物车模块在获取到业务数据后,将业务数据提供给ReactNative,ReactNative利用该业务数据渲染出页面,并显示该页面;搜索模块在获取到业务数据后,将业务数据提供给Weex,Weex利用该业务数据渲染出页面,并显示该页面。
在上述方式下,需要将渲染库的信息配置到业务模块的代码中,这样,业务模块可以知道自身与哪个渲染库关联,继而将业务数据提供给该渲染库。但是,若业务模块对应的渲染库变化,如购物车模块对应的渲染库从ReactNative变更为Weex,则需要对业务模块的代码进行修改,工作量较大,需要重新编写大量代码。当多个业务模块对应的渲染库均发生变化时,则工作量会成倍增加。
发明内容
本申请提供一种页面显示方法,所述方法应用于客户端的动态组件渲染模块,所述客户端还包括业务模块和渲染库,所述方法包括:
接收来自业务模块的渲染请求,所述渲染请求携带业务数据和渲染库类型;
确定与所述渲染库类型对应的渲染库、与所述渲染请求对应的模板文件;
将所述业务数据和所述模板文件发送给所述渲染库,以使所述渲染库根据所述业务数据和所述模板文件渲染出与所述渲染请求对应的视图;
接收来自所述渲染库的视图,将所述视图发送给所述业务模块进行显示。
本申请提供一种页面显示方法,应用于客户端,所述方法包括:
在接收到访问请求时,从服务器获取与所述访问请求对应的业务数据;
确定与所述访问请求对应的渲染库类型,并确定与所述渲染库类型对应的渲染库,并确定与所述访问请求对应的模板文件;
基于所述渲染库,根据所述业务数据以及所述模板文件渲染出与所述访问请求对应的视图,并显示与所述视图匹配的页面。
本申请提供一种页面显示装置,应用于客户端,所述页面显示装置包括动态组件渲染模块、业务模块和渲染库,其中:
所述业务模块,用于获取业务数据和渲染库类型,并向所述动态组件渲染模块发送渲染请求,所述渲染请求携带所述业务数据和所述渲染库类型;
所述动态组件渲染模块,用于在接收到渲染请求后,从所述渲染请求中解析出业务数据和渲染库类型,确定与所述渲染库类型对应的渲染库、与所述渲染请求对应的模板文件,并将所述业务数据和所述模板文件发送给所述渲染库;
所述渲染库,用于根据所述业务数据和所述模板文件渲染出与所述渲染请求对应的视图,并将所述视图发送给所述动态组件渲染模块;
所述动态组件渲染模块,还用于将接收的所述视图发送给所述业务模块;
所述业务模块,还用于接收所述视图,并显示与所述视图匹配的页面。
本申请提供一种页面显示装置,应用于客户端,所述装置包括:
获取模块,用于在接收到访问请求时,从服务器获取与所述访问请求对应的业务数据;
确定模块,用于确定与所述访问请求对应的渲染库类型,并确定与所述渲染库类型对应的渲染库,并确定与所述访问请求对应的模板文件;
显示模块,用于基于所述渲染库,根据所述业务数据以及所述模板文件渲染出与所述访问请求对应的视图,并显示与所述视图匹配的页面。
基于上述技术方案,本申请实施例中,可以在客户端内配置动态组件渲染模块,动态组件渲染模块是在多个渲染库之上的通用适配层,向业务模块暴露了通用接口,业务模块只对接动态组件渲染模块,由动态组件渲染模块确定与业务模块对应的渲染库,继而由渲染库完成渲染视图的操作。因此,调用渲染库的工作由动态组件渲染模块实现,多个渲染库的差异对业务模块透明,业务模块不需要关心渲染库的接入、升级,不需要将渲染库的信息配置到业务模块的代码中,若业务模块对应的渲染库发生变化,也不需要对业务模块的代码进行修改,避免工作量较大,需要重新编写大量代码等问题,大大减少人工成本。
附图说明
为了更加清楚地说明本申请实施例或者现有技术中的技术方案,下面将对本申请实施例或者现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请中记载的一些实施例,对于本领域普通技术人员来讲,还可以根据本申请实施例的这些附图获得其它的附图。
图1是本申请一种实施方式中的应用场景示意图;
图2是本申请一种实施方式中的页面显示方法的流程图;
图3是本申请另一种实施方式中的页面显示方法的流程图;
图4是本申请一种实施方式中的页面显示装置的结构图;
图5是本申请另一种实施方式中的页面显示装置的结构图。
具体实施方式
在本申请使用的术语仅仅是出于描述特定实施例的目的,而非限制本申请。本申请和权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式,除非上下文清楚地表示其它含义。还应当理解,本文中使用的术语“和/或”是指包含一个或多个相关联的列出项目的任何或所有可能组合。
应当理解,尽管在本申请可能采用术语第一、第二、第三等来描述各种信息,但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如,在不脱离本申请范围的情况下,第一信息也可以被称为第二信息,类似地,第二信息也可以被称为第一信息。取决于语境,此外,所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。
本申请实施例提出一种页面显示方法,该方法可以应用于包括客户端、服务器、配置中心、模板中心的系统,该客户端可以包括业务模块(一个或者多个)、动态组件渲染模块以及渲染库(一个或者多个),参见图1所示,为该页面显示方法的应用场景示意图。其中,客户端可以是终端设备(如PC(Personal Computer,个人计算机)、笔记本电脑、移动终端等)上的APP,也可以是终端设备上的浏览器,对此客户端的类型不做限制。此外,服务器是向客户端提供业务数据的设备,配置中心是向客户端提供配置信息的设备,模板中心是向客户端提供模板文件的设备,对此业务数据、配置信息、模板文件,将在后续过程进行说明,而且,对于上述服务器、配置中心、模板中心的类型不做限制。
在一个例子中,业务模块是用于实现某个功能的模块,如某购物类的客户端,业务模块可以包括但不限于下单模块(用于实现下单功能)、购物车模块(用于实现购物车功能)、搜索模块(用于实现搜索功能)、订单模块(用于实现订单功能)等。而且,不同类型的客户端,业务模块的类型也不同,对此不做限制,如图1中,业务模块1为购物车模块,业务模块2为搜索模块。
在一个例子中,渲染库是具有渲染能力的框架,能够将脚本语言转换为视图。为了给用户更好的体验,可以为客户端配置多个渲染库,例如,渲染库可以包括以下之一或者任意组合:React Native渲染库、Weex渲染库、鸟巢渲染库等。而且,不同业务模块可以对应相同或者不同的渲染库,例如,购物车模块对应ReactNative渲染库、搜索模块对应Weex渲染库等。在图1中,渲染库1为React Native渲染库,渲染库2为Weex渲染库,渲染库3为鸟巢渲染库。
在一个例子中,动态组件渲染模块(Drender,Dynamic Component Rendering)是在多个渲染库之上的通用适配层,向业务模块暴露了通用接口,依赖渲染库向业务模块提供动态的渲染能力,并屏蔽业务模块与渲染库的直接交互。
在一个例子中,业务模块可以从服务器获取到业务数据,对此业务数据不做限制,如简介、价格、图片、名称等。例如,当用户点击商品A的购物车菜单时,业务模块1(购物车模块)从服务器获取到商品A的简介、价格、图片、名称等业务数据。又例如,当用户点击商品B的搜索菜单时,业务模块2(搜索模块)从服务器获取到商品B的简介、价格、图片、名称等业务数据。
在一个例子中,动态组件渲染模块可以从配置中心获取到配置信息,对此配置信息不做限制,如配置信息可以包括但不限于渲染库类型,模板信息等内容。例如,假设业务模块1对应React Native渲染库(即渲染库类型),且需要使用模板信息1渲染业务模块1对应的视图,则可以在配置中心记录业务模块1的标识信息(如购物车类业务或购物车类业务对应的字符串1212)、React Native渲染库、模板信息1的对应关系,因此,动态组件渲染模块可以基于业务模块1的标识信息,从配置中心获取到React Native渲染库、模板信息1等配置信息。
又例如,假设业务模块2对应Weex渲染库(即渲染库类型),且需要使用模板信息2渲染业务模块2对应的视图,则可以在配置中心记录业务模块2的标识信息(如搜索类业务或者搜索类业务对应的字符串1215)、Weex渲染库、模板信息2的对应关系,因此,动态组件渲染模块可以基于业务模块2的标识信息,从配置中心获取到Weex渲染库、模板信息2等配置信息,以此类推。
若业务模块对应的渲染库类型发生变化,则只需要在配置中心修改业务模块的标识信息对应的渲染库类型即可,而不用对业务模块的代码进行修改。若业务模块对应的模板信息发生变化,则只需要在配置中心修改业务模块的标识信息对应的模板信息即可,而不用对业务模块的代码进行修改。例如,当业务模块1对应的渲染库类型从React Native渲染库变更为Weex渲染库时,则将业务模块1的标识信息、React Native渲染库、模板信息1的对应关系,修改为业务模块1的标识信息、Weex渲染库、模板信息1的对应关系,这样,动态组件渲染模块基于业务模块1的标识信息,从配置中心获取到变化后的Weex渲染库。
在一个例子中,动态组件渲染模块可以从模板中心获取到模板文件,该模板文件是用于渲染视图的脚本文件,且渲染库可以使用该模板文件渲染出视图,对此模板文件的内容不做限制,只要能够渲染视图即可。每个模板文件对应一个模板信息,如模板文件A对应模板信息1、模板文件B对应模板信息2等。
其中,模板文件的内容可以与渲染库类型有关,例如,针对React Native渲染库配置模板文件A,针对Weex渲染库配置模板文件B,以此类推。然后,还可以为模板文件A配置模板信息1,为模板文件B配置模板信息2,以此类推。经过上述处理,就可以在模板中心配置模板信息与模板文件的对应关系,如模板信息1与模板文件A的对应关系、模板信息2与模板文件B的对应关系。
进一步的,对于配置中心的配置信息包括的模板信息,可以与模板信息与模板文件的对应关系有关,例如,当业务模块1对应React Native渲染库时,由于React Native渲染库使用模板文件A渲染出视图,且模板文件A对应模板信息1,因此在配置中心记录业务模块1的标识信息、React Native渲染库、模板信息1的对应关系。基于此,动态组件渲染模块可以基于业务模块1的标识信息,从配置中心获取到React Native渲染库、模板信息1,并基于模板信息1从模板中心获取到模板文件A,即得到React Native渲染库和模板文件A。又例如,当业务模块2对应Weex渲染库时,由于Weex渲染库使用模板文件B渲染出视图,且模板文件B对应模板信息2,因此在配置中心记录业务模块2的标识信息、Weex渲染库、模板信息2的对应关系。基于此,动态组件渲染模块可以基于业务模块2的标识信息,从配置中心获取到Weex渲染库、模板信息2,并基于模板信息2从模板中心获取到模板文件B,即得到Weex渲染库和模板文件B。
在实际应用中,一个页面可以包括一个或者多个页面组件(如表格、树、联动下拉框等),以包括页面组件A和页面组件B为例进行说明。因此,渲染库在渲染视图时,可以生成针对所有页面组件的全局视图,如生成针对页面组件A和页面组件B的全局视图,也可以生成针对每个页面组件的局部视图,如生成针对页面组件A的局部视图1,并生成针对页面组件B的局部视图。
基于此,模板文件的内容不仅与渲染库类型有关,还可以与页面组件有关,当然,模板文件的内容还可以与其它参数有关,对此模板文件的内容不做限制。
在一个例子中,若需要生成针对所有页面组件的全局视图,则模板信息可以包括针对所有页面组件的全局模板信息,且该模板信息对应的模板文件用于生成针对所有页面组件的全局视图。在另一个例子中,若需要生成针对一个页面组件的局部视图,则模板信息可以包括针对一个页面组件的局部模板信息,且该模板信息对应的模板文件用于生成针对一个页面组件的局部视图。
其中,全局模板信息和局部模板信息只是为了区分方便给出的示例,其本质仍是模板信息,只是将用于生成全局视图的模板文件对应的模板信息称为全局模板信息,将用于生成局部视图的模板文件对应的模板信息称为局部模板信息。全局视图是指针对整个页面的视图,如全局视图包括针对页面组件A的视图和针对页面组件B的视图。局部视图是指针对某个页面组件的视图,且所有页面组件的视图组成全局视图,如局部视图可以为针对页面组件A的局部视图1、针对页面组件B的局部视图2等,且局部视图1和局部视图2组成全局视图。
若生成针对所有页面组件的全局视图,参见上述实施例的介绍,在模板中心,可以针对React Native渲染库配置模板文件A,针对Weex渲染库配置模板文件B,为模板文件A配置模板信息1,为模板文件B配置模板信息2。在配置中心,记录业务模块1的标识信息、ReactNative渲染库、模板信息1的对应关系,并记录业务模块2的标识信息、Weex渲染库、模板信息2的对应关系。
若生成针对一个页面组件的局部视图,由于模板文件的内容与渲染库类型和页面组件有关,因此针对React Native渲染库+页面组件A配置模板文件A,针对React Native渲染库+页面组件B配置模板文件B,针对Weex渲染库+页面组件A配置模板文件C,针对Weex渲染库+页面组件B配置模板文件D。然后,可以为模板文件A配置模板信息1,为模板文件B配置模板信息2,为模板文件C配置模板信息3,为模板文件D配置模板信息4。然后,可以在模板中心配置模板信息1与模板文件A的对应关系、模板信息2与模板文件B的对应关系、模板信息3与模板文件C的对应关系、模板信息4与模板文件D的对应关系。
进一步的,在配置中心,由于React Native渲染库+页面组件A对应模板文件A,且模板文件A对应模板信息1,因此,当业务模块1对应React Native渲染库时,在配置中心记录业务模块1的标识信息、页面组件A、React Native渲染库、模板信息1的对应关系。类似的,在配置中心记录业务模块1的标识信息、页面组件B、React Native渲染库、模板信息2的对应关系;业务模块2的标识信息、页面组件A、Weex渲染库、模板信息3的对应关系;业务模块2的标识信息、页面组件B、Weex渲染库、模板信息4的对应关系;以此类推。
基于此,动态组件渲染模块可以基于业务模块1的标识信息、页面组件A,从配置中心获取到React Native渲染库、模板信息1,并基于模板信息1从模板中心获取到模板文件A,即得到React Native渲染库和模板文件A;以此类推。
基于上述应用场景,参见图2所示,为本申请实施例中的页面显示方法的流程示意图,该方法可以应用于客户端的动态组件渲染模块,该方法可以包括:
步骤201,接收来自业务模块的渲染请求,该渲染请求可以携带业务数据(如简介、价格、图片、名称等)和渲染库类型(如React Native渲染库等)。
当用户点击商品A的购物车菜单时,客户端的业务模块1(即购物车模块)就可以接收到针对商品A的访问请求,并从服务器获取与该访问请求对应的业务数据,如从服务器获取到商品A的简介、价格、图片、名称等业务数据。又例如,当用户点击商品B的搜索菜单时,客户端的业务模块2(即搜索模块)就可以接收到针对商品B的访问请求,并从服务器获取与该访问请求对应的业务数据,如从服务器获取到商品B的简介、价格、图片、名称等业务数据。
在一个例子中,业务模块在接收到访问请求后,还可以向动态组件渲染模块发送配置请求,该配置请求可以携带该业务模块的标识信息。动态组件渲染模块在接收到该配置请求后,从配置请求中解析出业务模块的标识信息,并获取与该标识信息对应的配置信息,且配置信息可以包括渲染库类型。然后,动态组件渲染模块向业务模块发送携带该渲染库类型的响应消息,以使业务模块从该响应消息中解析出渲染库类型。至此,业务模块可以获取到业务数据和渲染库类型,并向动态组件渲染模块发送携带业务数据和渲染库类型的渲染请求。
在上面的过程中已经介绍到,配置中心用于记录业务模块的标识信息与配置信息的对应关系,且动态组件渲染模块可以从配置中心获取到配置信息。
在实际应用中,通常会部署多个配置中心,而为了从配置中心获取配置信息,动态组件渲染模块先查询记录有该配置信息的配置中心。基于此,动态组件渲染模块预先记录第一映射表(为区分方便,称为第一映射表),第一映射表用于记录标识信息与配置中心的对应关系。若配置中心1的第二映射表(为区分方便,称为第二映射表)记录业务模块1的标识信息与配置信息的对应关系,则第一映射表记录业务模块1的标识信息与配置中心1的对应关系;又例如,若配置中心2的第二映射表记录业务模块1的标识信息与配置信息的对应关系,则第一映射表记录业务模块1的标识信息与配置中心2的对应关系。
基于此第一映射表,动态组件渲染模块在从配置请求中解析出业务模块的标识信息后,先通过该标识信息查询第一映射表,得到与标识信息对应的配置中心;然后,动态组件渲染模块从该配置中心获取与该标识信息对应的配置信息。例如,动态组件渲染模块向该配置中心发送携带该标识信息的请求消息,而配置中心在接收到该请求消息后,从第二映射表中查询到与该标识信息对应的配置信息,然后向动态组件渲染模块返回携带该配置信息的响应消息,而动态组件渲染模块在接收到该响应消息后,从该响应消息中解析出该配置信息。
例如,动态组件渲染模块在接收到携带业务模块1的标识信息的配置请求后,从配置中心得到的配置信息为React Native渲染库(即渲染库类型)、模板信息1。动态组件渲染模块在接收到携带业务模块2的标识信息的配置请求后,从配置中心得到的配置信息为Weex渲染库(即渲染库类型)、模板信息2。
步骤202,确定与渲染库类型对应的渲染库、与渲染请求对应的模板文件。
由于每个渲染库类型对应了唯一的渲染库,因此,动态组件渲染模块在从渲染请求中解析出渲染库类型后,可以确定与该渲染库类型对应的渲染库,例如,渲染库类型(React Native渲染库)对应的渲染库,就是图1中的渲染库1。
在上面的过程中已经介绍到,模板中心用于记录模板信息与模板文件的对应关系,且动态组件渲染模块可以从模板中心获取到模板文件。
在实际应用中,通常可以部署多个模板中心,而为了从模板中心获取到模板文件,则动态组件渲染模块可以先查询记录有该模板文件的模板中心。基于此,动态组件渲染模块还可以预先记录第三映射表(为了区分方便,称为第三映射表),该第三映射表用于记录模板信息与模板中心的对应关系;例如,若模板中心1的第四映射表(为了区分方便,称为第四映射表)记录模板信息1与模板文件A的对应关系,则第一映射表可以记录模板信息1与模板中心1的对应关系;又例如,若模板中心2的第四映射表记录模板信息1与模板文件A的对应关系,则第一映射表可以记录模板信息1与模板中心2的对应关系。
基于此第三映射表,动态组件渲染模块在得到模板信息(具体方式参见下述方式一和方式二)后,通过该模板信息查询第三映射表,得到与该模板信息对应的模板中心;然后,从该模板中心获取与该模板信息对应的模板文件。例如,动态组件渲染模块向该模板中心发送携带该模板信息的请求消息,而模板中心在接收到该请求消息后,从第四映射表中查询到与该模板信息对应的模板文件,然后向动态组件渲染模块返回携带该模板文件的响应消息,而动态组件渲染模块在接收到该响应消息后,从该响应消息中解析出该模板文件。
例如,动态组件渲染模块得到模板信息1后,从模板中心得到的模板文件为模板文件A;在得到模板信息2后,从模板中心得到的模板文件为模板文件B。
针对确定与渲染请求对应的模板文件的过程,可以包括但不限于如下方式:
方式一、动态组件渲染模块在获取到与标识信息对应的配置信息后,该配置信息可以包括渲染库类型和模板信息,且动态组件渲染模块向业务模块发送的响应消息(针对配置请求的响应消息),可以携带该渲染库类型以及该模板信息。基于此,业务模块向动态组件渲染模块发送的渲染请求,可以携带业务数据、渲染库类型和该模板信息。基于此,动态组件渲染模块在接收到来自业务模块的渲染请求后,可以从该渲染请求中解析出模板信息,并获取与该模板信息对应的模板文件,具体获取过程已经在上面介绍,在此不再重复赘述。
方式二、动态组件渲染模块在获取到与标识信息对应的配置信息后,该配置信息可以包括渲染库类型和模板信息,且动态组件渲染模块向业务模块发送的响应消息(针对配置请求的响应消息),可以只携带该渲染库类型,而不携带该模板信息。而且,业务模块向动态组件渲染模块发送的渲染请求,可以携带业务数据、渲染库类型和业务模块的标识信息。此外,动态组件渲染模块在获取到与标识信息对应的配置信息后,可以获取与该模板信息对应的模板文件,具体获取过程已经在上面介绍,在此不再重复赘述,并在本地记录该标识信息与该模板文件的对应关系。基于此,动态组件渲染模块在接收到来自业务模块的渲染请求后,可以从该渲染请求中解析出业务模块的标识信息,并从本地查询到与该标识信息对应的模板文件,至此确定出与渲染请求对应的模板文件。
其中,上述方式一和方式二的区别可以在于:在方式一中,动态组件渲染模块是在接收到渲染请求后,才去模板中心获取模板文件,而在方式二中,动态组件渲染模块是在接收到渲染请求之前,就去模板中心获取模板文件。
在一个例子中,上述配置信息还可以包括预加载信息(如不执行预加载或者执行预加载),若预加载信息为不执行预加载,则表示动态组件渲染模块不需要在接收到渲染请求之前,就去模板中心获取模板文件,因此采用方式一进行处理。若预加载信息为执行预加载,则表示动态组件渲染模块需要在接收到渲染请求之前,就去模板中心获取模板文件,因此采用方式二进行处理。此外,若配置信息不包括预加载信息,则可以默认采用方式一或者方式二进行处理。
步骤203,将业务数据和模板文件发送给渲染库,以使该渲染库根据该业务数据和该模板文件渲染出与该渲染请求对应的视图(如Native视图等)。
对于最终显示给用户的视图,涉及到如下内容:元素的位置、颜色、字体、字号等内容,而这些内容称为渲染数据。在一个例子中,模板文件会包括这些渲染数据,因此,渲染库可以利用模板文件包括的渲染数据渲染出视图。在另一个例子中,业务模块还可以获取到渲染数据(如业务模块接收用户输入的渲染数据、或者业务模块获取默认的渲染数据等,对此方式不做限制),且在业务模块向动态组件渲染模块发送的渲染请求可以携带该渲染数据,基于此,动态组件渲染模块可以从渲染请求中解析出该渲染数据,并将该渲染数据发送给渲染库,以使渲染库利用动态组件渲染模块提供的渲染数据渲染出视图。
例如,模板文件包括的渲染数据或者动态组件渲染模块提供的渲染数据可以包括但不限于以下内容:商品名称(一种元素类型)的中心点位置是坐标(x1,y1)、商品名称的颜色是红色、商品名称的字体是宋体、商品名称的字号是3号等;商品价格(另一种元素类型)的中心点位置是坐标(x2,y2)、商品价格的颜色是蓝色、商品价格的字体是黑体、商品价格的字号是4号等。
基于上述渲染数据,渲染库在根据业务数据和模板文件渲染视图的过程中,假设业务数据为商品A的名称“连衣裙”、商品A的价格“120元”,则在渲染出的视图中,坐标(x1,y1)为“连衣裙”、“连衣裙”的颜色是红色、“连衣裙”的字体是宋体、“连衣裙”的字号是3号;坐标(x2,y2)为“120元”、“120元”的颜色是蓝色、“120元”的字体是黑体、“120元”的字号是4号。
当然,上述只是给出了渲染库根据业务数据和模板文件渲染视图的一个示例,而渲染库还可以采用其它方式渲染视图,对此渲染过程不做限制。
步骤204,接收来自渲染库的视图,并将该视图发送给业务模块进行显示。例如,将该视图发送给业务模块,由该业务模块显示与该视图匹配的页面。
其中,上述页面与视图的区别在于:当一个页面包括多个页面组件时,每个页面组件对应一个视图(也就是上面所说的局部视图),每个页面组件的视图只是完整页面的部分;所有页面组件对应的视图,就可以组成完整的页面(也就是上面所说的全局视图)。基于此,业务模块只有在得到所有页面组件的视图之后,才会将所有页面组件的视图组成一个完整的页面,并显示该页面。
至此成功显示页面。而且,由于渲染库可以针对每个页面组件单独生成视图,而不是生成所有页面组件的完整页面,从而实现每个页面组件的局部渲染。
在一个例子中,当用户对客户端显示的页面进行操作时,操作系统(如安卓操作系统、苹果操作系统)可以检测到用户操作信息,为了使操作系统将用户操作信息发送给动态组件渲染模块,而不是发送给业务模块,则还可以包括:
在动态组件渲染模块将视图发送给业务模块进行显示的过程中,动态组件渲染模块还可以为该视图封装动态组件渲染模块的信息(如标识信息),并将封装后的视图发送给业务模块。这样,在业务模块向用户显示的页面中,会包括动态组件渲染模块的信息,当用户对客户端显示的页面进行操作时,操作系统可以感知到当前被操作的页面包括有动态组件渲染模块的信息,因此,操作系统可以将用户操作信息发送给动态组件渲染模块,而不是发送给业务模块。
进一步的,动态组件渲染模块可以接收到操作系统发送的用户操作信息,并将该用户操作信息封装成指定格式的消息,并将指定格式的消息发送给业务模块,以使业务模块根据该用户操作信息进行处理,如完成跳转、弹框等处理。
其中,该用户操作信息可以包括但不限于:用户对页面进行操作时产生的操作事件(如点击事件、滑动事件、长按事件等)和操作数据(如商品A的名称、商品A的价格等,表示用户操作的是商品A的名称、商品A的价格)等。
其中,触发操作系统将用户操作信息发送给动态组件渲染模块,而不是发送给业务模块的原因是:动态组件渲染模块在得到用户操作信息后,可以将用户操作信息封装成指定格式的消息,并将指定格式的消息发送给业务模块。这样,业务模块只需要支持指定格式的消息即可(可以预先约定好),而不用支持多种格式的消息,即避免业务模块支持多种格式的消息。例如,指定格式的消息可以包括:操作事件和操作数据,而不再包括其它内容,这样,动态组件渲染模块只在指定格式的消息中添加操作事件和操作数据,且业务模块只从指定格式的消息中解析出操作事件和操作数据,因此,可以提高处理效率。
基于上述技术方案,本申请实施例中,可以在客户端内配置动态组件渲染模块,动态组件渲染模块是在多个渲染库之上的通用适配层,向业务模块暴露了通用接口,业务模块只对接动态组件渲染模块,由动态组件渲染模块确定与业务模块对应的渲染库,继而由渲染库完成渲染视图的操作。因此,调用渲染库的工作由动态组件渲染模块实现,多个渲染库的差异对业务模块透明,业务模块不需要关心渲染库的接入、升级,不需要将渲染库的信息配置到业务模块的代码中,若业务模块对应的渲染库发生变化,也不需要对业务模块的代码进行修改,避免工作量较大,需要重新编写大量代码等问题,大大减少人工成本。
基于与上述方法同样的申请构思,本申请实施例中还提出另一种页面显示方法,该方法可以应用于客户端,参见图3所示,为该方法的流程图。
步骤301,在接收到访问请求时,从服务器获取与访问请求对应的业务数据。
步骤302,确定与该访问请求对应的渲染库类型,并确定与该渲染库类型对应的渲染库,并确定与该访问请求对应的模板文件。
在一个例子中,针对“确定与该访问请求对应的渲染库类型”的过程,可以包括:通过客户端的标识信息(如客户端的业务模块的标识信息)查询第一映射表,得到与该标识信息对应的配置中心;其中,该第一映射表用于记录标识信息与配置中心的对应关系。然后,从该配置中心获取与客户端的标识信息对应的配置信息;其中,该配置中心的第二映射表用于记录标识信息与配置信息的对应关系。进一步的,该配置信息可以包括但不限于渲染库类型。
在一个例子中,该配置信息还可以包括模板信息。基于此,针对“确定与该访问请求对应的模板文件”的过程,可以包括:通过该模板信息查询第三映射表,得到与该模板信息对应的模板中心;其中,该第三映射表用于记录模板信息与模板中心的对应关系。然后,从该模板中心获取与该模板信息对应的模板文件;该模板中心的第四映射表用于记录模板信息与模板文件的对应关系。
在一个例子中,页面可以包括一个或者多个页面组件,该模板信息包括针对一个页面组件的局部模板信息,该模板信息对应的模板文件用于生成针对一个页面组件的局部视图;或者,该模板信息包括针对所有页面组件的全局模板信息,该模板信息对应的模板文件用于生成针对所有页面组件的全局视图。
步骤303,基于该渲染库,根据该业务数据以及该模板文件渲染出与该访问请求对应的视图(如Native视图等),并显示与该视图匹配的页面。
在一个例子中,客户端还可以获取与该访问请求对应的渲染数据,并根据该渲染数据、该业务数据以及该模板文件渲染出与该访问请求对应的视图。
针对步骤301-303的处理流程,可以参见图2的实施例,在此不再详加赘述。
基于上述技术方案,本申请实施例中,多个渲染库的差异对业务模块透明,业务模块不需要关心渲染库的接入、升级,不需要将渲染库的信息配置到业务模块的代码中,若业务模块对应的渲染库发生变化,也不需要对业务模块的代码进行修改,避免工作量较大,需要重新编写大量代码等问题,减少人工成本。
基于与上述方法同样的申请构思,本申请实施例还提供一种页面显示装置,如图4所示,为该页面显示装置的结构图,该页面显示装置应用于客户端,且页面显示装置包括业务模块11、动态组件渲染模块12和渲染库13,其中:
所述业务模块11,用于获取业务数据和渲染库类型,并向所述动态组件渲染模块发送渲染请求,所述渲染请求携带所述业务数据和所述渲染库类型;
所述动态组件渲染模块12,用于在接收到渲染请求后,从所述渲染请求中解析出业务数据和渲染库类型,确定与所述渲染库类型对应的渲染库、与所述渲染请求对应的模板文件,将所述业务数据和所述模板文件发送给所述渲染库;
所述渲染库13,用于根据所述业务数据和所述模板文件渲染出与所述渲染请求对应的视图,并将所述视图发送给所述动态组件渲染模块;
所述动态组件渲染模块12,还用于将接收的所述视图发送给所述业务模块;
所述业务模块11,还用于接收所述视图,并显示与所述视图匹配的页面。
所述业务模块11,还用于在发送所述渲染请求之前,向所述动态组件渲染模块发送配置请求,其中,所述配置请求携带所述业务模块的标识信息;所述动态组件渲染模块12,还用于在接收到配置请求后,从所述配置请求中解析出业务模块的标识信息,获取与所述标识信息对应的配置信息,所述配置信息包括渲染库类型,并向所述业务模块发送携带所述渲染库类型的响应消息;所述业务模块11,还用于接收所述响应消息,从所述响应消息中解析出所述渲染库类型,并向所述动态组件渲染模块发送携带所述渲染库类型的渲染请求。
在一个例子中,所述动态组件渲染模块12,具体用于在获取与所述标识信息对应的配置信息的过程中,通过所述标识信息查询第一映射表,得到与所述标识信息对应的配置中心;其中,所述第一映射表用于记录标识信息与配置中心的对应关系;从所述配置中心获取与所述标识信息对应的配置信息;其中,所述配置中心的第二映射表用于记录标识信息与配置信息的对应关系。
在一个例子中,所述配置信息还包括模板信息;所述动态组件渲染模块12,具体用于在确定与所述渲染请求对应的模板文件的过程中,向所述业务模块发送携带所述模板信息的响应消息,以使所述业务模块向所述动态组件渲染模块发送携带所述模板信息的渲染请求;在接收到来自所述业务模块的所述渲染请求之后,从所述渲染请求中解析出所述模板信息,并获取与所述模板信息对应的模板文件;或者,在获取与所述标识信息对应的配置信息之后,获取与所述模板信息对应的模板文件,并记录所述标识信息与所述模板文件的对应关系;在接收到来自所述业务模块的所述渲染请求之后,则从所述渲染请求中解析出所述业务模块的标识信息,并确定与所述标识信息对应的模板文件。
在一个例子中,所述动态组件渲染模块12,具体用于在获取与所述模板信息对应的模板文件的过程中,通过所述模板信息查询第三映射表,得到与所述模板信息对应的模板中心;其中,所述第三映射表用于记录模板信息与模板中心的对应关系;从所述模板中心获取与所述模板信息对应的模板文件;其中,所述模板中心的第四映射表用于记录模板信息与模板文件的对应关系。
在一个例子中,所述模板信息包括针对一个页面组件的局部模板信息,所述模板信息对应的模板文件用于生成针对所述一个页面组件的局部视图;或者,所述模板信息包括针对所有页面组件的全局模板信息,所述模板信息对应的模板文件用于生成针对所述所有页面组件的全局视图。
所述动态组件渲染模块12,具体用于在将接收的所述视图发送给所述业务模块的过程中,为所述视图封装所述动态组件渲染模块的信息,并将封装后的视图发送给所述业务模块,以使所述业务模块显示与所述视图匹配的页面;
所述动态组件渲染模块12,还用于接收操作系统根据所述动态组件渲染模块的信息发送的用户操作信息,并将所述用户操作信息封装成指定格式的消息,并将所述指定格式的消息发送给所述业务模块;其中,所述用户操作信息包括用户对所述页面进行操作时产生的操作事件和操作数据;所述业务模块,还用于接收所述指定格式的消息,并根据所述用户操作信息进行处理。
基于与上述方法同样的申请构思,本申请实施例还提供一种页面显示装置,如图5所示,为该页面显示装置的结构图,该页面显示装置应用于客户端。
获取模块21,用于在接收到访问请求时,从服务器获取与所述访问请求对应的业务数据;
确定模块22,用于确定与所述访问请求对应的渲染库类型,并确定与所述渲染库类型对应的渲染库,并确定与所述访问请求对应的模板文件;
显示模块23,用于基于所述渲染库,根据所述业务数据以及所述模板文件渲染出与所述访问请求对应的视图,并显示与所述视图匹配的页面。
所述确定模块22,具体用于在确定与所述访问请求对应的渲染库类型的过程中,通过所述客户端的标识信息查询第一映射表,得到与所述标识信息对应的配置中心;其中,所述第一映射表用于记录标识信息与配置中心的对应关系;从所述配置中心获取与所述客户端的标识信息对应的配置信息;其中,所述配置中心的第二映射表用于记录标识信息与配置信息的对应关系;
其中,所述配置信息包括渲染库类型。
所述配置信息还包括模板信息;所述确定模块22,具体用于在确定与所述访问请求对应的模板文件的过程中,通过所述模板信息查询第三映射表,得到与所述模板信息对应的模板中心;其中,所述第三映射表用于记录模板信息与模板中心的对应关系;从所述模板中心获取与所述模板信息对应的模板文件;其中,所述模板中心的第四映射表用于记录模板信息与模板文件的对应关系;
其中,所述模板信息包括针对一个页面组件的局部模板信息,所述模板信息对应的模板文件用于生成针对所述一个页面组件的局部视图;或者,所述模板信息包括针对所有页面组件的全局模板信息,所述模板信息对应的模板文件用于生成针对所述所有页面组件的全局视图。
上述实施例阐明的系统、装置、模块或单元,具体可以由计算机芯片或实体实现,或者由具有某种功能的产品来实现。一种典型的实现设备为计算机,计算机的具体形式可以是个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件收发设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任意几种设备的组合。
为了描述的方便,描述以上装置时以功能分为各种单元分别描述。当然,在实施本申请时可以把各单元的功能在同一个或多个软件和/或硬件中实现。
本领域内的技术人员应明白,本申请的实施例可提供为方法、系统、或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本申请实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可以由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其它可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其它可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
而且,这些计算机程序指令也可以存储在能引导计算机或其它可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或者多个流程和/或方框图一个方框或者多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其它可编程数据处理设备上,使得在计算机或者其它可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其它可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
本领域技术人员应明白,本申请的实施例可提供为方法、系统或计算机程序产品。因此,本申请可以采用完全硬件实施例、完全软件实施例、或者结合软件和硬件方面的实施例的形式。而且,本申请可以采用在一个或者多个其中包含有计算机可用程序代码的计算机可用存储介质(可以包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
以上所述仅为本申请的实施例而已,并不用于限制本申请。对于本领域技术人员来说,本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等,均应包含在本申请的权利要求范围之内。
Claims (27)
1.一种页面显示方法,其特征在于,所述方法应用于客户端的动态组件渲染模块,所述客户端还包括业务模块和渲染库,所述方法包括:
接收来自业务模块的渲染请求,所述渲染请求携带业务数据和渲染库类型;
确定与所述渲染库类型对应的渲染库、与所述渲染请求对应的模板文件;
将所述业务数据和所述模板文件发送给所述渲染库,以使所述渲染库根据所述业务数据和所述模板文件渲染出与所述渲染请求对应的视图;
接收来自所述渲染库的视图,将所述视图发送给所述业务模块进行显示;
其中,在配置中心记录业务模块的标识信息和配置信息的对应关系,动态组件渲染模块基于业务模块的标识信息从所述配置中心获取到配置信息;其中,所述配置信息包括渲染库类型;
其中,配置中心用于向客户端提供配置信息,模板中心用于向客户端提供模板文件,渲染库是具有渲染能力的框架,能够将脚本语言转换为视图;
其中,所述动态组件渲染模块从所述模板中心获取所述模板文件。
2.根据权利要求1所述的方法,其特征在于,
所述接收来自业务模块的渲染请求之前,所述方法还包括:
接收来自业务模块的配置请求,所述配置请求携带业务模块的标识信息;
获取与所述标识信息对应的配置信息;
向所述业务模块发送携带所述渲染库类型的响应消息,以使所述业务模块向所述动态组件渲染模块发送携带所述渲染库类型的渲染请求。
3.根据权利要求2所述的方法,其特征在于,
所述获取与所述标识信息对应的配置信息的过程,具体包括:
通过所述标识信息查询第一映射表,得到与所述标识信息对应的配置中心;其中,所述第一映射表用于记录标识信息与配置中心的对应关系;
从所述配置中心获取与所述标识信息对应的配置信息;其中,所述配置中心的第二映射表用于记录标识信息与配置信息的对应关系。
4.根据权利要求2所述的方法,其特征在于,所述配置信息还包括模板信息;所述确定与所述渲染请求对应的模板文件的过程,具体包括:
向所述业务模块发送携带所述模板信息的响应消息,以使所述业务模块向所述动态组件渲染模块发送携带所述模板信息的渲染请求;
在接收到来自所述业务模块的所述渲染请求后,从所述渲染请求中解析出所述模板信息,并获取与所述模板信息对应的模板文件。
5.根据权利要求2所述的方法,其特征在于,所述配置信息还包括模板信息;所述确定与所述渲染请求对应的模板文件的过程,具体包括:
在获取与所述标识信息对应的配置信息后,获取与所述模板信息对应的模板文件,并记录所述标识信息与所述模板文件的对应关系;
在接收到来自所述业务模块的所述渲染请求后,从所述渲染请求中解析出所述业务模块的标识信息,并确定与所述标识信息对应的模板文件。
6.根据权利要求4或5所述的方法,其特征在于,
所述获取与所述模板信息对应的模板文件的过程,具体包括:
通过所述模板信息查询第三映射表,得到与所述模板信息对应的模板中心;其中,所述第三映射表用于记录模板信息与模板中心的对应关系;
从所述模板中心获取与所述模板信息对应的模板文件;其中,所述模板中心的第四映射表用于记录模板信息与模板文件的对应关系。
7.根据权利要求4或5所述的方法,其特征在于,
所述模板信息包括针对一个页面组件的局部模板信息,所述模板信息对应的模板文件用于生成针对所述一个页面组件的局部视图;或者,
所述模板信息包括针对所有页面组件的全局模板信息,所述模板信息对应的模板文件用于生成针对所述所有页面组件的全局视图。
8.根据权利要求4或5所述的方法,其特征在于,所述配置信息还包括预加载信息,所述获取与所述标识信息对应的配置信息之后,所述方法还包括:
若所述预加载信息为不执行预加载,则执行向业务模块发送携带所述模板信息的响应消息,以使所述业务模块发送携带所述模板信息的渲染请求的过程;
若所述预加载信息为执行预加载,则执行获取与所述模板信息对应的模板文件,并记录所述标识信息与所述模板文件的对应关系的过程。
9.根据权利要求1所述的方法,其特征在于,所述将所述业务数据和所述模板文件发送给所述渲染库,以使所述渲染库根据所述业务数据和所述模板文件渲染出与所述渲染请求对应的视图的过程,具体包括:
若所述渲染请求携带渲染数据,则从所述渲染请求中解析出所述渲染数据;
将所述渲染数据、所述业务数据和所述模板文件发送给所述渲染库,以使所述渲染库根据所述渲染数据、所述业务数据和所述模板文件渲染出视图。
10.根据权利要求1所述的方法,其特征在于,
所述将所述视图发送给所述业务模块进行显示的过程,具体包括:
为所述视图封装所述动态组件渲染模块的信息,并将封装后的视图发送给所述业务模块,以使所述业务模块显示与所述视图匹配的页面。
11.根据权利要求10所述的方法,其特征在于,
所述将所述视图发送给所述业务模块进行显示之后,所述方法还包括:
接收操作系统根据所述动态组件渲染模块的信息发送的用户操作信息;所述用户操作信息包括用户对所述页面进行操作时产生的操作事件和操作数据;
将所述用户操作信息封装成指定格式的消息,并将所述指定格式的消息发送给所述业务模块,以使所述业务模块根据所述用户操作信息进行处理。
12.根据权利要求1所述的方法,其特征在于,所述渲染库包括以下之一或者任意组合:React Native渲染库、Weex渲染库、鸟巢渲染库。
13.一种页面显示方法,其特征在于,应用于客户端,所述方法包括:
在接收到访问请求时,从服务器获取与所述访问请求对应的业务数据;
确定与所述访问请求对应的渲染库类型,并确定与所述渲染库类型对应的渲染库,并确定与所述访问请求对应的模板文件;
基于所述渲染库,根据所述业务数据以及所述模板文件渲染出与所述访问请求对应的视图,并显示与所述视图匹配的页面;
其中,所述客户端包括业务模块和渲染库,在配置中心记录业务模块的标识信息和配置信息的对应关系,所述客户端基于业务模块的标识信息从所述配置中心获取到配置信息;其中,配置中心用于向客户端提供配置信息,渲染库是具有渲染能力的框架,能够将脚本语言转换为视图;
其中,所述配置信息包括渲染库类型。
14.根据权利要求13所述的方法,其特征在于,
所述确定与所述访问请求对应的渲染库类型的过程,具体包括:
通过所述客户端的标识信息查询第一映射表,得到与所述标识信息对应的配置中心;其中,所述第一映射表用于记录标识信息与配置中心的对应关系;
从所述配置中心获取与所述客户端的标识信息对应的配置信息;其中,所述配置中心的第二映射表用于记录标识信息与配置信息的对应关系。
15.根据权利要求14所述的方法,其特征在于,所述配置信息还包括模板信息;所述确定与所述访问请求对应的模板文件的过程,具体包括:
通过所述模板信息查询第三映射表,得到与所述模板信息对应的模板中心;其中,所述第三映射表用于记录模板信息与模板中心的对应关系;
从所述模板中心获取与所述模板信息对应的模板文件;其中,所述模板中心的第四映射表用于记录模板信息与模板文件的对应关系。
16.根据权利要求15所述的方法,其特征在于,
所述模板信息包括针对一个页面组件的局部模板信息,所述模板信息对应的模板文件用于生成针对所述一个页面组件的局部视图;或者,
所述模板信息包括针对所有页面组件的全局模板信息,所述模板信息对应的模板文件用于生成针对所述所有页面组件的全局视图。
17.根据权利要求15所述的方法,其特征在于,所述根据所述业务数据以及所述模板文件渲染出与所述访问请求对应的视图的过程,具体包括:
获取与所述访问请求对应的渲染数据,并根据所述渲染数据、所述业务数据以及所述模板文件渲染出与所述访问请求对应的视图。
18.一种页面显示装置,其特征在于,应用于客户端,所述页面显示装置包括动态组件渲染模块、业务模块和渲染库,其中:
所述业务模块,用于获取业务数据和渲染库类型,并向所述动态组件渲染模块发送渲染请求,所述渲染请求携带所述业务数据和所述渲染库类型;
所述动态组件渲染模块,用于在接收到渲染请求后,从所述渲染请求中解析出业务数据和渲染库类型,确定与所述渲染库类型对应的渲染库、与所述渲染请求对应的模板文件,并将所述业务数据和所述模板文件发送给所述渲染库;
所述渲染库,用于根据所述业务数据和所述模板文件渲染出与所述渲染请求对应的视图,并将所述视图发送给所述动态组件渲染模块;
所述动态组件渲染模块,还用于将接收的所述视图发送给所述业务模块;
所述业务模块,还用于接收所述视图,并显示与所述视图匹配的页面;
其中,在配置中心记录业务模块的标识信息和配置信息的对应关系,动态组件渲染模块基于业务模块的标识信息从所述配置中心获取到配置信息;其中,所述配置信息包括渲染库类型;
其中,配置中心用于向客户端提供配置信息,模板中心用于向客户端提供模板文件,渲染库是具有渲染能力的框架,能够将脚本语言转换为视图;
其中,所述动态组件渲染模块从所述模板中心获取所述模板文件。
19.根据权利要求18所述的装置,其特征在于,
所述业务模块,还用于在发送所述渲染请求之前,向所述动态组件渲染模块发送配置请求,其中,所述配置请求携带所述业务模块的标识信息;
所述动态组件渲染模块,还用于在接收到配置请求后,从所述配置请求中解析出业务模块的标识信息,获取与所述标识信息对应的配置信息,并向所述业务模块发送携带所述渲染库类型的响应消息;
所述业务模块,还用于接收所述响应消息,从所述响应消息中解析出所述渲染库类型,并向所述动态组件渲染模块发送携带所述渲染库类型的渲染请求。
20.根据权利要求19所述的装置,其特征在于,
所述动态组件渲染模块,具体用于在获取与所述标识信息对应的配置信息的过程中,通过所述标识信息查询第一映射表,得到与所述标识信息对应的配置中心;其中,所述第一映射表用于记录标识信息与配置中心的对应关系;从所述配置中心获取与所述标识信息对应的配置信息;其中,所述配置中心的第二映射表用于记录标识信息与配置信息的对应关系。
21.根据权利要求19所述的装置,其特征在于,
所述配置信息还包括模板信息;所述动态组件渲染模块,具体用于在确定与所述渲染请求对应的模板文件的过程中,向所述业务模块发送携带所述模板信息的响应消息,以使所述业务模块向所述动态组件渲染模块发送携带所述模板信息的渲染请求;在接收到来自所述业务模块的所述渲染请求之后,从所述渲染请求中解析出所述模板信息,并获取与所述模板信息对应的模板文件;或者,在获取与所述标识信息对应的配置信息之后,获取与所述模板信息对应的模板文件,并记录所述标识信息与所述模板文件的对应关系;在接收到来自所述业务模块的所述渲染请求之后,则从所述渲染请求中解析出所述业务模块的标识信息,并确定与所述标识信息对应的模板文件。
22.根据权利要求21所述的装置,其特征在于,
所述动态组件渲染模块,具体用于在获取与所述模板信息对应的模板文件的过程中,通过所述模板信息查询第三映射表,得到与所述模板信息对应的模板中心;其中,所述第三映射表用于记录模板信息与模板中心的对应关系;从所述模板中心获取与所述模板信息对应的模板文件;其中,所述模板中心的第四映射表用于记录模板信息与模板文件的对应关系。
23.根据权利要求21所述的装置,其特征在于,
所述模板信息包括针对一个页面组件的局部模板信息,所述模板信息对应的模板文件用于生成针对所述一个页面组件的局部视图;或者,
所述模板信息包括针对所有页面组件的全局模板信息,所述模板信息对应的模板文件用于生成针对所述所有页面组件的全局视图。
24.根据权利要求18所述的装置,其特征在于,
所述动态组件渲染模块,具体用于在将接收的所述视图发送给所述业务模块的过程中,为所述视图封装所述动态组件渲染模块的信息,并将封装后的视图发送给所述业务模块,以使所述业务模块显示与所述视图匹配的页面;
所述动态组件渲染模块,还用于接收操作系统根据所述动态组件渲染模块的信息发送的用户操作信息,并将所述用户操作信息封装成指定格式的消息,并将所述指定格式的消息发送给所述业务模块;其中,所述用户操作信息包括用户对所述页面进行操作时产生的操作事件和操作数据;所述业务模块,还用于接收所述指定格式的消息,并根据所述用户操作信息进行处理。
25.一种页面显示装置,其特征在于,应用于客户端,所述装置包括:
获取模块,用于在接收到访问请求时,从服务器获取与所述访问请求对应的业务数据;
确定模块,用于确定与所述访问请求对应的渲染库类型,并确定与所述渲染库类型对应的渲染库,并确定与所述访问请求对应的模板文件;
显示模块,用于基于所述渲染库,根据所述业务数据以及所述模板文件渲染出与所述访问请求对应的视图,并显示与所述视图匹配的页面;
其中,所述客户端包括业务模块和渲染库,在配置中心记录业务模块的标识信息和配置信息的对应关系,所述客户端基于业务模块的标识信息从所述配置中心获取到配置信息;其中,配置中心用于向客户端提供配置信息,渲染库是具有渲染能力的框架,能够将脚本语言转换为视图;
其中,所述配置信息包括渲染库类型。
26.根据权利要求25所述的装置,其特征在于,
所述确定模块,具体用于在确定与所述访问请求对应的渲染库类型的过程中,通过所述客户端的标识信息查询第一映射表,得到与所述标识信息对应的配置中心;其中,所述第一映射表用于记录标识信息与配置中心的对应关系;从所述配置中心获取与所述客户端的标识信息对应的配置信息;其中,所述配置中心的第二映射表用于记录标识信息与配置信息的对应关系。
27.根据权利要求26所述的装置,其特征在于,
所述配置信息还包括模板信息;所述确定模块,具体用于在确定与所述访问请求对应的模板文件的过程中,通过所述模板信息查询第三映射表,得到与所述模板信息对应的模板中心;其中,所述第三映射表用于记录模板信息与模板中心的对应关系;从所述模板中心获取与所述模板信息对应的模板文件;其中,所述模板中心的第四映射表用于记录模板信息与模板文件的对应关系;
其中,所述模板信息包括针对一个页面组件的局部模板信息,所述模板信息对应的模板文件用于生成针对所述一个页面组件的局部视图;或者,所述模板信息包括针对所有页面组件的全局模板信息,所述模板信息对应的模板文件用于生成针对所述所有页面组件的全局视图。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201710891878.2A CN109558186B (zh) | 2017-09-27 | 2017-09-27 | 一种页面显示方法和装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201710891878.2A CN109558186B (zh) | 2017-09-27 | 2017-09-27 | 一种页面显示方法和装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN109558186A CN109558186A (zh) | 2019-04-02 |
CN109558186B true CN109558186B (zh) | 2022-06-28 |
Family
ID=65864151
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201710891878.2A Active CN109558186B (zh) | 2017-09-27 | 2017-09-27 | 一种页面显示方法和装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN109558186B (zh) |
Families Citing this family (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111158789A (zh) * | 2019-12-31 | 2020-05-15 | 南京天溯自动化控制系统有限公司 | 一种自动适配网络环境的图表展示中间件及图表展示方法 |
CN113282851A (zh) * | 2020-02-18 | 2021-08-20 | 北京沃东天骏信息技术有限公司 | 一种应用集成系统和应用集成方法 |
Citations (11)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102681854A (zh) * | 2012-05-18 | 2012-09-19 | 华为技术有限公司 | 业务执行方法、服务器和计算机系统 |
CN103973729A (zh) * | 2013-01-28 | 2014-08-06 | 联想(北京)有限公司 | 信息处理方法和信息处理装置 |
CN105354013A (zh) * | 2014-08-18 | 2016-02-24 | 阿里巴巴集团控股有限公司 | 应用界面渲染方法及装置 |
CN105574049A (zh) * | 2014-10-30 | 2016-05-11 | 阿里巴巴集团控股有限公司 | 移动应用的页面处理方法、装置和系统 |
CN105589693A (zh) * | 2015-12-18 | 2016-05-18 | 国云科技股份有限公司 | 一种基于react-native的快速实现移动端数据获取的方法 |
CN105956104A (zh) * | 2016-04-29 | 2016-09-21 | 努比亚技术有限公司 | 业务视图框架及其开发方法 |
CN106250128A (zh) * | 2016-07-26 | 2016-12-21 | 网易(杭州)网络有限公司 | 用户界面的显示处理方法及装置 |
CN106293794A (zh) * | 2015-06-05 | 2017-01-04 | 阿里巴巴集团控股有限公司 | 加载页面的方法、装置和系统 |
CN106484383A (zh) * | 2015-08-31 | 2017-03-08 | 阿里巴巴集团控股有限公司 | 页面渲染方法、装置及设备 |
CN106569794A (zh) * | 2016-09-23 | 2017-04-19 | 北京五八信息技术有限公司 | 应用程序开发装置 |
CN106909361A (zh) * | 2015-12-23 | 2017-06-30 | 任子行网络技术股份有限公司 | 基于模版引擎的web开发方法和装置 |
Family Cites Families (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US9122657B2 (en) * | 2013-05-16 | 2015-09-01 | International Business Machines Corporation | Webpage display system leveraging OSGI |
US11449560B2 (en) * | 2015-07-27 | 2022-09-20 | WP Company, LLC | Native integration of arbitrary data sources |
-
2017
- 2017-09-27 CN CN201710891878.2A patent/CN109558186B/zh active Active
Patent Citations (11)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102681854A (zh) * | 2012-05-18 | 2012-09-19 | 华为技术有限公司 | 业务执行方法、服务器和计算机系统 |
CN103973729A (zh) * | 2013-01-28 | 2014-08-06 | 联想(北京)有限公司 | 信息处理方法和信息处理装置 |
CN105354013A (zh) * | 2014-08-18 | 2016-02-24 | 阿里巴巴集团控股有限公司 | 应用界面渲染方法及装置 |
CN105574049A (zh) * | 2014-10-30 | 2016-05-11 | 阿里巴巴集团控股有限公司 | 移动应用的页面处理方法、装置和系统 |
CN106293794A (zh) * | 2015-06-05 | 2017-01-04 | 阿里巴巴集团控股有限公司 | 加载页面的方法、装置和系统 |
CN106484383A (zh) * | 2015-08-31 | 2017-03-08 | 阿里巴巴集团控股有限公司 | 页面渲染方法、装置及设备 |
CN105589693A (zh) * | 2015-12-18 | 2016-05-18 | 国云科技股份有限公司 | 一种基于react-native的快速实现移动端数据获取的方法 |
CN106909361A (zh) * | 2015-12-23 | 2017-06-30 | 任子行网络技术股份有限公司 | 基于模版引擎的web开发方法和装置 |
CN105956104A (zh) * | 2016-04-29 | 2016-09-21 | 努比亚技术有限公司 | 业务视图框架及其开发方法 |
CN106250128A (zh) * | 2016-07-26 | 2016-12-21 | 网易(杭州)网络有限公司 | 用户界面的显示处理方法及装置 |
CN106569794A (zh) * | 2016-09-23 | 2017-04-19 | 北京五八信息技术有限公司 | 应用程序开发装置 |
Also Published As
Publication number | Publication date |
---|---|
CN109558186A (zh) | 2019-04-02 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN105335132B (zh) | 一种自定义应用程序功能的方法、装置以及系统 | |
US11016716B2 (en) | Picture interface display method and apparatus according to jump protocol | |
WO2018068645A1 (zh) | 多服务集成方法、装置、智能终端、服务器和操作系统 | |
CN105354014A (zh) | 应用界面渲染展示方法及装置 | |
US10375211B2 (en) | Optimization of user interface data transmission for a consistent multi-platform experience service delivery | |
CN110780874B (zh) | 用于生成信息的方法和装置 | |
CN109582317B (zh) | 用于调试寄宿应用的方法和装置 | |
CN112347404A (zh) | Spa页面渲染方法、设备、系统及存储介质 | |
CN109558186B (zh) | 一种页面显示方法和装置 | |
CN112306594A (zh) | 一种基于移动端的渲染方法、装置及存储介质 | |
CN113329087A (zh) | 用于获取信息的方法和装置 | |
CN110618811B (zh) | 信息呈现方法和装置 | |
CN113763009A (zh) | 一种图片处理方法、图片跳转方法、装置、设备和介质 | |
CN111523065B (zh) | 富文本数据处理方法、装置、电子设备及计算机存储介质 | |
CN110069186B (zh) | 显示应用的操作界面的方法和设备 | |
CN113784194A (zh) | 一种视频播放器的嵌入方法和装置 | |
US9767079B1 (en) | Serving expandable content items | |
CN115878115A (zh) | 页面渲染方法、装置、介质和电子设备 | |
CN112995743B (zh) | 视频播放方法及装置 | |
CN113268221A (zh) | 文件匹配方法、装置、存储介质及计算机设备 | |
CN114328678A (zh) | 服务内选项信息的展示方法及装置、电子设备、存储介质 | |
EP3242223A1 (en) | Information presentation method and apparatus | |
CN113282285A (zh) | 代码编写方法、装置、电子设备及存储介质 | |
CN113553123B (zh) | 数据处理方法、装置、电子设备及存储介质 | |
CN109460304B (zh) | 一种跨应用的通知展示、通知内容封装方法和装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |