CN115390838A - 一种渲染子节点的方法及设备 - Google Patents

一种渲染子节点的方法及设备 Download PDF

Info

Publication number
CN115390838A
CN115390838A CN202210879200.3A CN202210879200A CN115390838A CN 115390838 A CN115390838 A CN 115390838A CN 202210879200 A CN202210879200 A CN 202210879200A CN 115390838 A CN115390838 A CN 115390838A
Authority
CN
China
Prior art keywords
portal
component
rendering
page
target
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.)
Pending
Application number
CN202210879200.3A
Other languages
English (en)
Inventor
徐傲
吕文睿
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Wanwu Xinsheng Environmental Technology Group Co
Original Assignee
Shanghai Wanwu Xinsheng Environmental Technology Group Co
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Shanghai Wanwu Xinsheng Environmental Technology Group Co filed Critical Shanghai Wanwu Xinsheng Environmental Technology Group Co
Priority to CN202210879200.3A priority Critical patent/CN115390838A/zh
Publication of CN115390838A publication Critical patent/CN115390838A/zh
Pending legal-status Critical Current

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
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • 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/36—Software reuse
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本申请的目的是提供一种渲染子节点的方法及设备，本申请通过创建门户网页组件，使用所述门户网页组件包裹页面节点；在页面节点中获取用户创建的目标组件，使用门户组件对所述目标组件进行包裹处理；检索门户组件的祖先节点中是否存在门户网页组件，若是，则建立所述门户组件与门户渲染容器组件的链接，通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中；在门户渲染容器组件中完成对所述目标组件的渲染处理。通过使用react的状态管理机制，从而使开发者可以在taro框架中将子节点渲染到父组件之外的节点中，跳出其容器，方便开发人员对节点层级、超出隐藏等效果的控制。

Description

一种渲染子节点的方法及设备
技术领域
本申请涉及计算机领域，尤其涉及一种渲染子节点的方法及设备。
背景技术
在微信小程序与网页的开发过程中，页面中展示的节点是以层级(z-index)的形式层叠展示，层级高的节点会盖住层级低的节点，最终呈现出页面。而在实现一些特殊的组件时，如对话框，悬浮卡片等，经常需要该组件跳出当前父节点的层级限制，展示在最顶层。
但是由于微信小程序的能力限制，开发者无法自由控制节点的创建，致使在h5网页中经常使用的ReactDOM.createPortalapi无法使用，从而难以控制及维护对话框、悬浮卡片等组件的交互。
发明内容
本申请的一个目的是提供一种渲染子节点的方法及设备，解决现有技术中微信小程序开发过程中开发者难以自由控制节点创建导致难以控制和维护对话框、悬浮卡片等组件的交互的问题。
根据本申请的一个方面，提供了一种渲染子节点的方法，该方法包括：
创建门户网页组件，使用所述门户网页组件包裹页面节点；
在页面节点中获取用户创建的目标组件，使用门户组件对所述目标组件进行包裹处理；
检索门户组件的祖先节点中是否存在门户网页组件，若是，则建立所述门户组件与门户渲染容器组件的链接，通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中；
在门户渲染容器组件中完成对所述目标组件的渲染处理。
可选地，所述方法还包括：
检索门户组件的祖先节点中是否存在门户网页组件，若否，则在页面节点内部完成对目标组件的渲染。
可选地，所述方法还包括：
在所述门户网页组件中创建门户渲染容器组件和门户管理函数，其中，所述门户管理函数用于存储公共数据。
可选地，所述通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中，包括：
基于taro框架的react状态管理将所述目标组件存入所述门户管理函数；
将所述目标组件从门户管理函数中传递至所述门户渲染容器组件中。
可选地，将所述目标组件从门户管理函数中传递至所述门户渲染容器组件中之前，还包括：
基于所述门户管理函数对所述目标组件进行数据修改。
可选地，所述在页面节点中获取用户创建的目标组件，包括：
在页面节点的存储位置中获取公共数据，其中，所述公共数据包括用户注册信息、配置信息或图片信息；
从所述公共数据中确定用户创建的目标组件。
根据本申请的另一个方面，还提供了一种用于渲染子节点的设备，该设备包括：
组件创建模块，用于创建门户网页组件，使用所述门户网页组件包裹页面节点；
数据处理模块，用于在页面节点中获取用户创建的目标组件，使用门户组件对所述目标组件进行包裹处理；
节点检索模块，用于检索门户组件的祖先节点中是否存在门户网页组件，若是，则建立所述门户组件与门户渲染容器组件的链接，通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中；
数据渲染模块，用于在门户渲染容器组件中完成对所述目标组件的渲染处理。
根据本申请的再一个方面，还提供了一种计算机可读介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行以实现如前述任一项所述的方法。
根据本申请的又一个方面，还提供了一种用于渲染子节点的设备，该设备包括：
一个或多个处理器；以及
存储有计算机可读指令的存储器，所述计算机可读指令在被执行时使所述处理器执行如前述任一项所述方法的操作。
与现有技术相比，本申请通过创建门户网页组件，使用所述门户网页组件包裹页面节点；在页面节点中获取用户创建的目标组件，使用门户组件对所述目标组件进行包裹处理；检索门户组件的祖先节点中是否存在门户网页组件，若是，则建立所述门户组件与门户渲染容器组件的链接，通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中；在门户渲染容器组件中完成对所述目标组件的渲染处理。通过使用react的状态管理机制，从而使开发者可以在taro框架中将子节点渲染到父组件之外的节点中，跳出其容器，方便开发人员对节点层级、超出隐藏等效果的控制。
附图说明
通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：
图1示出根据本申请的一个方面提供的一种渲染子节点的方法流程示意图；
图2示出了本申请一可选实施例中的一种渲染子节点的方法流程示意图；
图3示出了本申请一可选实施例中的一种渲染子节点的方法流程示意图；
图4示出了根据本申请另一方面提出的一种用于渲染子节点的设备框架结构图。
附图中相同或相似的附图标记代表相同或相似的部件。
具体实施方式
下面结合附图对本申请作进一步详细描述。
在本申请一个典型的配置中，终端、服务网络的设备和可信方均包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
在微信小程序与网页的开发过程中，页面中展示的节点是以层级(z-index)的形式层叠展示，层级高的节点会盖住层级低的节点，最终呈现出页面。而在实现一些特殊的组件时，如对话框，悬浮卡片等，经常需要该组件跳出当前父节点的层级限制，展示在最顶层。
Taro框架是一个跨平台开发框架，可将一套react代码编译为微信小程序、h5网页等多种环境可运行的页面代码。本申请通过使用react的状态管理机制，将需要渲染到父组件之外的子节点通过数据的传递，脱离了组件的束缚，渲染到外层节点，实现了将子节点渲染至父组件之外的功能；由于不涉及到节点的创建操作，同时兼容了微信小程序环境与浏览器环境，并且通过对功能的封装，使该功能使用简便，极大的提高了前端开发人员的开发效率与质量。
图1示出根据本申请的一个方面提供的一种渲染子节点的方法流程示意图，该方法包括：S100～S400，其中，在S100中，创建门户网页组件，使用所述门户网页组件包裹页面节点；在S200中，在页面节点中获取用户创建的目标组件，使用门户组件对所述目标组件进行包裹处理；在S300中，检索门户组件的祖先节点中是否存在门户网页组件，若是，则建立所述门户组件与门户渲染容器组件的链接，通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中；在S400中，在门户渲染容器组件中完成对所述目标组件的渲染处理。从而将需要渲染到父组件之外的子节点通过数据的传递，实现子节点脱离组件束缚，渲染到外层节点的效果；由于不涉及到节点的创建操作，同时兼容了微信小程序环境与浏览器环境；并且通过对功能的封装，使该功能使用简便，极大的提高了前端开发人员的开发效率与质量。
具体地，在S100中，创建门户网页组件，使用所述门户网页组件包裹页面节点。在此，所述门户网页组件可以为ProtalPage组件，所述页面节点为Page节点，使用ProtalPage组件包裹Page节点，以便于后续将目标组件所在的子节点传送至外层，实现跳出页面层级限制的效果。
在S200中，在页面节点中获取用户创建的目标组件，使用门户组件对所述目标组件进行包裹处理。在此，所述门户组件为Protal组件，可以在页面节点内部创建该门户组件。接着，从页面节点中获取用户创建好的目标组件，可以从页面节点的存储位置获取用户创建的目标组件，例如业务组件，使用门户组件对所述目标组件进行包裹处理。在本申请一实际应用场景中，使用者会在页面节点(Page)中创建业务组件作为目标组件，并且为了使其脱离页面节点的层级限制，使用Protal组件对业务组件进行包裹。
在S300中，检索门户组件的祖先节点中是否存在门户网页组件，若是，则建立所述门户组件与门户渲染容器组件的链接，通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中。在此，从所述门户组件(Protal组件)开始向其祖先节点进行搜索是否存在门户网页组件(ProtalPage组件)，若是，则自动建立所述门户组件(Protal组件)与门户渲染容器组件(ProtalContainer组件)的链接，自动通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中，用于后续对目标组件进行渲染。
在S400中，在门户渲染容器组件中完成对所述目标组件的渲染处理。在此，通过使用门户网页组件(ProtalPage组件)包裹整个页面节点，然后使用所述门户组件(Protal组件)包裹目标组件，例如弹窗节点，可以将原本处于页面节点下的目标组件渲染搭配页面节点之外，从而脱离层级的限制。从而将需要渲染到父组件之外的子节点通过数据的传递，实现子节点脱离组件束缚，渲染到外层节点的效果；由于不涉及到节点的创建操作，同时兼容了微信小程序环境与浏览器环境。
在本申请一可选实施例中，所述目标组件为弹窗节点，用户可以自由控制弹窗的层级而不用考虑父级节点的层级对其的影响。
需要说明的是，上述标号仅用于标识步骤，不代表上述步骤的执行顺序。
在本申请一可选实施例中，检索门户组件的祖先节点中是否存在门户网页组件，若否，则在页面节点内部完成对目标组件的渲染。在此，当门户组件的祖先节点中不存在门户网页组件时，可以使用数据渲染模块400直接在页面节点内部完成对目标组件的渲染处理，不影响组件开发过程。
在本申请一可选实施例中，在所述门户网页组件中创建门户渲染容器组件和门户管理函数，其中，所述门户管理函数用于存储公共数据。在此，可以使用组件创建模块100在所述门户网页组件中创建门户渲染容器组件(ProtalContainer组件)和门户管理函数(useReducer)，在此，ProtalContainer组件用于后续目标组件的渲染，而useReducer可以跨组件存储公共数据，用于管理目标组件的渲染。
图2示出了本申请一可选实施例中的一种渲染子节点的方法流程示意图，将整个渲染子节点的多个组件封装成为一个自动化工具，其中，所述自动化工具由Protal、ProtalPage、ProtalContainer三个react组件组成。通过react提供的状态管理功能useReduce功能,page中存在公共存储数据，可以为用户注册数据、配置信息等。将公共存储数据包裹在protal中经由useReducer功能进行数据修改，例如图片修改，然后传输到protalcontainer中完成渲染并进行展示。从而将被Protal组件包裹的目标组件对应的子节点传送到外层ProtalPage下的ProtalContainer中，跳出页面Page的层级限制。并且通过对功能的封装，使本方案得到的自动化工具使用简便，极大的提高了前端开发人员的开发效率与质量。
在本申请一可选实施例中，在S300中，基于taro框架的react状态管理将所述目标组件存入所述门户管理函数；将所述目标组件从门户管理函数中传递至所述门户渲染容器组件中。在此，Taro框架是一个跨平台开发框架，可将一套react代码编译为微信小程序、h5网页等多种环境可运行的页面代码。但是，由于微信小程序的能力限制，开发者无法自由控制节点的创建，这导致了通常在h5网页中使用的ReactDOM.createPortalapi无法使用，从而难以控制及维护对话框、悬浮卡片等组件的交互。可以通过使用react的状态管理机制，将需要渲染到父组件之外的子节点(即目标组件)存入所述门户管理函数(useReducer)，将所述目标组件从门户管理函数(useReducer)中传递至所述门户渲染容器组件(ProtalContainer组件)中，使得目标组件脱离了Page组件的层级束缚，渲染到外层节点；由于不涉及到节点的创建操作，同时兼容了微信小程序环境与浏览器环境；并且通过对功能的封装，使该功能使用简便，极大的提高了前端开发人员的开发效率与质量。
在本申请一可选实施例中，当门户组件(Protal组件)卸载时，可以使用数据处理模块200删除公共数据存储位置中对应的目标组件。
在本申请一可选实施例中，将所述目标组件从门户管理函数中传递至所述门户渲染容器组件中之前，基于所述门户管理函数对所述目标组件进行数据修改。在此，可经由节点检索模块300通过门户管理函数(useReducer)修改公共数据，其中，所述公共数据可以为共享数据，可以通过useReducer对目标组件进行存储、修改、删除等操作。
在本申请一可选实施例中，在S200中，在页面节点的存储位置中获取公共数据，其中，所述公共数据包括用户注册信息、配置信息或图片信息；从所述公共数据中确定用户创建的目标组件。在此，Page组件中存在公共存储数据，存储位置为公共存储store，可以为用户注册数据、配置信息等。将公共存储数据包裹在Protal组件中经由门户管理函数，比如useReducer，对公共存储数据进行数据修改，例如公共存储数据为图片时，可以对图片进行修改，然后传输到ProtalContainer中完成渲染并进行展示。
图3示出了本申请一可选实施例中的一种渲染子节点的方法流程示意图。使用者创建ProtalPage(门户网页)组件，包裹页面Page节点。本工具由门户组件(Protal)、门户网页组件(ProtalPage)和门户渲染容器组件(ProtalContainer)三个react组件组成。通过react提供的状态管理功能useReduce功能,可以将被Protal包裹的子节点传送到外层ProtalPage下的ProtalContainer中，跳出页面Page节点的层级限制。本工具将自动在ProtalPage中创建ProtalContainer组件，用于后续业务组件的渲染；并且创建useReducer跨组件存储公共数据，用于管理业务组件的渲染。使用者，例如开发人员，在页面Page节点中创建自己的业务组件A，并且为了使其脱离页面Page节点的影响，使用Protal组件对所述业务组件A进行包裹。
接着，本工具将从Protal组件开始向祖先节点中搜索是否存在ProtalPage组件，如果祖先节点中存在ProtalPage组件，则本工具会自动将Protal组件与ProtalPage组件中的useReducer建立链接，使业务组件可以通过useReducer传递到ProtalContainer组件中，并渲染到ProtalContainer中，实现业务组件A脱离Page的层级限制的目的；如果祖先节点中不存在ProtalPage组件，则会终止后续流程，在Page节点中渲染业务组件A，不产生其他影响。从而基于Taro框架的react状态管理机制，将需要渲染到父组件之外的子节点通过数据的传递，实现子节点脱离组件束缚，渲染到外层节点的效果；由于不涉及到节点的创建操作，同时兼容了微信小程序环境与浏览器环境；并且通过对功能的封装，使该功能使用简便，极大的提高了前端开发人员的开发效率与质量。
在本申请一可选实施例中，在实际应用场景下，页面中包含节点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中完成渲染，使得弹窗摆脱了父级层级对其影响，正常展示在页面中。
在本申请一可选实施例中，在Taro框架中实现将子节点渲染到父组件外的工具方法的部分声明如下：
Figure BDA0003763570560000101
Figure BDA0003763570560000111
本申请实施例还提供了一种计算机可读介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行以实现前述一种渲染子节点的方法。
与上文所述的方法相对应的，本申请还提供一种终端，其包括能够执行上述图1或图2或图3或各个实施例所述的方法步骤的模块或单元，这些模块或单元可以通过硬件、软件或软硬结合的方式来实现，本申请并不限定。例如，在本申请一实施例中，还提供了一种用于渲染子节点的设备，其中，所述设备包括：
一个或多个处理器；以及
存储有计算机可读指令的存储器，所述计算机可读指令在被执行时使所述处理器执行前述所述一种渲染子节点的方法的操作。
例如，计算机可读指令在被执行时使所述一个或多个处理器：
创建门户网页组件，使用所述门户网页组件包裹页面节点；在页面节点中获取用户创建的目标组件，使用门户组件对所述目标组件进行包裹处理；检索门户组件的祖先节点中是否存在门户网页组件，若是，则建立所述门户组件与门户渲染容器组件的链接，通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中；在门户渲染容器组件中完成对所述目标组件的渲染处理。
图4示出了根据本申请另一方面提出的一种用于渲染子节点的设备框架结构图，该设备包括：组件创建模块100，用于创建门户网页组件，使用所述门户网页组件包裹页面节点；数据处理模块200，用于在页面节点中获取用户创建的目标组件，使用门户组件对所述目标组件进行包裹处理；节点检索模块300，用于检索门户组件的祖先节点中是否存在门户网页组件，若是，则建立所述门户组件与门户渲染容器组件的链接，通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中；数据渲染模块400，用于在门户渲染容器组件中完成对所述目标组件的渲染处理。从而将需要渲染到父组件之外的子节点通过数据的传递，实现子节点脱离组件束缚，渲染到外层节点的效果；由于不涉及到节点的创建操作，同时兼容了微信小程序环境与浏览器环境；并且通过对功能的封装，使该功能使用简便，极大的提高了前端开发人员的开发效率与质量。
需要说明的是，所述组件创建模块100、数据处理模块200、节点检索模块300和数据渲染模块400执行的内容分别与上述步骤S100、S200、S300和S400中的内容相同或相应相同，为简明起见，在此不再赘述。
显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。
需要注意的是，本申请可在软件和/或软件与硬件的组合体中被实施，例如，可采用专用集成电路(ASIC)、通用目的计算机或任何其他类似硬件设备来实现。在一个实施例中，本申请的软件程序可以通过处理器执行以实现上文所述步骤或功能。同样地，本申请的软件程序(包括相关的数据结构)可以被存储到计算机可读记录介质中，例如，RAM存储器，磁或光驱动器或软磁盘及类似设备。另外，本申请的一些步骤或功能可采用硬件来实现，例如，作为与处理器配合从而执行各个步骤或功能的电路。
另外，本申请的一部分可被应用为计算机程序产品，例如计算机程序指令，当其被计算机执行时，通过该计算机的操作，可以调用或提供根据本申请的方法和/或技术方案。而调用本申请的方法的程序指令，可能被存储在固定的或可移动的记录介质中，和/或通过广播或其他信号承载媒体中的数据流而被传输，和/或被存储在根据所述程序指令运行的计算机设备的工作存储器中。在此，根据本申请的一个实施例包括一个装置，该装置包括用于存储计算机程序指令的存储器和用于执行程序指令的处理器，其中，当该计算机程序指令被该处理器执行时，触发该装置运行基于前述根据本申请的多个实施例的方法和/或技术方案。
对于本领域技术人员而言，显然本申请不限于上述示范性实施例的细节，而且在不背离本申请的精神或基本特征的情况下，能够以其他的具体形式实现本申请。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本申请的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本申请内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。装置权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。

Claims (9)

1.一种渲染子节点的方法，其中，所述方法包括：
创建门户网页组件，使用所述门户网页组件包裹页面节点；
在页面节点中获取用户创建的目标组件，使用门户组件对所述目标组件进行包裹处理；
检索门户组件的祖先节点中是否存在门户网页组件，若是，则建立所述门户组件与门户渲染容器组件的链接，通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中；
在门户渲染容器组件中完成对所述目标组件的渲染处理。
2.根据权利要求1所述的方法，其中，所述方法还包括：
检索门户组件的祖先节点中是否存在门户网页组件，若否，则在页面节点内部完成对目标组件的渲染。
3.根据权利要求1所述的方法，其中，所述方法还包括：
在所述门户网页组件中创建门户渲染容器组件和门户管理函数，其中，所述门户管理函数用于存储公共数据。
4.根据权利要求3所述的方法，其中，所述通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中，包括：
基于taro框架的react状态管理将所述目标组件存入所述门户管理函数；
将所述目标组件从门户管理函数中传递至所述门户渲染容器组件中。
5.根据权利要求4所述的方法，其中，将所述目标组件从门户管理函数中传递至所述门户渲染容器组件中之前，还包括：
基于所述门户管理函数对所述目标组件进行数据修改。
6.根据权利要求1所述的方法，其中，所述在页面节点中获取用户创建的目标组件，包括：
在页面节点的存储位置中获取公共数据，其中，所述公共数据包括用户注册信息、配置信息或图片信息；
从所述公共数据中确定用户创建的目标组件。
7.一种用于渲染子节点的设备，其中，所述设备包括：
组件创建模块，用于创建门户网页组件，使用所述门户网页组件包裹页面节点；
数据处理模块，用于在页面节点中获取用户创建的目标组件，使用门户组件对所述目标组件进行包裹处理；
节点检索模块，用于检索门户组件的祖先节点中是否存在门户网页组件，若是，则建立所述门户组件与门户渲染容器组件的链接，通过所述门户组件将所述目标组件传递至所述门户渲染容器组件中；
数据渲染模块，用于在门户渲染容器组件中完成对所述目标组件的渲染处理。
8.一种计算机可读介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行以实现如权利要求1至6中任一项所述的方法。
9.一种用于渲染子节点的设备，其中，所述设备包括：
一个或多个处理器；以及
存储有计算机可读指令的存储器，所述计算机可读指令在被执行时使所述处理器执行如权利要求1至6中任一项所述方法的操作。
CN202210879200.3A 2022-07-25 2022-07-25 一种渲染子节点的方法及设备 Pending CN115390838A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210879200.3A CN115390838A (zh) 2022-07-25 2022-07-25 一种渲染子节点的方法及设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210879200.3A CN115390838A (zh) 2022-07-25 2022-07-25 一种渲染子节点的方法及设备

Publications (1)

Publication Number Publication Date
CN115390838A true CN115390838A (zh) 2022-11-25

Family

ID=84116723

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210879200.3A Pending CN115390838A (zh) 2022-07-25 2022-07-25 一种渲染子节点的方法及设备

Country Status (1)

Country Link
CN (1) CN115390838A (zh)

Similar Documents

Publication Publication Date Title
CN106445518A (zh) 一种跨平台移动终端应用程序开发方法及系统
CN110007920B (zh) 一种获取代码依赖关系的方法、装置及电子设备
CN106354483B (zh) 一种数据处理方法、装置及电子设备
CN112395098B (zh) 应用程序接口调用方法、装置、存储介质和电子设备
CN109460546A (zh) 表单生成方法、装置及电子设备
CN110362547A (zh) 日志文件的编码、解析、存储方法和装置
CN110213105A (zh) 一种跨平台微应用创建方法
CN117093224A (zh) 一种支持TypeScript智能感知的代码编辑方法、设备及介质
CN111209028B (zh) 一种数据处理方法、装置、电子设备及存储介质
CN111124525A (zh) 一种网站功能实现方法和装置
CN117648083A (zh) 一种基于Javascript SDK的多渠道接入方法、设备及介质
CN115390838A (zh) 一种渲染子节点的方法及设备
CN115981650A (zh) 一种网站搭建方法及装置、电子设备、存储介质
CN115390835A (zh) 一种小程序标签化搜索框的构建方法及设备
CN112199080B (zh) vuejs项目webpack构建方法及设备
CN110554867A (zh) 一种应用程序的处理方法和装置
CN110837367B (zh) 用户界面处理方法、装置及电子设备
CN112486565A (zh) 一种基于容器化的持续集成的方法及设备
CN110837896B (zh) 机器学习模型的存储和调用方法、装置
CN116595284B (zh) 网页系统运行方法、装置、设备、存储介质和程序
CN115543323B (zh) 一种页面开发方法及装置
CN111241538B (zh) 一种保护节点对象变量的方法、装置、介质和电子设备
CN110968709B (zh) 数据传输方法及相关系统
CN115729539A (zh) 用于代码开发的模板文件生成方法、装置、设备及介质
CN118733288A (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