一种渲染子节点的方法及设备与流程

1.本技术涉及计算机领域，尤其涉及一种渲染子节点的方法及设备。


背景技术：

2.在微信小程序与网页的开发过程中，页面中展示的节点是以层级(z-index)的形式层叠展示，层级高的节点会盖住层级低的节点，最终呈现出页面。而在实现一些特殊的组件时，如对话框，悬浮卡片等，经常需要该组件跳出当前父节点的层级限制，展示在最顶层。
3.但是由于微信小程序的能力限制，开发者无法自由控制节点的创建，致使在h5网页中经常使用的reactdom.createportalapi无法使用，从而难以控制及维护对话框、悬浮卡片等组件的交互。


技术实现要素：

4.本技术的一个目的是提供一种渲染子节点的方法及设备，解决现有技术中微信小程序开发过程中开发者难以自由控制节点创建导致难以控制和维护对话框、悬浮卡片等组件的交互的问题。
5.根据本技术的一个方面，提供了一种渲染子节点的方法，该方法包括：
6.创建门户网页组件，使用所述门户网页组件包裹页面节点；
7.在页面节点中获取用户创建的目标组件，使用门户组件对所述目标组件进行包裹处理；
8.检索门户组件的祖先节点中是否存在门户网页组件，若是，则建立所述门户组件与门户渲染容器组件的链接，通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中；
9.在门户渲染容器组件中完成对所述目标组件的渲染处理。
10.可选地，所述方法还包括：
11.检索门户组件的祖先节点中是否存在门户网页组件，若否，则在页面节点内部完成对目标组件的渲染。
12.可选地，所述方法还包括：
13.在所述门户网页组件中创建门户渲染容器组件和门户管理函数，其中，所述门户管理函数用于存储公共数据。
14.可选地，所述通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中，包括：
15.基于taro框架的react状态管理将所述目标组件存入所述门户管理函数；
16.将所述目标组件从门户管理函数中传递至所述门户渲染容器组件中。
17.可选地，将所述目标组件从门户管理函数中传递至所述门户渲染容器组件中之前，还包括：
18.基于所述门户管理函数对所述目标组件进行数据修改。
19.可选地，所述在页面节点中获取用户创建的目标组件，包括：
20.在页面节点的存储位置中获取公共数据，其中，所述公共数据包括用户注册信息、配置信息或图片信息；
21.从所述公共数据中确定用户创建的目标组件。
22.根据本技术的另一个方面，还提供了一种用于渲染子节点的设备，该设备包括：
23.组件创建模块，用于创建门户网页组件，使用所述门户网页组件包裹页面节点；
24.数据处理模块，用于在页面节点中获取用户创建的目标组件，使用门户组件对所述目标组件进行包裹处理；
25.节点检索模块，用于检索门户组件的祖先节点中是否存在门户网页组件，若是，则建立所述门户组件与门户渲染容器组件的链接，通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中；
26.数据渲染模块，用于在门户渲染容器组件中完成对所述目标组件的渲染处理。
27.根据本技术的再一个方面，还提供了一种计算机可读介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行以实现如前述任一项所述的方法。
28.根据本技术的又一个方面，还提供了一种用于渲染子节点的设备，该设备包括：
29.一个或多个处理器；以及
30.存储有计算机可读指令的存储器，所述计算机可读指令在被执行时使所述处理器执行如前述任一项所述方法的操作。
31.与现有技术相比，本技术通过创建门户网页组件，使用所述门户网页组件包裹页面节点；在页面节点中获取用户创建的目标组件，使用门户组件对所述目标组件进行包裹处理；检索门户组件的祖先节点中是否存在门户网页组件，若是，则建立所述门户组件与门户渲染容器组件的链接，通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中；在门户渲染容器组件中完成对所述目标组件的渲染处理。通过使用react的状态管理机制，从而使开发者可以在taro框架中将子节点渲染到父组件之外的节点中，跳出其容器，方便开发人员对节点层级、超出隐藏等效果的控制。
附图说明
32.通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本技术的其它特征、目的和优点将会变得更明显：
33.图1示出根据本技术的一个方面提供的一种渲染子节点的方法流程示意图；
34.图2示出了本技术一可选实施例中的一种渲染子节点的方法流程示意图；
35.图3示出了本技术一可选实施例中的一种渲染子节点的方法流程示意图；
36.图4示出了根据本技术另一方面提出的一种用于渲染子节点的设备框架结构图。
37.附图中相同或相似的附图标记代表相同或相似的部件。
具体实施方式
38.下面结合附图对本技术作进一步详细描述。
39.在本技术一个典型的配置中，终端、服务网络的设备和可信方均包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。
40.内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flash ram)。内存是计算机可读介质的示例。
41.计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
42.在微信小程序与网页的开发过程中，页面中展示的节点是以层级(z-index)的形式层叠展示，层级高的节点会盖住层级低的节点，最终呈现出页面。而在实现一些特殊的组件时，如对话框，悬浮卡片等，经常需要该组件跳出当前父节点的层级限制，展示在最顶层。
43.taro框架是一个跨平台开发框架，可将一套react代码编译为微信小程序、h5网页等多种环境可运行的页面代码。本技术通过使用react的状态管理机制，将需要渲染到父组件之外的子节点通过数据的传递，脱离了组件的束缚，渲染到外层节点，实现了将子节点渲染至父组件之外的功能；由于不涉及到节点的创建操作，同时兼容了微信小程序环境与浏览器环境，并且通过对功能的封装，使该功能使用简便，极大的提高了前端开发人员的开发效率与质量。
44.图1示出根据本技术的一个方面提供的一种渲染子节点的方法流程示意图，该方法包括：s100～s400，其中，在s100中，创建门户网页组件，使用所述门户网页组件包裹页面节点；在s200中，在页面节点中获取用户创建的目标组件，使用门户组件对所述目标组件进行包裹处理；在s300中，检索门户组件的祖先节点中是否存在门户网页组件，若是，则建立所述门户组件与门户渲染容器组件的链接，通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中；在s400中，在门户渲染容器组件中完成对所述目标组件的渲染处理。从而将需要渲染到父组件之外的子节点通过数据的传递，实现子节点脱离组件束缚，渲染到外层节点的效果；由于不涉及到节点的创建操作，同时兼容了微信小程序环境与浏览器环境；并且通过对功能的封装，使该功能使用简便，极大的提高了前端开发人员的开发效率与质量。
45.具体地，在s100中，创建门户网页组件，使用所述门户网页组件包裹页面节点。在此，所述门户网页组件可以为protalpage组件，所述页面节点为page节点，使用protalpage组件包裹page节点，以便于后续将目标组件所在的子节点传送至外层，实现跳出页面层级限制的效果。
46.在s200中，在页面节点中获取用户创建的目标组件，使用门户组件对所述目标组件进行包裹处理。在此，所述门户组件为protal组件，可以在页面节点内部创建该门户组件。接着，从页面节点中获取用户创建好的目标组件，可以从页面节点的存储位置获取用户创建的目标组件，例如业务组件，使用门户组件对所述目标组件进行包裹处理。在本技术一实际应用场景中，使用者会在页面节点(page)中创建业务组件作为目标组件，并且为了使
其脱离页面节点的层级限制，使用protal组件对业务组件进行包裹。
47.在s300中，检索门户组件的祖先节点中是否存在门户网页组件，若是，则建立所述门户组件与门户渲染容器组件的链接，通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中。在此，从所述门户组件(protal组件)开始向其祖先节点进行搜索是否存在门户网页组件(protalpage组件)，若是，则自动建立所述门户组件(protal组件)与门户渲染容器组件(protalcontainer组件)的链接，自动通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中，用于后续对目标组件进行渲染。
48.在s400中，在门户渲染容器组件中完成对所述目标组件的渲染处理。在此，通过使用门户网页组件(protalpage组件)包裹整个页面节点，然后使用所述门户组件(protal组件)包裹目标组件，例如弹窗节点，可以将原本处于页面节点下的目标组件渲染搭配页面节点之外，从而脱离层级的限制。从而将需要渲染到父组件之外的子节点通过数据的传递，实现子节点脱离组件束缚，渲染到外层节点的效果；由于不涉及到节点的创建操作，同时兼容了微信小程序环境与浏览器环境。
49.在本技术一可选实施例中，所述目标组件为弹窗节点，用户可以自由控制弹窗的层级而不用考虑父级节点的层级对其的影响。
50.需要说明的是，上述标号仅用于标识步骤，不代表上述步骤的执行顺序。
51.在本技术一可选实施例中，检索门户组件的祖先节点中是否存在门户网页组件，若否，则在页面节点内部完成对目标组件的渲染。在此，当门户组件的祖先节点中不存在门户网页组件时，可以使用数据渲染模块400直接在页面节点内部完成对目标组件的渲染处理，不影响组件开发过程。
52.在本技术一可选实施例中，在所述门户网页组件中创建门户渲染容器组件和门户管理函数，其中，所述门户管理函数用于存储公共数据。在此，可以使用组件创建模块100在所述门户网页组件中创建门户渲染容器组件(protalcontainer组件)和门户管理函数(usereducer)，在此，protalcontainer组件用于后续目标组件的渲染，而usereducer可以跨组件存储公共数据，用于管理目标组件的渲染。
53.图2示出了本技术一可选实施例中的一种渲染子节点的方法流程示意图，将整个渲染子节点的多个组件封装成为一个自动化工具，其中，所述自动化工具由protal、protalpage、protalcontainer三个react组件组成。通过react提供的状态管理功能usereduce功能,page中存在公共存储数据，可以为用户注册数据、配置信息等。将公共存储数据包裹在protal中经由usereducer功能进行数据修改，例如图片修改，然后传输到protalcontainer中完成渲染并进行展示。从而将被protal组件包裹的目标组件对应的子节点传送到外层protalpage下的protalcontainer中，跳出页面page的层级限制。并且通过对功能的封装，使本方案得到的自动化工具使用简便，极大的提高了前端开发人员的开发效率与质量。
54.在本技术一可选实施例中，在s300中，基于taro框架的react状态管理将所述目标组件存入所述门户管理函数；将所述目标组件从门户管理函数中传递至所述门户渲染容器组件中。在此，taro框架是一个跨平台开发框架，可将一套react代码编译为微信小程序、h5网页等多种环境可运行的页面代码。但是，由于微信小程序的能力限制，开发者无法自由控制节点的创建，这导致了通常在h5网页中使用的reactdom.createportalapi无法使用，从
而难以控制及维护对话框、悬浮卡片等组件的交互。可以通过使用react的状态管理机制，将需要渲染到父组件之外的子节点(即目标组件)存入所述门户管理函数(usereducer)，将所述目标组件从门户管理函数(usereducer)中传递至所述门户渲染容器组件(protalcontainer组件)中，使得目标组件脱离了page组件的层级束缚，渲染到外层节点；由于不涉及到节点的创建操作，同时兼容了微信小程序环境与浏览器环境；并且通过对功能的封装，使该功能使用简便，极大的提高了前端开发人员的开发效率与质量。
55.在本技术一可选实施例中，当门户组件(protal组件)卸载时，可以使用数据处理模块200删除公共数据存储位置中对应的目标组件。
56.在本技术一可选实施例中，将所述目标组件从门户管理函数中传递至所述门户渲染容器组件中之前，基于所述门户管理函数对所述目标组件进行数据修改。在此，可经由节点检索模块300通过门户管理函数(usereducer)修改公共数据，其中，所述公共数据可以为共享数据，可以通过usereducer对目标组件进行存储、修改、删除等操作。
57.在本技术一可选实施例中，在s200中，在页面节点的存储位置中获取公共数据，其中，所述公共数据包括用户注册信息、配置信息或图片信息；从所述公共数据中确定用户创建的目标组件。在此，page组件中存在公共存储数据，存储位置为公共存储store，可以为用户注册数据、配置信息等。将公共存储数据包裹在protal组件中经由门户管理函数，比如usereducer，对公共存储数据进行数据修改，例如公共存储数据为图片时，可以对图片进行修改，然后传输到protalcontainer中完成渲染并进行展示。
58.图3示出了本技术一可选实施例中的一种渲染子节点的方法流程示意图。使用者创建protalpage(门户网页)组件，包裹页面page节点。本工具由门户组件(protal)、门户网页组件(protalpage)和门户渲染容器组件(protalcontainer)三个react组件组成。通过react提供的状态管理功能usereduce功能,可以将被protal包裹的子节点传送到外层protalpage下的protalcontainer中，跳出页面page节点的层级限制。本工具将自动在protalpage中创建protalcontainer组件，用于后续业务组件的渲染；并且创建usereducer跨组件存储公共数据，用于管理业务组件的渲染。使用者，例如开发人员，在页面page节点中创建自己的业务组件a，并且为了使其脱离页面page节点的影响，使用protal组件对所述业务组件a进行包裹。
59.接着，本工具将从protal组件开始向祖先节点中搜索是否存在protalpage组件，如果祖先节点中存在protalpage组件，则本工具会自动将protal组件与protalpage组件中的usereducer建立链接，使业务组件可以通过usereducer传递到protalcontainer组件中，并渲染到protalcontainer中，实现业务组件a脱离page的层级限制的目的；如果祖先节点中不存在protalpage组件，则会终止后续流程，在page节点中渲染业务组件a，不产生其他影响。从而基于taro框架的react状态管理机制，将需要渲染到父组件之外的子节点通过数据的传递，实现子节点脱离组件束缚，渲染到外层节点的效果；由于不涉及到节点的创建操作，同时兼容了微信小程序环境与浏览器环境；并且通过对功能的封装，使该功能使用简便，极大的提高了前端开发人员的开发效率与质量。
60.在本技术一可选实施例中，在实际应用场景下，页面中包含节点1与节点2。其中节点1的层级zindex为20，层级2的层级zindex为10。此时在页面的渲染过程中，节点1会覆盖于节点2的上层。但是此时需要在节点2中加入业务组件弹窗a。因为弹窗a的层级会受父级
节点影响，弹窗a自身层级失去效果，所以弹窗a也会被节点1所覆盖。因为父节点2的影响，造成弹窗节点a被层级更高的节点1覆盖，未能展示完整。使用本技术改造代码：首先创建protalpage组件包裹整个页面，然后使用protal组件包裹需要摆脱父级曾经影响的组件——弹窗节点a；接着将弹窗节点a通过react的usereducer传递至protalcontainer中完成渲染，使得弹窗摆脱了父级层级对其影响，正常展示在页面中。
61.在本技术一可选实施例中，在taro框架中实现将子节点渲染到父组件外的工具方法的部分声明如下：
62.[0063][0064]
本技术实施例还提供了一种计算机可读介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行以实现前述一种渲染子节点的方法。
[0065]
与上文所述的方法相对应的，本技术还提供一种终端，其包括能够执行上述图1或图2或图3或各个实施例所述的方法步骤的模块或单元，这些模块或单元可以通过硬件、软
件或软硬结合的方式来实现，本技术并不限定。例如，在本技术一实施例中，还提供了一种用于渲染子节点的设备，其中，所述设备包括：
[0066]
一个或多个处理器；以及
[0067]
存储有计算机可读指令的存储器，所述计算机可读指令在被执行时使所述处理器执行前述所述一种渲染子节点的方法的操作。
[0068]
例如，计算机可读指令在被执行时使所述一个或多个处理器：
[0069]
创建门户网页组件，使用所述门户网页组件包裹页面节点；在页面节点中获取用户创建的目标组件，使用门户组件对所述目标组件进行包裹处理；检索门户组件的祖先节点中是否存在门户网页组件，若是，则建立所述门户组件与门户渲染容器组件的链接，通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中；在门户渲染容器组件中完成对所述目标组件的渲染处理。
[0070]
图4示出了根据本技术另一方面提出的一种用于渲染子节点的设备框架结构图，该设备包括：组件创建模块100，用于创建门户网页组件，使用所述门户网页组件包裹页面节点；数据处理模块200，用于在页面节点中获取用户创建的目标组件，使用门户组件对所述目标组件进行包裹处理；节点检索模块300，用于检索门户组件的祖先节点中是否存在门户网页组件，若是，则建立所述门户组件与门户渲染容器组件的链接，通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中；数据渲染模块400，用于在门户渲染容器组件中完成对所述目标组件的渲染处理。从而将需要渲染到父组件之外的子节点通过数据的传递，实现子节点脱离组件束缚，渲染到外层节点的效果；由于不涉及到节点的创建操作，同时兼容了微信小程序环境与浏览器环境；并且通过对功能的封装，使该功能使用简便，极大的提高了前端开发人员的开发效率与质量。
[0071]
需要说明的是，所述组件创建模块100、数据处理模块200、节点检索模块300和数据渲染模块400执行的内容分别与上述步骤s100、s200、s300和s400中的内容相同或相应相同，为简明起见，在此不再赘述。
[0072]
显然，本领域的技术人员可以对本技术进行各种改动和变型而不脱离本技术的精神和范围。这样，倘若本技术的这些修改和变型属于本技术权利要求及其等同技术的范围之内，则本技术也意图包含这些改动和变型在内。
[0073]
需要注意的是，本技术可在软件和/或软件与硬件的组合体中被实施，例如，可采用专用集成电路(asic)、通用目的计算机或任何其他类似硬件设备来实现。在一个实施例中，本技术的软件程序可以通过处理器执行以实现上文所述步骤或功能。同样地，本技术的软件程序(包括相关的数据结构)可以被存储到计算机可读记录介质中，例如，ram存储器，磁或光驱动器或软磁盘及类似设备。另外，本技术的一些步骤或功能可采用硬件来实现，例如，作为与处理器配合从而执行各个步骤或功能的电路。
[0074]
另外，本技术的一部分可被应用为计算机程序产品，例如计算机程序指令，当其被计算机执行时，通过该计算机的操作，可以调用或提供根据本技术的方法和/或技术方案。而调用本技术的方法的程序指令，可能被存储在固定的或可移动的记录介质中，和/或通过广播或其他信号承载媒体中的数据流而被传输，和/或被存储在根据所述程序指令运行的计算机设备的工作存储器中。在此，根据本技术的一个实施例包括一个装置，该装置包括用于存储计算机程序指令的存储器和用于执行程序指令的处理器，其中，当该计算机程序指
令被该处理器执行时，触发该装置运行基于前述根据本技术的多个实施例的方法和/或技术方案。
[0075]
对于本领域技术人员而言，显然本技术不限于上述示范性实施例的细节，而且在不背离本技术的精神或基本特征的情况下，能够以其他的具体形式实现本技术。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本技术的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本技术内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。装置权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。