一种基于移动端的渲染方法、装置及存储介质

技术领域

本申请涉及图像处理技术领域，尤其涉及一种基于移动端的渲染方法、一种基于移动端的渲染装置、一种计算机可读存储介质以及一种电子设备。

背景技术

随着智能手机和移动互联网的发展，越来越多的资讯信息能够展示在移动端，供用户浏览新闻、体育、娱乐、商品等。这种能够在移动端展示移动资讯类的应用通常利用原生(native)组件或浏览器组件对数据内容进行渲染，从而在移动端展示给用户。其中，原生组件可以在移动端的原生应用(native APP)中创建，虽然可以直接快速地渲染接收到的内容，但是可支持的样式比较单一，不能满足丰富多变的内容要求。浏览器组件(如Webview组件)是使用浏览器引擎(如WebKit)的组件，可支持的样式比较丰富，但被移动端系统支持能力有限，渲染速度比较慢。

发明内容

针对上述现有技术，本申请实施例公开一种基于移动端的渲染方法，可以避免原生组件支持样式单一和浏览器组件渲染速度慢的缺陷。

本申请实施例中的基于移动端的渲染方法，具体包括：

通过网络请求接收数据；

将接收到的数据进行解析得到数据内容、数据属性和数据标签，所述数据标签是用于表示数据内容开始和数据内容结束的标识，所述数据属性是用于表示数据内容的显示样式；

在移动端跨平台开发框架下，根据数据标签在建立的原生组件映射表中查找对应的原生组件；

如果查找到对应的原生组件，则利用查找到的原生组件按照所述数据属性渲染所述数据内容；

如果未查找到对应的原生组件，则利用已有的浏览器组件按照所述数据属性渲染所述数据内容。

进一步地，

所述数据为超文本标记语言(html)数据；所述将接收到的数据进行解析得到数据内容、数据属性和数据标签的步骤包括：

将接收到的html数据生成文档对象模型(DOM)树，所述DOM树中的每一个节点保存有所述数据内容、数据属性和对应的数据标签；

遍历解析所述DOM树，根据标签类型将所述数据标签分为标准标签和自定义标签，所述标准标签为操作系统已创建的数据标签，所述自定义标签为基于移动端跨平台开发框架下新设置的数据标签。

进一步地，

所述将接收到的数据进行解析得到数据内容和数据标签的步骤和所述根据数据标签在建立的原生组件映射表中查找对应的原生组件的步骤之间，该方法进一步包括：

针对所述标准标签，将所述DOM树中对应的数据内容和数据属性传输给对应的标准组件，由所述标准组件按照所述数据属性渲染所述数据内容，所述标准组件为操作系统已创建的原生组件。

进一步地，

所述根据数据标签在建立的原生组件映射表中查找对应的原生组件的步骤包括：

根据所述自定义标签在建立的原生组件映射表中查找对应的自定义组件，所述自定义组件为所述基于移动端跨平台开发框架下新设置的原生组件。

进一步地，

所述如果查找到对应的原生组件，则利用查找到的原生组件按照所述数据属性渲染所述数据内容的步骤包括：

如果查找到所述自定义标签对应的自定义组件，则将所述DOM树中对应的数据内容和数据属性传输给对应的自定义组件，由所述自定义组件按照所述数据属性渲染所述数据内容。

进一步地，

所述如果未查找到对应的原生组件，则利用已有的浏览器组件按照所述数据属性渲染所述数据内容的步骤包括：

如果未查找到所述自定义标签对应的自定义组件，则将所述自定义标签、数据内容和数据属性传输给所述浏览器组件，由所述浏览器组件按照所述数据属性渲染所述数据内容。

进一步地，

所述浏览器组件按照所述数据属性渲染所述数据内容时，该方法进一步包括：

如果所述浏览器组件渲染失败，则放弃本次渲染且记录下渲染失败所对应的数据标签。

本申请实施例还提供一种基于移动端的渲染装置，可以避免原生组件支持样式单一和浏览器组件渲染速度慢的缺陷。

本申请实施例提供的一种基于移动端的渲染装置包括：

数据接收模块，用于通过网络请求接收数据；

数据解析模块，用于将接收到的数据进行解析得到数据内容、数据属性和数据标签，所述数据标签是用于表示数据内容开始和数据内容结束的标识，所述数据属性是用于表示数据内容的显示样式；

组件映射模块，用于在移动端跨平台开发框架下，根据数据标签在建立的原生组件映射表中查找对应的原生组件；

组件渲染模块，如果所述组件映射模块查找到对应的原生组件，则利用查找到的原生组件按照所述数据属性渲染所述数据内容；如果所述组件映射模块未查找到对应的原生组件，则利用已有的浏览器组件按照所述数据属性渲染所述数据内容。

进一步地，

所述组件渲染模块进一步用于，针对所述标准标签，将所述DOM树中对应的数据内容和数据属性传输给对应的标准组件，由所述标准组件按照所述数据属性渲染所述数据内容，所述标准组件为操作系统已创建的原生组件。

本申请实施例还提供一种计算机可读存储介质，其上存储有计算机指令，所述指令被处理器执行时可实现上述基于移动端的渲染方法。

本申请实施例还提供一种电子设备，该电子设备至少包括上述的计算机可读存储介质，还包括处理器；

所述处理器，用于从所述计算机可读存储介质中读取所述可执行指令，并执行所述指令以实现上述基于移动端的渲染方法。

综上，本申请实施例将原生组件和浏览器组件结合起来，优先利用原生组件进行渲染，在原生组件映射表中未查找到对应的原生组件时才利用已有的浏览器组件进行渲染，从而既保证快速的渲染速度，又满足渲染丰富样式的需求，进而可以增强用户体验感。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本申请基于移动端的渲染方法实施例一的流程图。

图2是本申请基于移动端的渲染方法实施例二的流程图。

图3是本申请实施例中DOM树示意图。

图4是本申请实施例中渲染效果图。

图5是本申请移动端的渲染装置实施例一的结构示意图。

图6是本申请实施例中的电子设备结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例例如能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含。例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其他步骤或单元。

下面以具体实施例对本发明的技术方案进行详细说明。下面几个具体实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例不再赘述。

本申请实施例中，为了避免原生组件支持的样式比较单一，浏览器组件渲染速度的缺陷，提供了一种新的基于移动端的渲染方法。在本申请实施例在移动端跨平台开发框架下，在原生应用中创建了原生组件，利用了浏览器组件，并将两者的优势结合起来渲染。当无法由原生组件渲染时，再利用浏览器组件进行渲染，不但丰富了原生应用可支持的渲染样式，还大大增加了渲染速度，从而进一步增强用户体验。

图1是本申请基于移动端的渲染方法实施例一的流程图。如图1所示，该方法包括：

步骤B1：通过网络请求接收数据。

这里所述的数据即用户浏览的新闻、体育、娱乐或商品等信息，可以采用html格式传输。实际应用中，也可以采用XML、JSON或其他格式。

步骤B2：将接收到的数据进行解析得到数据内容、数据属性和数据标签，所述数据标签是用于表示数据内容开始和数据内容结束的标识，所述数据属性是用于表示数据内容的显示样式。

实际应用中，为了区分不同的数据内容，通常会用数据标签进行标识。比如，在html格式中，可以利用

…

这一数据标签表示其中的数据内容为文本，利用…这一数据标签表示其中的数据内容为图片。另外，为了表示数据内容的显示样式，还需要利用数据属性进行说明，比如颜色、大小、位置等等。

步骤B3：在移动端跨平台开发框架下，根据数据标签在建立的原生组件映射表中查找对应的原生组件。

实际应用中，移动端有不同的操作系统，比如IOS、安卓(Android)等。为了避免重复开发，可以在基于移动端跨平台开发框架(比如RN、Flutter等)下进行原生应用的开发，从而适用于不同操作系统。

本申请实施例中，可以在基于移动端跨平台开发框架下事先创建原生组件，设置对应的数据标签。实施时，将数据标签和对应的原生组件地址添加到建立的映射表中，根据解析得到的数据标签从原生组件映射表中获取对应的原生组件地址，并在后续步骤中运行该原生组件。

步骤B4：如果查找到对应的原生组件，则利用查找到的原生组件按照所述数据属性渲染所述数据内容。

实际应用中，可以将需要的参数传输给该原生组件，比如数据内容和数据属性。该原生组件就可以在原生应用中按照该数据属性渲染需要显示的数据内容。

步骤B5：如果未查找到对应的原生组件，则利用已有的浏览器组件按照所述数据属性渲染所述数据内容。

这里所述的浏览器组件是浏览器引擎的组件，可以对数据内容进行渲染，可以支持比较丰富的显示样式，但渲染速度慢。为了加快渲染速度，本申请实施例将原生组件和浏览器组件的渲染结合起来，优先利用原生组件进行渲染，只有没有对应的原生组件时才利用已有的浏览器组件进行渲染，从而既保证快速的渲染速度，又满足渲染丰富样式的需求。

为了更好地说明本申请实施例方案，下面用方法实施例二进行详细描述。在方法实施例二中，假设网络接收到的数据为超文本标记语言(html)数据，原生应用是在原生反应(RN，React Native)这种移动端跨平台开发框架下开发，浏览器引擎为WebKit引擎，浏览器组件为Webview。

图2是本申请基于移动端的渲染方法实施例二的流程图。如图2所示，该方法包括：

步骤C1：通过网络请求接收html数据。

如上所述，html数据需要按照html格式组织，比如下面是一个常见的html格式组织的数据举例：

其中，数据标签

表示图层，也可以作为其他元素的容器；

…

表示其中的数据内容为文本；…表示其中的数据内容为图片；…表示其中为某个自定义的组件。总之，按照html格式可以表示出任务需要显示出来的数据。

步骤C2：将接收到的html数据生成文档对象模型(DOM)树，所述DOM树中的每一个节点保存有所述数据内容、数据属性和对应的数据标签。

实际应用中，html数据是按照某种顺序进行安排，且可能包含嵌套数据。为了清楚表示其数据关系，可以利用DOM树表示。DOM树是网页中用来表示文档中对象的标准模型，将文档中的对象组织在一个树形结构中。上述步骤C1中的html数据利用DOM树表示的结果如图3所示。

步骤C3：遍历并解析所述DOM树，根据标签类型将所述数据标签分为标准标签和自定义标签，所述标准标签为操作系统已创建的数据标签，所述自定义标签为基于移动端跨平台开发框架下新设置的数据标签。

实际应用中，原生组件可以是操作系统自带的原生组件，也可以由开发人员在在RN框架下新创建的原生组件，两者都可以在原生应用中实施渲染功能。为区分两者，这里将前者称为标准组件，将其对应的标签称为标准标签；将后者称为自定义组件，将其对应的标签称为自定义标签。

上述步骤C2～步骤C3是具体解析接收到的html数据的步骤，并在解析后获得html数据的数据标签、数据属性和数据内容。

步骤C4：针对所述标准标签，将所述DOM树中对应的数据内容和数据属性传输给对应的标准组件，由所述标准组件按照所述数据属性渲染所述数据内容，所述标准组件为操作系统已创建的原生组件。

现有技术人员知道，标准组件的类型单一、数量少，例如在IOS操作系统下的UILabel组件、UIImage组件等。由于RN框架已经获知标准原生组件和标准标签的对应关系，可以根据标准标签自动获取对应的标准原生组件，比如从RN bundle包中获取。因此，如果接收到的html数据中需要利用标准原生组件渲染，无需执行步骤C5，直接利用步骤C4渲染即可。当然，实际应用中也可以不利用操作系统下自带的标准组件，而统一在RN框架创建，那么标准原生组件的功能可以由自定义组件完成，就可以省略步骤C4。

步骤C5：根据所述自定义标签在建立的原生组件映射表中查找对应的自定义组件，所述自定义组件为所述RN框架下新设置的原生组件。

如前所述，本申请实施例可以在RN框架下新设置自定义组件，以增加原生组件的种类，进而提高渲染速度。为了根据html数据中的自定义标签准确找到对应的自定义组件，需要事先建立原生组件映射表，并存放于RN bundle包中。比如上述的CustomView为自定义组件，假设其功能是渲染出表示商品展示的内容。当然，还可以设置其他的比如JDScrollView组件表示滚动显示，JDSkuView组件表示卡片显示等等。这些自定义组件都可以由开发人员根据实际情况进行创建。

不管创建了哪些自定义原生组件，都可以按照如下方式建立原生组件映射表：

表一

当然，如果原生应用增加或修改了自定义组件，也同时需要在RN bundle包中更新其原生组件映射表。

步骤C6：如果查找到所述自定义标签对应的自定义组件，则将所述DOM树中对应的数据内容和数据属性传输给对应的自定义组件，由所述自定义组件按照所述数据属性渲染所述数据内容。

如上所述，DOM树中的每一个节点都保存有数据内容、数据属性和对应的数据标签。如果从原生组件映射表中查找到自定义标签对应的自定义组件，就可以从DOM树的节点中获取数据内容和数据属性，将数据内容和数据属性作为参数传输给相应的自定义组件。比如：从图3所示的DOM树遍历到自定义标签CustomView这个节点，根据原生组件映射表确定对应的CustomView组件，则可以该节点中数据内容和数据属性传输给CustomView组件，CustomView组件按照该数据属性渲染该数据内容。

步骤C7：如果未查找到所述自定义标签对应的自定义组件，则将所述自定义标签、数据内容和数据属性传输给所述Webview组件，由所述Webview组件按照所述数据属性渲染所述数据内容。

为了进一步丰富可支持的样式，如果DOM树中某节点既不是标准标签，也不是自定义标签，本步骤可以可以将该节点的数据标签、数据属性和数据内容一并传输给Webview组件，由Webview组件进行渲染。

步骤C8：如果所述Webview组件渲染失败，则放弃本次渲染且记录下渲染失败所对应的数据标签。

实际应用中，从网络上传输来的html数据格式的种类非常庞大，可能会存在当前原生应用无法渲染的情况。这种情况下，可以放弃某个数据标签所对应数据内容的渲染，将渲染失败的数据标签记录在缓存区中。这样，如果后续再次接收到渲染失败的数据标签，则可以直接放弃，以进一步提高渲染速度。

假设利用本申请实施例的方案渲染上述接收到的html数据，其效果可以如图4所示。其中，文字1、文字3、图片1和图片3可以由标准组件渲染，而文字2、图片2以及价格和按钮构成的则在查找原生组件映射表之后，由自定义组件CustomView渲染。

本申请实施例还提供一种基于移动端的渲染装置。图5是本申请移动端的渲染装置实施例一的结构示意图。如图5所示，该装置包括：数据接收模块S1、数据解析模块S2、组件映射模块S3、组件渲染模块S4。其中：

数据接收模块S1，用于通过网络请求接收数据。

数据解析模块S2，用于将接收到的数据进行解析得到数据内容、数据属性和数据标签，所述数据标签是用于表示数据内容开始和数据内容结束的标识，所述数据属性是用于表示数据内容的显示样式。

组件映射模块S3，用于在移动端跨平台开发框架下，根据数据标签在建立的原生组件映射表中查找对应的原生组件。

组件渲染模块S4，如果组件映射模块S3查找到对应的原生组件，则利用查找到的原生组件按照所述数据属性渲染所述数据内容；如果组件映射模块S3未查找到对应的原生组件，则利用已有的浏览器组件按照所述数据属性渲染所述数据内容。

也就是说，数据接收模块S1通过网络请求接收数据；数据解析模块S2将接收到的数据进行解析得到数据内容、数据属性和数据标签；在移动端跨平台开发框架下，组件映射模块S3根据数据标签在建立的原生组件映射表中查找对应的原生组件；如果组件映射模块S3查找到对应的原生组件，组件渲染模块S4则利用查找到的原生组件按照所述数据属性渲染所述数据内容；如果组件映射模块S3未查找到对应的原生组件，组件渲染模块S4则利用已有的浏览器组件按照所述数据属性渲染所述数据内容。

本申请实施例优先利用原生组件进行渲染，只有没有对应的原生组件时才利用已有的浏览器组件进行渲染，从而既保证快速的渲染速度，又满足渲染丰富样式的需求。

在另一装置实施例中，如果接收到的数据为html数据，数据解析模块S2将接收到的数据进行解析时，可以：将接收到的html数据生成文档对象模型(DOM)树，所述DOM树中的每一个节点保存有所述数据内容、数据属性和对应的数据标签；遍历解析所述DOM树，根据标签类型将所述数据标签分为标准标签和自定义标签，所述标准标签为操作系统已创建的数据标签，所述自定义标签为基于移动端跨平台开发框架下新设置的数据标签。

在另一装置实施例中，组件渲染模块S4进一步用于，针对所述标准标签，将所述DOM树中对应的数据内容和数据属性传输给对应的标准组件，由所述标准组件按照所述数据属性渲染所述数据内容，所述标准组件为操作系统已创建的原生组件。

在另一装置实施例中，组件映射模块S3在建立的原生组件映射表中查找对应的原生组件时，可以根据所述自定义标签在建立的原生组件映射表中查找对应的自定义组件，所述自定义组件为所述基于移动端跨平台开发框架下新设置的原生组件；如果查找到所述自定义标签对应的自定义组件，则将所述DOM树中对应的数据内容和数据属性传输给对应的自定义组件，由所述原生组件按照所述数据属性渲染所述数据内容；如果未查找到所述自定义标签对应的自定义组件，则将所述自定义标签、数据内容和数据属性传输给所述浏览器组件，由所述浏览器组件按照所述数据属性渲染所述数据内容。

在另一装置实施例中，组件渲染模块S4在浏览器组件渲染失败时，进一步用于放弃本次渲染且记录下渲染失败所对应的数据标签。

应用本申请实施例方案，原生应用可以充分利用已有的标准组件和浏览器组件，且在RN框架下设置新的自定义组件，其中的标准组件和自定义组件都为原生组件，可以直接在原生应用中渲染，提高渲染速度。只有在无法由原生组件渲染的情况下，为了丰富可支持的样式，才由浏览器组件进行渲染。因此，既可以保证渲染的速度，又满足了支持丰富样式的需求，大大增强用户体验感。

本申请实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储指令，所述指令在由处理器执行时可执行如上所述的基于移动端的渲染方法中的步骤。实际应用中，所述的计算机可读介质可以是上述实施例各设备/装置/系统所包含的，也可以是单独存在，而未装配入该设备/装置/系统中。其中，在计算机可读存储介质中存储指令，其存储的指令在由处理器执行时可执行如上所述基于移动端的渲染方法中的步骤。

根据本申请公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质，例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件，或者上述的任意合适的组合，但不用于限制本申请保护的范围。在本申请公开的实施例中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

如图6所示，本发明实施例还提供一种电子设备。如图6所示，其示出了本发明实施例所涉及的电子设备的结构示意图，具体来讲：

该电子设备可以包括一个或一个以上处理核心的处理器601、一个或一个以上计算机可读存储介质的存储器602以及存储在存储器上并可在处理器上运行的计算机程序。在执行所述存储器602的程序时，可以实现上述基于移动端的渲染方法。

具体的，实际应用中，该电子设备还可以包括电源603、输入输出单元604等部件。本领域技术人员可以理解，图6中示出的电子设备的结构并不构成对该电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

处理器601是该电子设备的控制中心，利用各种接口和线路连接整个电子设备的各个部分，通过运行或执行存储在存储器602内的软件程序和/或模块，以及调用存储在存储器602内的数据，执行服务器的各种功能和处理数据，从而对该电子设备进行整体监控。

存储器602可用于存储软件程序以及模块，即上述计算机可读存储介质。处理器601通过运行存储在存储器602的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器602可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据服务器的使用所创建的数据等。此外，存储器602可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器602还可以包括存储器控制器，以提供处理器601对存储器602的访问。

该电子设备还包括给各个部件供电的电源603，可以通过电源管理系统与处理器601逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源603还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

该电子设备还可包括输入输出单元604，该输入单元输出604可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。该输入单元输出604还可以用于显示由用户输入的信息或提供给用户的信息以及各种图像用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。

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

本领域技术人员可以理解，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合，即使这样的组合或结合没有明确记载于本申请中。特别地，在不脱离本申请精神和教导的情况下，本申请的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合，所有这些组合和/或结合均落入本申请公开的范围。

本文中应用了具体实施例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思路，并不用于限制本申请。对于本领域的技术人员来说，可以依据本发明的思路、精神和原则，在具体实施方式及应用范围上进行改变，其所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。