CN117616394A - 混合渲染应用系统、渲染方法、电子设备和存储介质 - Google Patents
混合渲染应用系统、渲染方法、电子设备和存储介质 Download PDFInfo
- Publication number
- CN117616394A CN117616394A CN202280004152.1A CN202280004152A CN117616394A CN 117616394 A CN117616394 A CN 117616394A CN 202280004152 A CN202280004152 A CN 202280004152A CN 117616394 A CN117616394 A CN 117616394A
- Authority
- CN
- China
- Prior art keywords
- tree
- layout
- framework
- dom
- node
- 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
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 87
- 238000000034 method Methods 0.000 title claims abstract description 23
- 230000006870 function Effects 0.000 claims abstract description 50
- 238000012545 processing Methods 0.000 claims abstract description 37
- 230000003993 interaction Effects 0.000 claims abstract description 31
- 230000004044 response Effects 0.000 claims abstract description 24
- 238000013507 mapping Methods 0.000 claims description 26
- 230000002452 interceptive effect Effects 0.000 claims description 20
- 230000006854 communication Effects 0.000 claims description 13
- 238000004891 communication Methods 0.000 claims description 13
- 230000006978 adaptation Effects 0.000 claims description 9
- 238000004590 computer program Methods 0.000 claims description 8
- 238000007726 management method Methods 0.000 description 12
- 238000010586 diagram Methods 0.000 description 10
- 239000008186 active pharmaceutical agent Substances 0.000 description 9
- 238000005516 engineering process Methods 0.000 description 5
- 230000001133 acceleration Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 2
- 230000008859 change Effects 0.000 description 2
- 238000010276 construction Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 238000007792 addition Methods 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000007175 bidirectional communication Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000007812 deficiency Effects 0.000 description 1
- 201000001098 delayed sleep phase syndrome Diseases 0.000 description 1
- 208000033921 delayed sleep phase type circadian rhythm sleep disease Diseases 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 235000019800 disodium phosphate Nutrition 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 239000011521 glass Substances 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 239000007788 liquid Substances 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000008569 process Effects 0.000 description 1
- 238000007789 sealing Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
- 239000010409 thin film Substances 0.000 description 1
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本公开是关于一种混合渲染应用系统、渲染方法、电子设备和存储介质。该系统包括JS框架、原生框架和渲染引擎；所述JS框架具有应用生命周期管理功能和应用逻辑处理功能；原生框架具有UI树管理功能；UI树包括DOM树、Widget树和Layout树；所述原生框架包括构建接口API，用于响应于所述JS框架的请求创建和/或更新所述UI树中的DOM树、Widget树和Layout树；以及响应于检测到对用户界面的交互操作向所述JS框架发送交互操作事件；所述JS框架包括回调请求接口API，用于响应于所述原生框架检测到的交互操作事件，以更新所述UI树；所述渲染引擎用于根据所述原生框架输出的Widget树执行渲染并生成用户界面。本实施例可降低混合渲染应用系统所占用内存的大小，降低对内存的占用量。
Description
本公开涉及控制技术领域，尤其涉及一种混合渲染应用系统、渲染方法、电子设备和存储介质。
目前，现有的混合渲染应用框架是为智能手机或者笔记本等内存较大的设备而设计，上述混合渲染应用框架为每个应用程序渲染时，通常单个应用需要消耗数十及到上百兆字节大小的内存。当电子设备的内存只有数十兆字节时通常无法使用上述混合渲染应用框架。
在实现本公开方案的过程中，发明人发现：现有的混合渲染应用框架中分为JS框架和原生框架，JS框架具有UI树构建与更新等管理功能等。在JS框架创建UI树(即DOM树)时，需要占用较大的内存。加之，上述JS框架通常使用V8引擎，该VS引擎通常也会占据较大的内存。最终，混合渲染应用框架无法应用到内存较小的电子设备。
发明内容
本公开提供一种混合渲染应用系统、渲染方法、电子设备和存储介质，以解决相关技术的不足。
根据本公开实施例的第一方面，提供一种混合渲染应用系统，所述系统包括JS框架、原生框架和渲染引擎；所述JS框架具有应用生命周期管理功能和应用逻辑处理功能；所述原生框架具有UI树管理功能；其中，所述UI树包括DOM树、Widget树和Layout树；
所述原生框架包括构建接口API，用于响应于所述JS框架的请求创建和/或更新所述UI树中的DOM树、Widget树和Layout树；以及响应于检测到对用户界面的交互操作向所述JS框架发送交互操作事件；
所述JS框架包括回调请求接口API，用于响应于所述原生框架检测到的交互操作事件，以更新所述UI树；
所述渲染引擎用于根据所述原生框架输出的Widget树执行渲染并生成用户界面。
可选地，所述原生框架创建UI树，包括：
创建初始DOM树；所述初始DOM树包括多个DOM节点；
为所述初始DOM树的每个DOM节点创建Widget映射，获得Widget树；所述Widget映射包括所述DOM节点与所述Widget对象之间的映射关系以及所述Widget对象与所述Widget对象之间的映射关系；
创建所述Widget树对应的Layout树；
遍历所述Layout树中的布局节点并对所述布局节点进行布局处理，得到布局结果；
将所述布局结果同步到所述Widget树的样式属性；
将所述Widget树发送给所述原生框架内的渲染引擎，以使所述渲染引擎执行渲染操作。
可选地，为所述初始DOM树的每个DOM节点创建Widget映射，包括：
当所述DOM节点为动态节点时，从JS引擎的观察者获取新值；根据所述新值创建DOM子树；为所述DOM子树的DOM节点创建Widget映射；重复从JS引擎的观察者获取新值的步骤，直至不满足所述动态节点的条件为止。
可选地，遍历所述Layout树中的布局节点并对所述布局节点进行布局处理，包括：
当所述布局节点的父节点不参加网页布局时，获取所述父节点对应元素的尺寸；所述父节点对应元素的尺寸为预设尺寸；根据所述预设尺寸对所述布局节点进行布局处理；或者，
当所述布局节点的父节点参与网页布局时，对所述父节点进行标记处理；当所述父节点外部布局完成后获得所述父节点对应元素的尺寸时，对所述布局节点进行布局处理。
可选地，所述原生框架更新所述UI树，包括：
当创建用户界面时，在所述UI树的DOM节点上进行交互回调注册，得到所述DOM节点对应的回调函数句柄；
当检测到触发所述用户界面的交互操作时，通知所述交互操作对应的目标DOM节点；
根据所述交互操作对应的操作类型查找回调函数句柄；当检测到回调函数句柄时，触发JS框架执行具体的回调函数；
获取所述JS框架发送的更新通知，并根据所述更新通知更新所述UI树的结构和/或内容。
可选地，所述系统还包括引擎适配层；所述引擎适配层与所述JS引擎通信，用于适配不同类型的JS引擎。
根据本公开实施例的第二方面，提供一种混合渲染方法，应用于电子设备，所述电子设备设置有混合渲染应用系统，所述系统包括JS框架、原生框架和渲染引擎；所述方法包括：
所述原生框架响应于所述JS框架的请求创建和/或更新UI树，所述UI树包括DOM树、Widget树和Layout树；以及响应于检测到对用户界面的交互操作向所述JS框架发送交互操作事件；
所述JS框架响应于所述原生框架检测到的交互操作事件输出更新通知，以更新所述UI树；
所述渲染引擎用于根据所述原生框架输出的Widget树执行渲染并生成用户界面。
可选地，所述原生框架创建UI树，包括：
响应于来自所述JS引擎的创建请求创建初始DOM树；所述初始DOM树包括多个DOM节点；
为所述初始DOM树的每个DOM节点创建Widget映射，获得Widget树；所述Widget映射包括所述DOM节点与所述Widget对象之间的映射关系以及所述Widget对象与所述Widget对象之间的映射关系；
创建所述Widget树对应的Layout树；
遍历所述Layout树中的布局节点并对所述布局节点进行布局处理，得到布局结果；
将所述布局结果同步到所述Widget树的样式属性；
将所述Widget树发送给所述原生框架内的渲染引擎，以使所述渲染引擎执行渲染操作。
可选地，为所述初始DOM树的每个DOM节点创建Widget映射，包括：
当所述DOM节点为动态节点时，从JS引擎的观察者获取新值；根据所述新值创建DOM子树；为所述DOM子树的DOM节点创建Widget映射；重复从JS引擎的观察者 获取新值的步骤，直至不满足所述动态节点的条件为止。
可选地，遍历所述Layout树中的布局节点并对所述布局节点进行布局处理，包括：
当所述布局节点的父节点不参加网页布局时，获取所述父节点对应元素的尺寸；所述父节点对应元素的尺寸为预设尺寸；根据所述预设尺寸对所述布局节点进行布局处理；或者，
当所述布局节点的父节点参与网页布局时，对所述父节点进行标记处理；当所述父节点外部布局完成后获得所述父节点对应元素的尺寸时，对所述布局节点进行布局处理。
可选地，所述原生框架更新所述UI树，包括：
当创建用户界面时，在所述UI树的DOM节点上进行交互回调注册，得到所述DOM节点对应的回调函数句柄；
当检测到触发所述用户界面的交互操作时，通知所述交互操作对应的目标DOM节点；
根据所述交互操作对应的操作类型查找回调函数句柄；当检测到回调函数句柄时，触发JS框架执行具体的回调函数；
获取所述JS框架发送的更新通知，并根据所述更新通知更新所述UI树的结构和/或内容。
根据本公开实施例的第三方面，提供一种电子设备，包括：
存储器与处理器；
所述存储器用于存储所述处理器可执行的计算机程序；
所述处理器用于执行所述存储器中的计算机程序，以实现如上述的方法。
根据本公开实施例的第四方面，提供一种非暂态计算机可读存储介质，当所述存储介质中的可执行的计算机程序由处理器执行时，能够实现如上述的方法。
本公开的实施例提供的技术方案可以包括以下有益效果：
由上述实施例可知，本公开实施例提供的混合渲染应用系统，包括JS框架、原生框架和渲染引擎；所述JS框架具有应用生命周期管理功能和应用逻辑处理功能；所述原生框架具有UI树管理功能；其中，所述UI树包括DOM树、Widget树和Layout树；所述原生框架包括构建接口API，用于响应于所述JS框架的请求创建和/或更新所述UI 树中的DOM树、Widget树和Layout树；以及响应于检测到对用户界面的交互操作向所述JS框架发送交互操作事件；所述JS框架包括回调请求接口API，用于响应于所述原生框架检测到的交互操作事件，以更新所述UI树；所述渲染引擎用于根据所述原生框架输出的Widget树执行渲染并生成用户界面。这样，本实施例中将DOM树功能调整到原生框架内处理，因DOM树采用原生语言所占用内存远小于JS语言实现DOM树所占用内存，从而可以降低混合渲染应用系统所占用内存的大小，降低对内存的占用量，提升内存的使用率。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。
图1是根据一示例性实施例示出的一种混合渲染应用系统的结构示意图。
图2是根据一示例性实施例示出的一种混合渲染应用系统构建UI树的信号流程示意图。
图3是根据一示例性实施例示出的一种混合渲染应用系统构建UI树的流程图。
图4是根据一示例性实施例示出的一种初始DOM树的示意图。
图5是根据一示例性实施例示出的一种Widget树的示意图。
图6是根据一示例性实施例示出的一种布局节点的示意图。
图7是根据一示例性实施例示出的一种更新UI树的流程图。
图8是根据一示例性实施例示出的一种电子设备的框图。
这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性所描述的实施例并不代表与本公开相一致的所有实施例。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置例子。需要说明的是，在不冲突的情况 下，下述的实施例及实施方式中的特征可以相互组合。
目前，现有的混合渲染应用框架是为智能手机或者笔记本等内存较大的设备而设计，上述混合渲染应用框架为每个应用程序渲染时，通常单个应用需要消耗数十及到上百兆字节大小的内存。当电子设备的内存只有数十兆字节时通常无法使用上述混合渲染应用框架。
在实现本公开方案的过程中，发明人发现：现有的混合渲染应用框架中分为JS框架和原生框架，JS框架具有UI树构建与更新等管理功能等。在JS框架创建UI树(即DOM树)时，需要占用较大的内存。加之，上述JS框架通常使用V8引擎，该VS引擎通常也会占据较大的内存。最终，混合渲染应用框架无法应用到内存较小的电子设备。
为解决上述技术问题，本公开实施例提供了一种混合渲染应用系统、渲染方法、电子设备和存储介质，图1是根据一示例性实施例示出的一种混合渲染应用系统的结构示意图。参见图1，一种混合渲染应用系统，包括：JS框架、原生框架和渲染引擎；JS框架具有应用生命周期管理功能和应用逻辑处理功能；原生框架具有UI树管理功能；UI树包括DOM树、Widget树和Layout树。原生框架包括构建接口API，用于响应于JS框架的请求创建和/或更新UI树中的DOM树、Widget树和Layout树；以及响应于检测到对用户界面(即UI界面)的交互操作向JS框架发送交互操作事件。JS框架包括回调请求接口API，用于响应于原生框架检测到的交互操作事件，以更新UI树。渲染引擎用于根据原生框架输出的Widget树执行渲染并生成用户界面，例如LVGL引擎、IMGUI引擎和QT引擎等，在此不作限定。
本实施例中，原生框架实现DOM树时，原生框架和JS框架之间应用逻辑和DOM树之间的双向通信，即原始框架提供一组构建接口API和JS框架提供一组回调请求接口API。继续参见图1，原生框架包括应用容器APP Container，该应用容器内设置有Module模块、DOM模块和Widget模块，其中Module模块用于提供应用逻辑处理功能。DOM模块与JS引擎进行双向通信。上述JS引擎提供JS运行环境且JS框架运行在JS引擎之上。
本实施例提供的混合渲染应用系统构建UI树的过程，图2是根据一示例性实施例示出的一种混合渲染应用系统构建UI树的信号流程示意图，图3是根据一示例性实施例示出的一种混合渲染应用系统构建UI树的流程图。参见图2和3，构建UI树包括：
在步骤31中，原生框架可以响应于接收到JS框架中JS引擎的创建请求，创建初始 DOM树，该初始DOM树包括多个DOM节点。参见图4，在一示例中，初始DOM树包括节点Doc、节点Div、(动态)节点for和节点button，并且节点Div的父节点为节点Doc，其子节点分别为节点for和节点button。需要说明的是，上述初始DOM树仅用于示例性说明，并不构成对本公开方案的限定。本步骤中创建初始DOM树可以由原生框架中DOM模块来执行。
在步骤32中，原生框架可以为所述初始DOM树的每个DOM节点创建Widget映射，获得Widget树。
参见图5，在一示例中，初始DOM树中节点Doc对应Widget树中Widget对象场景(scene)。
初始DOM树中节点div对应的Widget树中Widget对象div。由于初始DOM树中节点for是一个动态节点，包括2个文本节点，因此，Widget树中存在2个文本对象与之对应。当初始DOM树中节点为动态节点时，原生框架可以从JS引擎的观察者(负责监听应用数据变化，如增加、删除，修改等，并触发关联的DOM树节点)获取新值，然后根据上述新值创建DOM子树。之后，为DOM子树的DOM节点创建Widget映射；重复从JS引擎的观察者获取新值的步骤，直至不满足所述动态节点的条件为止，如超出节点for中循环的最大值。
初始DOM树中节点button对应的Widget树中Widget对象button。并且，上述Widget树同时具有DOM树中节点间的映射关系，因此上述Widget映射包括所述DOM节点与所述Widget对象之间的映射关系以及所述Widget对象与所述Widget对象之间的映射关系。本步骤中创建Widget树可以由原生框架中Widget模块来执行。
在步骤33中，原生框架可以创建所述Widget树对应的Layout树。其中，创建Layout树和创建Widget树的原理类似，在Widget树的某一个Widget对象创建完成后可以同步创建布局节点(即layout节点)。参见图6，在一示例中创建widget对象div后，可以创建该widget对象div对应的布局节点Layout node div，该布局节点Layout node div包括三个子节点Layout node Text。当所有widget对象div对应的布局节点均创建布局节点后，结合Widget树中widget对象的映射关系可以生成Layout树。本步骤中创建Layout树可以由原生框架中Widget模块来执行。
在步骤34中，原生框架可以遍历所述Layout树中的布局节点并对所述布局节点进行布局处理，得到布局结果。上述布局结果包括节点的尺寸和位置，如节点的宽度、高 度和左上角的位置。
当布局节点的父节点不参加网页布局(Flex布局)时，原生框架可以获取父节点对应元素(如文本、图片、控件等等)的尺寸；其中，父节点对应元素的尺寸为预设尺寸，包括屏幕尺寸和预设尺寸(小于屏幕尺寸)，然后根据所述预设尺寸对所述布局节点进行布局处理。或者，当布局节点的父节点参与网页布局时，此时父节点对应元素的尺寸是未知的，因此对父节点进行标记处理；当所述父节点外部布局完成后获得所述父节点对应元素的尺寸时，再根据父节点对应元素的尺寸对布局节点进行布局处理。本步骤中布局处理可以由原生框架中Widget模块来执行。
在步骤35中，原生框架可以将所述布局结果同步到所述Widget树的样式属性。本步骤中同步布局结果可以由原生框架中Widget模块来执行。
在步骤36中，原生框架可以将所述Widget树发送给所述原生框架内的渲染引擎，以使所述渲染引擎执行渲染操作。本步骤中发送Widget树可以由原生框架中Widget模块来执行。
在一实施例中，原生框架可以更新UI树，参见图7，包括：
在步骤71中，当创建用户界面时，原生框架可以在UI树的DOM节点上进行交互回调注册，得到所述DOM节点对应的回调函数句柄。例如，DOM节点为一个图像节点(image节点)，此时可以注册一个点击(click)回调函数句柄。本步骤中回调注册可以由原生框架中DOM模块来执行。
在步骤72中，当检测到触发所述用户界面的交互操作时，通知所述交互操作对应的目标DOM节点。原生框架可以检测用户界面的交互操作，当检测到触发用户界面的交互操作时可以生成一个事件，并将上述事件发送给JS引擎。本步骤中检测交互操作和通知可以由原生框架中Widget模块来执行。
在步骤73中，原生框架可以根据所述交互操作对应的操作类型查找回调函数句柄；当检测到回调函数句柄时，触发JS框架执行具体的回调函数。本步骤中查找回调函数句柄可以由原生框架中DOM模块来执行。
在步骤74中，原生框架可以获取所述JS框架发送的更新通知，并根据所述更新通知更新所述UI树的结构和/或内容。本步骤中查找回调函数句柄可以由原生框架中DOM模块来执行。
在一实施例中，JS引擎可以配合原生框架更新UI树，包括：当接收到原生框架发 送的交互操作的事件时，查询上述事件的操作类型，并根据上述操作类型来回调函数。当查询到回调函数后可以调用上述回调函数，从而对DOM树进行更新操作，如增加节点、删除节点、更新节点属性等，这些更新操作会带来数据变化，因此JS引擎可以生成更新通知并发送给原生框架。原生框架根据上述更新通知更新DOM树，并且更新Widget树和Layout树。
在一实施例中，继续参见图1，本实施例提供的混合渲染应用系统还包括引擎适配层JSI。该引擎适配层JSI与JS引擎通信，用于适配不同类型的JS引擎。例如，JS引擎可以为V8引擎、QuickJS引擎、Duktape引擎和JerryScript引擎等，引擎适配层JSI通过将JS API封闭为统一格式，可以在上述多种JS引擎之间无缝切换，达到替换为轻量级引擎的效果。
这样，与相关技术中JS框架设置DOM树管理相比较，本实施例中原生框架设置DOM树管理功能时DOM树可采用原生语言实现，此时DOM树所占用内存量会极大降低，从相关技术中的数十兆字节降至几数兆字节，有利于提升内存的使用率。或者说，本实施例提供的混合渲染应用系统因占用内存较小，可以适用于内存资源较少的电子设备，如智能手表、智能手环、智能眼镜等设备，从而扩大混合渲染应用系统的适用范围。
在本公开实施例提供的一种混合渲染应用系统的基础上，本公开实施例还提供了一种混合渲染方法，应用于电子设备，所述电子设备设置有混合渲染应用系统，所述系统包括JS框架、原生框架和渲染引擎；所述方法包括：
所述原生框架响应于所述JS框架的请求创建和/或更新UI树，所述UI树包括DOM树、Widget树和Layout树；以及响应于检测到对用户界面的交互操作向所述JS框架发送交互操作事件；
所述JS框架响应于所述原生框架检测到的交互操作事件输出更新通知，以更新所述UI树；
所述渲染引擎用于根据所述原生框架输出的Widget树执行渲染并生成用户界面。
在一实施例中，所述原生框架创建UI树，包括：
响应于来自所述JS引擎的创建请求创建初始DOM树；所述初始DOM树包括多个DOM节点；
为所述初始DOM树的每个DOM节点创建Widget映射，获得Widget树；所述Widget映射包括所述DOM节点与所述Widget对象之间的映射关系以及所述Widget对象与所 述Widget对象之间的映射关系；
创建所述Widget树对应的Layout树；
遍历所述Layout树中的布局节点并对所述布局节点进行布局处理，得到布局结果；
将所述布局结果同步到所述Widget树的样式属性；
将所述Widget树发送给所述原生框架内的渲染引擎，以使所述渲染引擎执行渲染操作。
在一实施例中，为所述初始DOM树的每个DOM节点创建Widget映射，包括：
当所述DOM节点为动态节点时，从JS引擎的观察者获取新值；根据所述新值创建DOM子树；为所述DOM子树的DOM节点创建Widget映射；重复从JS引擎的观察者获取新值的步骤，直至不满足所述动态节点的条件为止。
在一实施例中，遍历所述Layout树中的布局节点并对所述布局节点进行布局处理，包括：
当所述布局节点的父节点不参加网页布局时，获取所述父节点对应元素的尺寸；所述父节点对应元素的尺寸为预设尺寸；根据所述预设尺寸对所述布局节点进行布局处理；或者，
当所述布局节点的父节点参与网页布局时，对所述父节点进行标记处理；当所述父节点外部布局完成后获得所述父节点对应元素的尺寸时，对所述布局节点进行布局处理。
在一实施例中，所述原生框架更新所述UI树，包括：
当创建用户界面时，在所述UI树的DOM节点上进行交互回调注册，得到所述DOM节点对应的回调函数句柄；
当检测到触发所述用户界面的交互操作时，通知所述交互操作对应的目标DOM节点；
根据所述交互操作对应的操作类型查找回调函数句柄；当检测到回调函数句柄时，触发JS框架执行具体的回调函数；
获取所述JS框架发送的更新通知，并根据所述更新通知更新所述UI树的结构和/或内容。
需要说明的是，本实施例中示出的方法与系统实施例的内容相匹配，可以参考上述系统实施例的内容，在此不再赘述。
图8是根据一示例性实施例示出的一种电子设备的框图。例如，电子设备800可以是智能手机，计算机，数字广播终端，平板设备，医疗设备，健身设备，个人数字助理等。
参照图8，电子设备800可以包括以下一个或多个组件：处理组件802，存储器804，电源组件806，多媒体组件808，音频组件810，输入/输出(I/O)的接口812，传感器组件814，通信组件816，图像采集组件818。
处理组件802通常控制电子设备800的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件802可以包括一个或多个处理器820来执行计算机程序。此外，处理组件802可以包括一个或多个模块，便于处理组件802和其他组件之间的交互。例如，处理组件802可以包括多媒体模块，以方便多媒体组件808和处理组件802之间的交互。
存储器804被配置为存储各种类型的数据以支持在电子设备800的操作。这些数据的示例包括用于在电子设备800上操作的任何应用程序或方法的计算机程序，联系人数据，电话簿数据，消息，图片，视频等。存储器804可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。
电源组件806为电子设备800的各种组件提供电力。电源组件806可以包括电源管理系统，一个或多个电源，及其他与为电子设备800生成、管理和分配电力相关联的组件。电源组件806可以包括电源芯片，控制器可以电源芯片通信，从而控制电源芯片导通或者断开开关器件，使电池向主板电路供电或者不供电。
多媒体组件808包括在电子设备800和目标对象之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示屏(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自目标对象的输入信息。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与触摸或滑动操作相关的持续时间和压力。
音频组件810被配置为输出和/或输入音频文件信息。例如，音频组件810包括 一个麦克风(MIC)，当电子设备800处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频文件信息。所接收的音频文件信息可以被进一步存储在存储器804或经由通信组件816发送。在一些实施例中，音频组件810还包括一个扬声器，用于输出音频文件信息。
I/O接口812为处理组件802和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。
传感器组件814包括一个或多个传感器，用于为电子设备800提供各个方面的状态评估。例如，传感器组件814可以检测到电子设备800的打开/关闭状态，组件的相对定位，例如组件为电子设备800的显示屏和小键盘，传感器组件814还可以检测电子设备800或一个组件的位置改变，目标对象与电子设备800接触的存在或不存在，电子设备800方位或加速/减速和电子设备800的温度变化。本示例中，传感器组件814可以包括磁力传感器、陀螺仪和磁场传感器，其中磁场传感器包括以下至少一种：霍尔传感器、薄膜磁致电阻传感器、磁性液体加速度传感器。
通信组件816被配置为便于电子设备800和其他设备之间有线或无线方式的通信。电子设备800可以接入基于通信标准的无线网络，如WiFi，2G、3G、4G、5G，或它们的组合。在一个示例性实施例中，通信组件816经由广播信道接收来自外部广播管理系统的广播信息或广播相关信息。在一个示例性实施例中，通信组件816还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。
在示例性实施例中，电子设备800可以被一个或多个应用专用集成电路(ASIC)、数字信息处理器(DSP)、数字信息处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现。
在示例性实施例中，还提供了一种非暂态计算机可读存储介质，例如包括指令的存储器804，上述可执行的计算机程序可由处理器执行。其中，可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。
本领域技术人员在考虑说明书及实践这里公开的公开后，将容易想到本公开的其它实施方案。本公开旨在涵盖任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识 或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。
应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。
Claims (13)
- 一种混合渲染应用系统，其特征在于，所述系统包括JS框架、原生框架和渲染引擎；所述JS框架具有应用生命周期管理功能和应用逻辑处理功能；所述原生框架具有UI树管理功能；其中，所述UI树包括DOM树、Widget树和Layout树；所述原生框架包括构建接口API，用于响应于所述JS框架的请求创建和/或更新所述UI树中的DOM树、Widget树和Layout树；以及响应于检测到对用户界面的交互操作向所述JS框架发送交互操作事件；所述JS框架包括回调请求接口API，用于响应于所述原生框架检测到的交互操作事件，以更新所述UI树；所述渲染引擎用于根据所述原生框架输出的Widget树执行渲染并生成用户界面。
- 根据权利要求1所述的系统，其特征在于，所述原生框架创建UI树，包括：创建初始DOM树；所述初始DOM树包括多个DOM节点；为所述初始DOM树的每个DOM节点创建Widget映射，获得Widget树；所述Widget映射包括所述DOM节点与所述Widget对象之间的映射关系以及所述Widget对象与所述Widget对象之间的映射关系；创建所述Widget树对应的Layout树；遍历所述Layout树中的布局节点并对所述布局节点进行布局处理，得到布局结果；将所述布局结果同步到所述Widget树的样式属性；将所述Widget树发送给所述原生框架内的渲染引擎，以使所述渲染引擎执行渲染操作。
- 根据权利要求2所述的系统，其特征在于，为所述初始DOM树的每个DOM节点创建Widget映射，包括：当所述DOM节点为动态节点时，从JS引擎的观察者获取新值；根据所述新值创建DOM子树；为所述DOM子树的DOM节点创建Widget映射；重复从JS引擎的观察者获取新值的步骤，直至不满足所述动态节点的条件为止。
- 根据权利要求1所述的系统，其特征在于，遍历所述Layout树中的布局节点并对所述布局节点进行布局处理，包括：当所述布局节点的父节点不参加网页布局时，获取所述父节点对应元素的尺寸；所述父节点对应元素的尺寸为预设尺寸；根据所述预设尺寸对所述布局节点进行布局处理；或者，当所述布局节点的父节点参与网页布局时，对所述父节点进行标记处理；当所述父 节点外部布局完成后获得所述父节点对应元素的尺寸时，对所述布局节点进行布局处理。
- 根据权利要求1所述的系统，其特征在于，所述原生框架更新所述UI树，包括：当创建用户界面时，在所述UI树的DOM节点上进行交互回调注册，得到所述DOM节点对应的回调函数句柄；当检测到触发所述用户界面的交互操作时，通知所述交互操作对应的目标DOM节点；根据所述交互操作对应的操作类型查找回调函数句柄；当检测到回调函数句柄时，触发JS框架执行具体的回调函数；获取所述JS框架发送的更新通知，并根据所述更新通知更新所述UI树的结构和/或内容。
- 根据权利要求1所述的系统，其特征在于，所述系统还包括引擎适配层；所述引擎适配层与所述JS引擎通信，用于适配不同类型的JS引擎。
- 一种混合渲染方法，其特征在于，应用于电子设备，所述电子设备设置有混合渲染应用系统，所述系统包括JS框架、原生框架和渲染引擎；所述方法包括：所述原生框架响应于所述JS框架的请求创建和/或更新UI树，所述UI树包括DOM树、Widget树和Layout树；以及响应于检测到对用户界面的交互操作向所述JS框架发送交互操作事件；所述JS框架响应于所述原生框架检测到的交互操作事件输出更新通知，以更新所述UI树；所述渲染引擎用于根据所述原生框架输出的Widget树执行渲染并生成用户界面。
- 根据权利要求7所述的方法，其特征在于，所述原生框架创建UI树，包括：响应于来自所述JS引擎的创建请求创建初始DOM树；所述初始DOM树包括多个DOM节点；为所述初始DOM树的每个DOM节点创建Widget映射，获得Widget树；所述Widget映射包括所述DOM节点与所述Widget对象之间的映射关系以及所述Widget对象与所述Widget对象之间的映射关系；创建所述Widget树对应的Layout树；遍历所述Layout树中的布局节点并对所述布局节点进行布局处理，得到布局结果；将所述布局结果同步到所述Widget树的样式属性；将所述Widget树发送给所述原生框架内的渲染引擎，以使所述渲染引擎执行渲染操作。
- 根据权利要求8所述的方法，其特征在于，为所述初始DOM树的每个DOM节点创建Widget映射，包括：当所述DOM节点为动态节点时，从JS引擎的观察者获取新值；根据所述新值创建DOM子树；为所述DOM子树的DOM节点创建Widget映射；重复从JS引擎的观察者获取新值的步骤，直至不满足所述动态节点的条件为止。
- 根据权利要求7所述的方法，其特征在于，遍历所述Layout树中的布局节点并对所述布局节点进行布局处理，包括：当所述布局节点的父节点不参加网页布局时，获取所述父节点对应元素的尺寸；所述父节点对应元素的尺寸为预设尺寸；根据所述预设尺寸对所述布局节点进行布局处理；或者，当所述布局节点的父节点参与网页布局时，对所述父节点进行标记处理；当所述父节点外部布局完成后获得所述父节点对应元素的尺寸时，对所述布局节点进行布局处理。
- 根据权利要求7所述的方法，其特征在于，所述原生框架更新所述UI树，包括：当创建用户界面时，在所述UI树的DOM节点上进行交互回调注册，得到所述DOM节点对应的回调函数句柄；当检测到触发所述用户界面的交互操作时，通知所述交互操作对应的目标DOM节点；根据所述交互操作对应的操作类型查找回调函数句柄；当检测到回调函数句柄时，触发JS框架执行具体的回调函数；获取所述JS框架发送的更新通知，并根据所述更新通知更新所述UI树的结构和/或内容。
- 一种电子设备，其特征在于，包括：存储器与处理器；所述存储器用于存储所述处理器可执行的计算机程序；所述处理器用于执行所述存储器中的计算机程序，以实现如权利要求7～11任一项所述的方法。
- 一种非暂态计算机可读存储介质，其特征在于，当所述存储介质中的可执行的计算机程序由处理器执行时，能够实现如权利要求7～11任一项所述的方法。
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| PCT/CN2022/099931 WO2023245367A1 (zh) | 2022-06-20 | 2022-06-20 | 混合渲染应用系统、渲染方法、电子设备和存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117616394A true CN117616394A (zh) | 2024-02-27 |
Family
ID=89379001
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202280004152.1A Pending CN117616394A (zh) | 2022-06-20 | 2022-06-20 | 混合渲染应用系统、渲染方法、电子设备和存储介质 |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN117616394A (zh) |
| WO (1) | WO2023245367A1 (zh) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117539491B (zh) * | 2024-01-09 | 2024-04-26 | 腾讯科技（深圳）有限公司 | 页面布局方法、装置、电子设备、存储介质及程序产品 |
Family Cites Families (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20090091563A1 (en) * | 2006-05-05 | 2009-04-09 | Electronics Arts Inc. | Character animation framework |
| US11074338B2 (en) * | 2018-10-23 | 2021-07-27 | Citrix Systems, Inc. | Local secure rendering of web content |
| CN111158818B (zh) * | 2019-12-24 | 2023-12-01 | 中国建设银行股份有限公司 | 一种页面渲染方法和装置 |
| CN114510231A (zh) * | 2020-11-17 | 2022-05-17 | 腾讯科技（深圳）有限公司 | 应用构建方法、装置、设备及计算机可读存储介质 |
| CN113742014A (zh) * | 2021-08-11 | 2021-12-03 | 深圳Tcl新技术有限公司 | 界面渲染方法、装置、电子设备及存储介质 |
-
2022
- 2022-06-20 CN CN202280004152.1A patent/CN117616394A/zh active Pending
- 2022-06-20 WO PCT/CN2022/099931 patent/WO2023245367A1/zh active Application Filing
Also Published As
| Publication number | Publication date |
|---|---|
| WO2023245367A1 (zh) | 2023-12-28 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20220342850A1 (en) | Data transmission method and related device | |
| US10847122B2 (en) | Method and apparatus for updating information | |
| CN110119296B (zh) | 切换父页面和子页面的方法、相关装置 | |
| US10909203B2 (en) | Method and device for improving page display effect via execution, conversion and native layers | |
| EP3964937A1 (en) | Method for generating user profile photo, and electronic device | |
| WO2021110133A1 (zh) | 一种控件的操作方法及电子设备 | |
| CN109976861B (zh) | 交互界面显示方法、装置及存储介质 | |
| CN111225108A (zh) | 一种通信终端及负屏界面的卡片显示方法 | |
| WO2021175272A1 (zh) | 一种应用信息的显示方法及相关设备 | |
| US20220342706A1 (en) | Method for data processing and apparatus, and electronic device | |
| EP4280058A1 (en) | Information display method and electronic device | |
| US20210165670A1 (en) | Method, apparatus for adding shortcut plug-in, and intelligent device | |
| EP3236355B1 (en) | Method and apparatus for managing task of instant messaging application | |
| CN117616394A (zh) | 混合渲染应用系统、渲染方法、电子设备和存储介质 | |
| US11210449B2 (en) | Page display method and device and storage medium | |
| US20230236714A1 (en) | Cross-Device Desktop Management Method, First Electronic Device, and Second Electronic Device | |
| CN114298000A (zh) | 基于应用的笔记生成方法、设备、存储介质及程序产品 | |
| CN112000408B (zh) | 移动终端及其显示方法 | |
| KR102038424B1 (ko) | 상황 인지 기반의 컨텐츠 타이틀 제공 방법 및 장치 | |
| CN108829473B (zh) | 事件响应方法、装置及存储介质 | |
| CN112306702B (zh) | 数据共享方法、装置、电子设备及储存介质 | |
| CN112988822A (zh) | 数据查询方法、装置、设备、可读存储介质以及产品 | |
| US11755177B2 (en) | Method and apparatus for adjusting window, electronic device, and computer readable storage medium | |
| CN111857452A (zh) | 界面显示方法、装置及存储介质 | |
| CN114281440B (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 |