CN113742014A - 界面渲染方法、装置、电子设备及存储介质 - Google Patents
界面渲染方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN113742014A CN113742014A CN202110921014.7A CN202110921014A CN113742014A CN 113742014 A CN113742014 A CN 113742014A CN 202110921014 A CN202110921014 A CN 202110921014A CN 113742014 A CN113742014 A CN 113742014A
- Authority
- CN
- China
- Prior art keywords
- interface
- rendering
- view container
- target application
- application
- 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 264
- 238000000034 method Methods 0.000 title claims abstract description 59
- 238000013461 design Methods 0.000 claims abstract description 19
- 238000010276 construction Methods 0.000 claims abstract description 7
- 238000004590 computer program Methods 0.000 claims 3
- 238000011161 development Methods 0.000 abstract description 25
- 238000010586 diagram Methods 0.000 description 8
- 230000006870 function Effects 0.000 description 8
- 230000000007 visual effect Effects 0.000 description 7
- 238000004806 packaging method and process Methods 0.000 description 6
- 238000004891 communication Methods 0.000 description 3
- 241000220225 Malus Species 0.000 description 2
- 230000003044 adaptive effect Effects 0.000 description 2
- 238000006243 chemical reaction Methods 0.000 description 2
- 238000012217 deletion Methods 0.000 description 2
- 230000037430 deletion Effects 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 238000012423 maintenance Methods 0.000 description 2
- 238000007726 management method Methods 0.000 description 2
- 238000005259 measurement Methods 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 238000004458 analytical method Methods 0.000 description 1
- 235000021016 apples Nutrition 0.000 description 1
- 238000013473 artificial intelligence Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 238000007599 discharging Methods 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
Images
Classifications
-
- 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
-
- 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/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
本申请实施例公开了一种界面渲染方法、装置、电子设备及存储介质，包括：创建至少一个视图容器；根据插件在视图容器内构建目标应用的至少一个功能组件及每个功能组件所对应的业务逻辑；从移动终端系统的原生层中获取目标应用的用户界面渲染文件；根据原生层加载至少一个视图容器，根据视图容器中功能组件、业务逻辑、以及用户界面渲染文件对目标应用进行界面渲染；通过终端系统的原生层对移动应用的界面进行布局设计和渲染，提高了插件式应用界面渲染的流畅性；其中，通过插件式的功能组件和业务逻辑的构建，提高了移动应用跨平台开发的效率。
Description
技术领域
本申请涉及计算机技术领域，具体涉及一种界面渲染方法、装置、电子设备及存储介质。
背景技术
随着计算机技术的发展以及移动终端设备的普及，移动终端应用市场越来越大，移动应用的种类越来越多，能够满足人们多种多样的生活需求，但是，随着系统平台的增多，同一应用程序需要在不同系统平台上分别进行开发，造成了开发的负担。
目前，业内主要采用插件式开发(如react native)来解决同一应用程序在不同系统平台间的开发效率问题，通过插件式的转化，使应用程序能够自动适配不同的系统平台，但是，使用插件式开发的方式会使移动应用界面渲染的流畅性较差。
发明内容
本申请实施例提供一种界面渲染方法、装置、电子设备及存储介质，可以提高插件式开发应用界面渲染的流畅性。
本申请实施例提供了一种界面渲染方法，包括：
创建至少一个视图容器；
根据插件在视图容器内构建目标应用的至少一个功能组件及每个功能组件所对应的业务逻辑；
从移动终端系统的原生层中获取目标应用的用户界面渲染文件；
根据原生层加载至少一个视图容器，根据视图容器中功能组件、业务逻辑、以及用户界面渲染文件对目标应用进行界面渲染。
相应的，本申请实施例还提供了一种界面渲染装置，包括：
创建模块，用于创建至少一个视图容器；
构建模块，用于根据插件在视图容器内构建目标应用的至少一个功能组件及每个功能组件所对应的业务逻辑；
获取模块，用于从移动终端系统的原生层中获取目标应用的用户界面渲染文件；
渲染模块，用于根据原生层加载至少一个视图容器，根据视图容器中功能组件、业务逻辑、以及用户界面渲染文件对目标应用进行界面渲染。
可选的，在本申请的一些实施例中，该方法还包括：
构建单元，用于根据插件对目标应用进行局部界面布局设计，得到局部界面渲染文件；
用户界面渲染文件包括整体界面渲染文件，渲染模块包括：
渲染单元，用于根据视图容器中功能组件、业务逻辑以及整体界面渲染文件和局部界面渲染文件对目标应用进行界面渲染。
可选的，在本申请的一些实施例中，渲染单元包括：
调用子单元，用于在目标应用启动后，调用整体界面渲染文件；
第一渲染子单元，用于根据整体界面渲染文件对目标应用的界面进行渲染；
加载单元，用于根据原生层加载至少一个视图容器；
第二渲染子单元，用于根据视图容器中的功能组件、业务逻辑和局部界面渲染文件对目标应用的界面进行再次渲染。
可选的，在本申请的一些实施例中，第二渲染子单元具体用于：
用于对局部界面渲染文件进行解析，得到界面所对应的文档对象模型树以及界面中功能组件所对应的样式；
用于根据文档对象模型树和功能组件所对应的样式对目标应用的界面进行渲染；
用于根据业务逻辑对界面进行数据加载。
可选的，在本申请的一些实施例中，根据文档对象模型树和功能组件所对应的样式对目标应用的界面进行渲染，具体用于：
用于根据原生层对样式进行装载；
用于利用原生层加载装载后的样式和文档对象模型，对目标应用的界面进行绘制。
可选的，在本申请的一些实施例中，渲染模块包括：
注册单元，用于将至少一个视图容器注册到原生层中；
运行单元，用于根据原生层运行至少一个视图容器。
可选的，在本申请的一些实施例中，在渲染模块之前，还包括
获取单元，用于获取业务逻辑所对应的脚本更新数据；
更新单元，根据脚本更新数据对视图容器进行更新。
本申请实施例针对插件式开发的移动应用，通过终端系统的原生层对移动应用的界面进行布局设计和渲染，提高了插件式应用界面渲染的流畅性；其中，通过插件式的功能组件和业务逻辑的构建，提高了移动应用跨平台开发的效率。
附图说明
为了更清楚地说明本申请中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本申请提供的界面渲染方法的场景示意图；
图2是本申请提供的界面渲染方法的流程示意图；
图3是本申请提供的界面渲染方法的界面渲染的流程示意图；
图4是本申请提供的界面渲染方法的另一种界面渲染流程示意图；
图5是本申请提供的界面渲染方法的应用框架结构示意图；
图6是本申请提供的界面渲染方法的业务形态变化示意图
图7是本申请提供的界面渲染装置的结构示意图。
图8是本申请提供的电子设备的结构示意图。
具体实施方式
下面将结合本申请中的附图，对本申请中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本申请实施例提供一种界面渲染方法、装置、电子设备及存储介质。具体地，本申请实施例提供的界面渲染方法可以由电子设备来执行，其中，电子设备包括具有操作系统的终端设备或者服务器；其中，终端设备可以为笔记本、台式机或者平板电脑等；服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(CDN，Content Delivery Network)、以及大数据和人工智能平台等基础云计算服务的云服务器等，服务器可以通过有线或无线通信方式进行直接或间接地连接。
具体地，请参阅图1，本申请实施例以终端设备和服务器共同执行界面渲染方法为例，其中，在终端设备和服务器的基础上也可以增加其他设备来辅助完成界面渲染方法，在此对其他设备的类型不做限定；其中，终端设备和服务器共同执行界面渲染方法的具体过程如下：
在终端设备上，针对目标应用，根据开发工具创建至少一个视图容器，并在视图容器中根据插件构建目标应用的至少一个功能组件以及各个功能组件之间的业务逻辑，然后，从终端设备系统的原生层中获取到用户界面渲染文件，在建立原生层对视图容器的加载后，根据用户界面渲染文件对目标应用进行界面渲染。
其中，功能组件之间的业务逻辑代码可以封装成脚本数据并存储在服务器或者云端，根据服务器或者云端的下发更新目标应用的功能组件之间的业务逻辑，根据业务逻辑和用户界面渲染文件对应用界面进行渲染和展示。
其中，视图容器用来装载插件的代码，例如，装载移动应用的功能组件和业务逻辑代码等，其中，一个视图容器可以对应一个界面，视图容器包括ReactRootView、WebView，在本申请实施例中，视图容器包括ReactRootView。
其中，插件是跨平台移动应用开发框架，根据插件式开发，可以只开发一套代码，通过插件式转化，适配不同的平台系统，在本申请实施例中，插件包括ReactNative。
其中，平台系统包括安卓(Android)或者苹果(IOS)等。
本申请实施例针对插件式开发的移动应用，通过终端系统的原生层对移动应用的界面进行布局设计和渲染，提高了插件式应用界面渲染的流畅性；其中，通过插件式的功能组件和业务逻辑的封装，提高了移动应用跨平台开发的效率，并且，通过插件式开发的方式，可以将业务逻辑代码封装成脚本数据，存储在云端，实现应用的动态更新和扩展。
以下分别进行详细说明。需说明的是，以下实施例的描述顺序不作为对实施例优先顺序的限定。
请参阅图2，图2为本申请实施例提供的界面渲染方法的流程示意图。该界面渲染方法的具体流程可以如下：
101、创建至少一个视图容器。
其中，视图容器用来装载目标应用界面的功能组件及各个功能组件之间的业务逻辑代码，通过视图容器的创建，实现目标应用的功能组件和业务逻辑代码，与目标应用的界面渲染文件的分离。
102、根据插件在视图容器内构建目标应用的至少一个功能组件及每个功能组件所对应的业务逻辑。
其中，功能组件包括界面按钮、菜单、滑动条、进度条或者文本等。
其中，业务逻辑包括点击功能组件后出发的一系列数据操作，包括相应数据的检索查询、添加数据、删除数据等，也包括界面翻页逻辑，界面跳转逻辑等。
根据插件构建的功能组件及功能组件之间的业务逻辑，使目标应用能够适配不同的系统平台，降低开发和运维成本。
103、从移动终端系统的原生层中获取目标应用的用户界面渲染文件。
其中，针对插件式开发的移动应用，为提高应用在各个平台系统中的适配能力，往往根据插件构建移动应用的界面布局文件，但是，根据加载插件构建的界面布局文件对界面的渲染的效果较差，即界面渲染的流畅性较差，影响整体性能。
而移动终端系统原生框架中本身边具备有界面渲染文件，其中，在本申请实施例中，移动终端包括手机，手机系统如安卓(Android)的底层中具备有对应用程序(APP)中界面样式进行布局的渲染文件，且系统原生的渲染文件对应用界面的渲染更流畅，因此，将系统原生的渲染文件作为应用的界面渲染，可以提高应用界面渲染的流畅性。
104、根据原生层加载至少一个视图容器，根据视图容器中功能组件、业务逻辑、以及用户界面渲染文件对目标应用进行界面渲染。
其中，在系统原生框架加载视图容器后，便可以根据视图容器中的功能组件、业务逻辑和原生框架中的渲染文件对目标应用进行界面渲染，即，仍采用插件式的开发方式对应用的功能组件和业务逻辑进行开发，保证应用在各个系统平台的适配能力，并根据系统原生框架的渲染文件对应用的界面进行渲染，可提高应用界面渲染的流畅性。
其中，在对应用进行插件式开发过程中，还可以对应用进行局部的界面设计，利用局部的渲染文件，对应用进行针对性的界面布局，即，可选的，在一些实施例中，该方法还包括：
根据插件对目标应用进行局部界面布局设计，得到局部界面渲染文件；
则，可选的，在一些实施例中，用户界面渲染文件包括整体界面渲染文件，步骤“根据视图容器中功能组件、业务逻辑、以及用户界面渲染文件对目标应用进行界面渲染”，具体可以包括：
根据视图容器中功能组件、业务逻辑以及整体界面渲染文件和局部界面渲染文件对目标应用进行界面渲染。
其中，在本申请实施例中，局部界面渲染文件用于对应用内部的具体样式进行绘制，根据局部界面渲染文件可以针对每个应用，进行各自应用内部的具体界面设计，整体界面渲染文件用于对移动终端上所有应用的整体的界面绘制，其中，整体界面渲染文件还可以理解为对各个应用的基本界面样式的设计，例如，对应用的大框架的界面布局样式的绘制，而局部界面渲染文件可以是针对具体的功能组件进行再次的绘制。
由于，应用在启动后，可直接加载系统原生框架中的整体界面渲染文件，可实现应用整体大框架的界面渲染，随后在应用启动后，针对不同的应用，加载自身利用插件构建的局部界面渲染文件便可以对具体的界面进行绘制，因此，整体界面渲染文件和局部界面渲染文件的设计，增加了应用界面渲染的流畅性，即，可选的，在一些实施例中，步骤“根据视图容器中功能组件、业务逻辑以及整体界面渲染文件和局部界面渲染文件对目标应用进行界面渲染”，包括：
在目标应用启动后，调用整体界面渲染文件；
根据整体界面渲染文件对目标应用的界面进行渲染；
根据原生层加载至少一个视图容器；
根据视图容器中的功能组件、业务逻辑和局部界面渲染文件对目标应用的界面进行再次渲染。
其中，在应用启动后，先调用原生层的整体界面渲染文件，根据原生层的整体界面渲染文件对应用的界面进行整体渲染(基本框架的渲染)，随后，在原生层加载视图容器后，根据视图容器中的局部界面渲染文件对整体渲染后的应用界面进行再次渲染；其中，在应用启动时，根据原生层的整体界面渲染文件对应用界面的渲染，使应用界面能够在第一时间具备界面样式绘制，在局部界面渲染文件渲染后，对应用进行进一步地的渲染，使整个界面渲染更具流畅性，提升应用整体性能，提高用户体验。
其中，在对应用界面进行渲染时，需要对渲染文件进行解析，根据解析结果，确定界面中每个节点(例如功能组件)的位置和尺寸，根据位置和尺寸进行界面的渲染，即，可选的，在一些实施例中，步骤“根据视图容器中的功能组件、业务逻辑和局部界面渲染文件对目标应用的界面进行再次渲染”，包括：
对局部界面渲染文件进行解析，得到界面所对应的文档对象模型树以及界面中功能组件所对应的样式；
根据文档对象模型树和功能组件所对应的样式对目标应用的界面进行渲染；
根据业务逻辑对界面进行数据加载。
其中，文档对象模型树包括文档对象模型视觉树(DOM视觉树)，DOM视觉树中包含有界面的元素、属性和文本，用来描述界面的内容、结构和样式，根据DOM视觉树可确定功能组件的尺寸信息；
其中，根据界面所对应的文档对象模型树和界面中功能组件的样式，便可以对界面进行绘制，实现对界面的渲染。
其中，针对传统的插件式开发应用，界面的渲染是根据插件对界面节点进行测量、布局，然后利用原生框架根据插件测量和布局的数据进行界面绘制，在本申请实施例中，可以利用原生框架对界面节点进行装载，以提高界面渲染的流畅性，即，可选的，在一些实施例中，步骤“根据文档对象模型树和功能组件所对应的样式对目标应用的界面进行渲染”，包括：
根据原生层对样式进行装载；
利用原生层加载装载后的样式和文档对象模型树，对目标应用的界面进行绘制。
其中，请参阅图3，局部界面渲染文件对引用的渲染流程为：
111、通过对渲染文件(如ReactNative JS view)的解析，得到界面节点的文档对象模型树(DOM视觉树)；
112、在原生层加载视图容器后，可根据原生层对界面的功能组件的布局样式进行装载；
113、然后直接由原生层根据节点大小和布局装载结果，对界面进行绘制，实现对界面的渲染，其中，根据原生框架对界面节点的布局装载，可提高界面渲染的流畅性。
其中，请参阅图4，整体界面渲染文件对应用界面的渲染：则按照原生APP渲染流程执行即可，即在APP启动时，触发测量、布局、绘制，最后通知系统渲染到应用界面所在的物理屏幕上，具体的：
121、根据对原生渲染文件(如layout.xml)测量解析，得到界面原生视觉树(js)，遍历计算每个节点(例如各个功能组件)的尺寸；
122、布局遍历(原生布局装载)时会参考尺寸进行位置摆放，算出位置数据；
123、由上述每个节点的位置和尺寸的确定，便可以对每个节点进行遍历，绘制(原生框架绘制)每个节点的内容，实现对界面的整体大框架的绘制与渲染。
其中，原生层对视图容器的加载，可以通过将视图容器注册到原生层中，在原生层启动后，直接加载视图容器，即，可选的，在一些实施例中，步骤“根据原生层加载至少一个视图容器”，包括：
将至少一个视图容器注册到原生层中；
根据原生层运行至少一个视图容器。
其中，将视图容器注册到原生层中后，原生层便可以加载运行视图容器。
其中，插件化开发的应用，如ReactNative项目，都会有一个入口文件，例如index.js，该入口文件用于注册根组件，并提供给原生平台运行，其中，注册根组件可以通过接口实现，例如，应用注册接口(AppRegistry API)，其中，可以调用应用注册(AppRegistry)中的注册组件方法(registerComponent)方法进行视图容器的注册，注册之后，原生平台便可以通过runApplication方法来运行注册过的根组件。
其中，请参阅图5，在本申请实施例中，插件式应用的框架结构为：根据原生框架对应用的界面渲染进行框架设计；根据插件对应用的功能组件和业务逻辑进行封装，得到本地业务代码(ReactNative bussiness code)；根据桥接层建立原生框架与插件层的交互，插件层根据桥接层与原生态交互，获取原生层的原生接口、渲染文件等；其中，在本申请实施例中，原生框架包括安卓原生框架(Android Native)或者苹果原生框架(IOS Native)，将插件的本地库(ReavtNative library)作为桥接层，代表插件是在原生框架的基础上做出的渲染和逻辑封装，解耦平台之间的差异性；
其中，在本申请实施例中，还可以将业务逻辑代码转换为脚本数据，存放在云端，通过云端的脚本更新，动态改变业务形态，即，可选的，在一些实施例中，步骤“根据原生层加载至少一个视图容器之前”，包括：
获取业务逻辑所对应的脚本更新数据；
根据脚本更新数据对视图容器进行更新。
其中，通过将业务逻辑封装成脚本，使项目或者APP在于云端保持连接后，通过云端下载脚本更新数据，便可实现对业务逻辑数据的更新，实现了业务形态的动态改变。例如，从云端下载A业务形态或者B业务形态所对应的脚本数据，对框架中相应的业务逻辑进行替换更新。
其中，开发人员只需要将更新后的脚本更新数据上传到插件的服务器(如ReactNative服务器或者云端服务器)，APP在拉取脚本数据后会缓存起来，待用户在启动APP的时候，进行业务形态的更新，而APP在启动的时候，APP会向插件服务器请求资源包，如果资源包没有更新，则读取本地缓存资源。
例如，请参阅图6，各个视图容器(插件化封装的组件，例如，插件模块A、B…)是嵌入到原生框架中的，在原生框架启动后加载上述嵌入的视图容器，其中，视图容器可以根据不同的脚本数据进行更新，不同的脚本数据对应不同的业务形态，实现业务形态的动态变化。
本申请实施例针对插件式开发的移动应用，通过终端系统的原生层对移动应用的界面进行布局设计和渲染，提高了插件式应用界面渲染的流畅性；其中，通过插件式的功能组件和业务逻辑的封装，提高了移动应用跨平台开发的效率，并且，通过插件式开发的方式，可以将业务逻辑代码封装成脚本数据，存储在云端，实现应用的动态更新和扩展。
为便于更好的实施本申请的界面渲染方法，本申请还提供一种基于上述界面渲染方法的界面渲染装置。其中名词的含义与上述界面渲染方法中相同，具体实现细节可以参考方法实施例中的说明。
请参阅图7，图7为本申请提供的界面渲染装置的结构示意图，其中该界面渲染装置可以包括创建模块201、构建模块202、获取模块203和渲染模块204、，具体可以如下：
创建模块201，用于创建至少一个视图容器。
其中，视图容器用来装载目标应用界面的功能组件及各个功能组件之间的业务逻辑代码，通过视图容器的创建，实现目标应用的功能组件和业务逻辑代码，与目标应用的界面渲染文件的分离。
构建模块202，用于根据插件在视图容器内构建目标应用的至少一个功能组件及每个功能组件所对应的业务逻辑。
其中，功能组件包括界面按钮、菜单、滑动条、进度条或者文本等。
其中，业务逻辑包括点击功能组件后出发的一系列数据操作，包括相应数据的检索查询、添加数据、删除数据等，也包括界面翻页逻辑，界面跳转逻辑等。
根据插件构建的功能组件及功能组件之间的业务逻辑，使目标应用能够适配不同的系统平台，降低开发和运维成本。
获取模块203，用于从移动终端系统的原生层中获取目标应用的用户界面渲染文件。
其中，针对插件式开发的移动应用，为提高应用在各个平台系统中的适配能力，往往根据插件构建移动应用的界面布局文件，但是，根据加载插件构建的界面布局文件对界面的渲染的效果较差，即界面渲染的流畅性较差，影响整体性能。
而移动终端系统原生框架中本身边具备有界面渲染文件，其中，在本申请实施例中，移动终端包括手机，手机系统如安卓(Android)的底层中具备有对应用程序(APP)中界面样式进行布局的渲染文件，且系统原生的渲染文件对应用界面的渲染更流畅，因此，将系统原生的渲染文件作为应用的界面渲染，可以提高应用界面渲染的流畅性。
渲染模块204，用于根据原生层加载至少一个视图容器，根据视图容器中功能组件、业务逻辑、以及用户界面渲染文件对目标应用进行界面渲染。
其中，在系统原生框架加载视图容器后，便可以根据视图容器中的功能组件、业务逻辑和原生框架中的渲染文件对目标应用进行界面渲染，即，仍采用插件式的开发方式对应用的功能组件和业务逻辑进行开发，保证应用在各个系统平台的适配能力，并根据系统原生框架的渲染文件对应用的界面进行渲染，可提高应用界面渲染的流畅性。
其中，在对应用进行插件式开发过程中，还可以对应用进行局部的界面设计，利用局部的渲染文件，对应用进行针对性的界面布局，即，可选的，在一些实施例中，该方法还包括：
根据插件对目标应用进行局部界面布局设计，得到局部界面渲染文件；
可选的，在本申请的一些实施例中，用户界面渲染文件包括整体界面渲染文件，该装置还包括构建单元，渲染模块包括：
渲染单元，用于根据视图容器中功能组件、业务逻辑以及整体界面渲染文件和局部界面渲染文件对目标应用进行界面渲染。
其中，在本申请实施例中，局部界面渲染文件用于对应用内部的具体样式进行绘制，根据局部界面渲染文件可以针对每个应用，进行各自应用内部的具体界面设计，整体界面渲染文件用于对移动终端上所有应用的整体的界面绘制，其中，整体界面渲染文件还可以理解为对各个应用的基本界面样式的设计，例如，对应用的大框架的界面布局样式的绘制，而局部界面渲染文件可以是针对具体的功能组件进行再次的绘制。
可选的，在本申请的一些实施例中，渲染单元包括：
调用子单元，用于在目标应用启动后，调用整体界面渲染文件；
第一渲染子单元，用于根据整体界面渲染文件对目标应用的界面进行渲染；
加载单元，用于根据原生层加载至少一个视图容器；
第二渲染子单元，用于根据视图容器中的功能组件、业务逻辑和局部界面渲染文件对目标应用的界面进行再次渲染。
其中，在应用启动后，先调用原生层的整体界面渲染文件，根据原生层的整体界面渲染文件对应用的界面进行整体渲染(基本框架的渲染)，随后，在原生层加载视图容器后，根据视图容器中的局部界面渲染文件对整体渲染后的应用界面进行再次渲染，其中，在应用启动时，根据原生层的整体界面渲染文件对应用界面的渲染，使应用界面能够在第一时间具备界面样式绘制，在局部界面渲染文件渲染后，对应用进行进一步地的渲染，使整个界面渲染更具流畅性，提升应用整体性能，提高用户体验。
可选的，在本申请的一些实施例中，第二渲染子单元具体用于：
用于对局部界面渲染文件进行解析，得到界面所对应的文档对象模型树以及界面中功能组件所对应的样式；
用于根据文档对象模型树和功能组件所对应的样式对目标应用的界面进行渲染；
用于根据业务逻辑对界面进行数据加载。
通过对渲染文件(如ReactNative JS view)的解析，得到界面节点的文档对象模型树(DOM视觉树)，根据界面所对应的文档对象模型树和界面中功能组件的样式，便可以会界面进行绘制，实现对界面的渲染。
可选的，在本申请的一些实施例中，根据文档对象模型树和功能组件所对应的样式对目标应用的界面进行渲染，具体用于：
用于根据原生层对样式进行装载；
用于利用原生层加载装载后的样式和文档对象模型树，对目标应用的界面进行绘制。
在原生层加载视图容器后，可根据原生层对界面的功能组件的布局样式进行装载，然后直接由原生层根据节点大小和布局装载结果，对界面进行绘制，实现对界面的渲染，其中，根据原生框架对界面节点的布局装载，可提高界面渲染的流畅性。
可选的，在本申请的一些实施例中，渲染模块包括：
注册单元，用于将至少一个视图容器注册到原生层中；
运行单元，用于根据原生层运行至少一个视图容器。
其中，插件化开发的应用，如ReactNative项目，都会有一个入口文件，例如index.js，该入口文件用于注册根组件，并提供给原生平台运行，其中，注册根组件可以通过接口实现，例如，应用注册接口(AppRegistry API)，其中，可以调用应用注册(AppRegistry)中的注册组件方法(registerComponent)方法进行视图容器的注册，注册之后，原生平台便可以通过runApplication方法来运行注册过的根组件。
可选的，在本申请的一些实施例中，在渲染模块之前，还包括
获取单元，用于获取业务逻辑所对应的脚本更新数据；
更新单元，根据脚本更新数据对视图容器进行更新。
其中，开发人员只需要将更新后的脚本更新数据上传到插件的服务器(如ReactNative服务器或者云端服务器)，APP在拉取脚本数据后会缓存起来，待用户在启动APP的时候，进行业务形态的更新，而APP在启动的时候，APP会向插件服务器请求资源包，如果资源包没有更新，则读取本地缓存资源。
本申请实施例首先由创建模块201创建应用的至少一个视图容器，随后，在视图容器中，构建模块根据插件构建应用的至少一个功能组件和业务逻辑，然后，由获取模块203从终端系统的原生层中获取应用的用户界面渲染文件，最后，渲染模块204中，建立原生层对视图容器的加载，根据视图容器中的功能组件、业务逻辑以及用户界面渲染文件对应用进行界面渲染，其中，该渲染过程也即实现了对应用的构建，即应用的框架为：根据原生框架对应用的界面渲染进行框架设计；根据插件对应用的功能组件和业务逻辑进行封装，根据桥接层建立原生框架与插件层的交互；其中，本申请实施例针对插件式开发的移动应用，通过终端系统的原生层对移动应用的界面进行布局设计和渲染，提高了插件式应用界面渲染的流畅性；其中，通过插件式的功能组件和业务逻辑的封装，提高了移动应用跨平台开发的效率，并且，通过插件式开发的方式，可以将业务逻辑代码封装成脚本数据，存储在云端，实现应用的动态更新和扩展。
此外，本申请还提供一种电子设备，如图8所示，其示出了本申请所涉及的电子设备的结构示意图，具体来讲：
该电子设备可以包括一个或者一个以上处理核心的处理器401、一个或一个以上计算机可读存储介质的存储器402、电源403和输入单元404等部件。本领域技术人员可以理解，图8中示出的电子设备结构并不构成对电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：
处理器401是该电子设备的控制中心，利用各种接口和线路连接整个电子设备的各个部分，通过运行或执行存储在存储器402内的软件程序和/或模块，以及调用存储在存储器402内的数据，执行电子设备的各种功能和处理数据，从而对电子设备进行整体监控。可选的，处理器401可包括一个或多个处理核心；优选的，处理器401可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器401中。
存储器402可用于存储软件程序以及模块，处理器401通过运行存储在存储器402的软件程序以及模块，从而执行各种功能应用以及解码处理。存储器402可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据电子设备的使用所创建的数据等。此外，存储器402可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器402还可以包括存储器控制器，以提供处理器401对存储器402的访问。
电子设备还包括给各个部件供电的电源403，优选的，电源403可以通过电源管理系统与处理器401逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源403还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。
该电子设备还可包括输入单元404，该输入单元404可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。
尽管未示出，电子设备还可以包括显示单元等，在此不再赘述。具体在本实施例中，电子设备中的处理器401会按照如下的指令，将一个或一个以上的应用程序的进程对应的可执行文件加载到存储器402中，并由处理器401来运行存储在存储器402中的应用程序，从而实现各种功能，如下：
创建至少一个视图容器；根据插件在视图容器内构建目标应用的至少一个功能组件及每个功能组件所对应的业务逻辑；从移动终端系统的原生层中获取目标应用的用户界面渲染文件；根据原生层加载至少一个视图容器，根据视图容器中功能组件、业务逻辑、以及用户界面渲染文件对目标应用进行界面渲染。
以上各个操作的具体实施可参见前面的实施例，在此不再赘述。
通过终端系统的原生层对移动应用的界面进行布局设计和渲染，提高了插件式应用界面渲染的流畅性；其中，通过插件式的功能组件和业务逻辑的封装，提高了移动应用跨平台开发的效率，并且，通过插件式开发的方式，可以将业务逻辑代码封装成脚本数据，存储在云端，实现应用的动态更新和扩展。
本领域普通技术人员可以理解，上述实施例的各种方法中的全部或部分步骤可以通过指令来完成，或通过指令控制相关的硬件来完成，该指令可以存储于一计算机可读存储介质中，并由处理器进行加载和执行。
为此，本申请提供一种存储介质，其中存储有多条指令，该指令能够被处理器进行加载，以执行本申请所提供的任一种界面渲染方法中的步骤。例如，该指令可以执行如下步骤：
创建至少一个视图容器；根据插件在视图容器内构建目标应用的至少一个功能组件及每个功能组件所对应的业务逻辑；从移动终端系统的原生层中获取目标应用的用户界面渲染文件；根据原生层加载至少一个视图容器，根据视图容器中功能组件、业务逻辑、以及用户界面渲染文件对目标应用进行界面渲染。
以上各个操作的具体实施可参见前面的实施例，在此不再赘述。
其中，该存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取记忆体(RAM，Random Access Memory)、磁盘或光盘等。
由于该存储介质中所存储的指令，可以执行本申请所提供的任一种界面渲染方法中的步骤，因此，可以实现本申请所提供的任一种界面渲染方法所能实现的有益效果，详见前面的实施例，在此不再赘述。
以上对本申请所提供的一种界面渲染方法、装置、电子设备以及存储介质进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上，本说明书内容不应理解为对本发明的限制。
Claims (10)
1.一种界面渲染方法，其特征在于，包括：
创建至少一个视图容器；
根据插件在所述视图容器内构建目标应用的至少一个功能组件及每个功能组件所对应的业务逻辑；
从移动终端系统的原生层中获取所述目标应用的用户界面渲染文件；
根据所述原生层加载所述至少一个视图容器，根据所述视图容器中功能组件、业务逻辑、以及所述用户界面渲染文件对所述目标应用进行界面渲染。
2.根据权利要求1所述的方法，其特征在于，该方法还包括：
根据所述插件对所述目标应用进行局部界面布局设计，得到局部界面渲染文件；
所述用户界面渲染文件包括整体界面渲染文件，所述根据所述视图容器中功能组件、业务逻辑、以及所述用户界面渲染文件对所述目标应用进行界面渲染，包括：
根据所述视图容器中功能组件、业务逻辑以及所述整体界面渲染文件和所述局部界面渲染文件对所述目标应用进行界面渲染。
3.根据权利要求2所述的方法，其特征在于，所述根据所述视图容器中功能组件、业务逻辑以及所述整体界面渲染文件和所述局部界面渲染文件对所述目标应用进行界面渲染，包括：
在所述目标应用启动后，调用所述整体界面渲染文件；
根据所述整体界面渲染文件对所述目标应用的界面进行渲染；
根据所述原生层加载所述至少一个视图容器；
根据所述视图容器中的功能组件、业务逻辑和所述局部界面渲染文件对所述目标应用的界面进行再次渲染。
4.根据权利要求3所述的方法，其特征在于，所述根据所述视图容器中的功能组件、业务逻辑和所述局部界面渲染文件对所述目标应用的界面进行再次渲染，包括：
对所述局部界面渲染文件进行解析，得到所述界面所对应的文档对象模型树以及所述界面中功能组件所对应的样式；
根据所述文档对象模型树和所述功能组件所对应的样式对所述目标应用的界面进行渲染；
根据所述业务逻辑对所述界面进行数据加载。
5.根据权利要求4所述的方法，其特征在于，所述根据所述文档对象模型树和所述功能组件所对应的样式对所述目标应用的界面进行渲染，包括：
根据所述原生层对所述样式进行装载；
利用原生层加载所述文档对象模型树和所述装载后的样式，对所述目标应用的界面进行绘制。
6.根据权利要求1所述的方法，其特征在于，所述根据所述原生层加载所述至少一个视图容器，包括：
将所述至少一个视图容器注册到所述原生层中；
根据所述原生层运行所述至少一个视图容器。
7.根据权利要求1所述的方法，其特征在于，所述根据所述原生层加载所述至少一个视图容器之前，还包括：
获取所述业务逻辑所对应的脚本更新数据；
根据所述脚本更新数据对所述视图容器进行更新。
8.一种界面渲染装置，其特征在于，包括：
创建模块，用于创建至少一个视图容器；
构建模块，用于根据插件在所述视图容器内构建目标应用的至少一个功能组件及每个功能组件所对应的业务逻辑；
获取模块，用于从移动终端系统的原生层中获取所述目标应用的用户界面渲染文件；
渲染模块，用于根据所述原生层加载所述至少一个视图容器，根据所述视图容器中功能组件、业务逻辑、以及所述用户界面渲染文件对所述目标应用进行界面渲染。
9.一种电子设备，包括存储器，处理器及存储在存储器上并可在处理器上运行的计算机程序，其中，所述处理器执行所述程序时实现如权利要求1-7任一项所述界面渲染方法的步骤。
10.一种计算机可读存储介质，其特征在于，其上存储有计算机程序，其中，所述计算机程序被处理器执行时实现如权利要求1-7任一项所述界面渲染方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110921014.7A CN113742014A (zh) | 2021-08-11 | 2021-08-11 | 界面渲染方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110921014.7A CN113742014A (zh) | 2021-08-11 | 2021-08-11 | 界面渲染方法、装置、电子设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113742014A true CN113742014A (zh) | 2021-12-03 |
Family
ID=78730711
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110921014.7A Pending CN113742014A (zh) | 2021-08-11 | 2021-08-11 | 界面渲染方法、装置、电子设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113742014A (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2023083071A1 (zh) * | 2021-11-11 | 2023-05-19 | 北京沃东天骏信息技术有限公司 | 视图交互方法、装置、电子设备及计算机可读介质 |
| WO2023245367A1 (zh) * | 2022-06-20 | 2023-12-28 | 北京小米移动软件有限公司 | 混合渲染应用系统、渲染方法、电子设备和存储介质 |
| WO2024046313A1 (zh) * | 2022-08-30 | 2024-03-07 | 北京沃东天骏信息技术有限公司 | 一种前端业务逻辑的可视化处理方法、装置及系统 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109117174A (zh) * | 2018-07-04 | 2019-01-01 | 北京德惠众合信息技术有限公司 | 兼容不同引擎的前端页面的系统及方法 |
| CN111045668A (zh) * | 2019-12-03 | 2020-04-21 | 安徽航天信息科技有限公司 | 一种跨平台的移动端系统开发方法及装置 |
| WO2020238277A1 (zh) * | 2019-05-24 | 2020-12-03 | 中国银联股份有限公司 | 基于h5接入方式的接入方法及其接入组件和移动终端 |
| CN112306594A (zh) * | 2020-04-16 | 2021-02-02 | 北京沃东天骏信息技术有限公司 | 一种基于移动端的渲染方法、装置及存储介质 |
-
2021
- 2021-08-11 CN CN202110921014.7A patent/CN113742014A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109117174A (zh) * | 2018-07-04 | 2019-01-01 | 北京德惠众合信息技术有限公司 | 兼容不同引擎的前端页面的系统及方法 |
| WO2020238277A1 (zh) * | 2019-05-24 | 2020-12-03 | 中国银联股份有限公司 | 基于h5接入方式的接入方法及其接入组件和移动终端 |
| CN111045668A (zh) * | 2019-12-03 | 2020-04-21 | 安徽航天信息科技有限公司 | 一种跨平台的移动端系统开发方法及装置 |
| CN112306594A (zh) * | 2020-04-16 | 2021-02-02 | 北京沃东天骏信息技术有限公司 | 一种基于移动端的渲染方法、装置及存储介质 |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2023083071A1 (zh) * | 2021-11-11 | 2023-05-19 | 北京沃东天骏信息技术有限公司 | 视图交互方法、装置、电子设备及计算机可读介质 |
| WO2023245367A1 (zh) * | 2022-06-20 | 2023-12-28 | 北京小米移动软件有限公司 | 混合渲染应用系统、渲染方法、电子设备和存储介质 |
| WO2024046313A1 (zh) * | 2022-08-30 | 2024-03-07 | 北京沃东天骏信息技术有限公司 | 一种前端业务逻辑的可视化处理方法、装置及系统 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113742014A (zh) | 界面渲染方法、装置、电子设备及存储介质 | |
| CN111639287A (zh) | 一种页面处理方法、装置、终端设备及可读存储介质 | |
| CN108786112B (zh) | 一种应用场景配置方法、装置和存储介质 | |
| US11797273B2 (en) | System and method for enhancing component based development models with auto-wiring | |
| WO2023065707A1 (zh) | 一种页面显示方法及装置 | |
| CN103443763A (zh) | 包含对重写虚拟函数的调用的支持的isa桥接 | |
| CN112328301B (zh) | 维护运行环境一致性的方法、装置、存储介质及电子设备 | |
| CN113806434B (zh) | 大数据处理方法、装置、设备及介质 | |
| CN112347545A (zh) | 一种建筑模型处理方法、装置、计算机设备及存储介质 | |
| CN112882764B (zh) | 组件加载方法、装置、计算机设备及存储介质 | |
| CN115202729A (zh) | 基于容器服务的镜像生成方法、装置、设备及介质 | |
| CN111062521B (zh) | 一种在线预测方法、系统及服务器 | |
| CN113835700A (zh) | 活动上线方法、装置、电子设备及计算机可读存储介质 | |
| CN112044061B (zh) | 游戏画面处理方法、装置、电子设备以及存储介质 | |
| CN112817595A (zh) | 界面渲染方法、装置、存储介质及电子设备 | |
| CN112755534B (zh) | 一种数据处理方法、装置和存储介质 | |
| CN115202643A (zh) | 图标资源的删除方法、装置、电子设备及介质 | |
| CN116775174A (zh) | 一种基于用户界面框架的处理方法、装置、设备及介质 | |
| CN114756212A (zh) | 低代码应用集成方法、装置、设备及介质 | |
| CN114356379A (zh) | 基于备份的服务升级方法、装置、设备及存储介质 | |
| CN113239328A (zh) | 一种业务功能获取方法、装置、电子设备和存储介质 | |
| CN113656044A (zh) | 安卓安装包压缩方法、装置、计算机设备及存储介质 | |
| CN112988255A (zh) | 数据处理方法、装置及计算机可读存储介质 | |
| CN116820555B (zh) | 应用程序的分包方法、装置、电子设备及可读存储介质 | |
| CN113138698B (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 |