CN111966354A - 一种页面显示方法、装置及计算机可读存储介质 - Google Patents
一种页面显示方法、装置及计算机可读存储介质 Download PDFInfo
- Publication number
- CN111966354A CN111966354A CN202010824139.3A CN202010824139A CN111966354A CN 111966354 A CN111966354 A CN 111966354A CN 202010824139 A CN202010824139 A CN 202010824139A CN 111966354 A CN111966354 A CN 111966354A
- Authority
- CN
- China
- Prior art keywords
- page
- native component
- rendering
- plug
- webpage
- 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
- 238000000034 method Methods 0.000 title claims abstract description 56
- 238000009877 rendering Methods 0.000 claims abstract description 93
- 238000012545 processing Methods 0.000 claims abstract description 43
- 230000002194 synthesizing effect Effects 0.000 claims abstract description 17
- 238000013507 mapping Methods 0.000 claims abstract description 13
- 239000000872 buffer Substances 0.000 claims description 32
- 238000004590 computer program Methods 0.000 claims description 10
- 230000015572 biosynthetic process Effects 0.000 claims description 3
- 238000004891 communication Methods 0.000 claims description 3
- 238000003786 synthesis reaction Methods 0.000 claims description 3
- 238000011161 development Methods 0.000 abstract description 7
- 238000010586 diagram Methods 0.000 description 8
- 230000003993 interaction Effects 0.000 description 7
- 230000006870 function Effects 0.000 description 6
- 239000000243 solution Substances 0.000 description 5
- 230000008569 process Effects 0.000 description 4
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 230000002452 interceptive effect Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000001680 brushing effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000002347 injection Methods 0.000 description 1
- 239000007924 injection Substances 0.000 description 1
- 238000002955 isolation Methods 0.000 description 1
- 239000000203 mixture Substances 0.000 description 1
- 230000035515 penetration Effects 0.000 description 1
- 238000002360 preparation method Methods 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
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
- 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)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请提供了一种页面显示方法、装置及计算机可读存储介质，该页面显示方法包括：在接收到页面显示请求时，获取原生组件层页面和网页视图层页面；通过目标网页插件将原生组件层页面的位置信息映射至网页视图层页面，确定网页视图页面上对应于位置信息的目标区域；将网页视图层页面相应的第一渲染页面上目标区域进行纹理擦除处理；将处理后的第一渲染页面与原生组件层页面相应的第二渲染页面进行合成，得到混合渲染页面；基于混合渲染页面进行应用页面显示。通过本申请方案的实施，将网页视图层上对应于原生组件层的位置进行透明化处理，克服了原生组件层显示时的层级限制，拓展了应用开发生态，允许开发者针对更多业务类型进行应用开发。
Description
技术领域
本申请涉及电子技术领域，尤其涉及一种页面显示方法、装置及计算机可读存储介质。
背景技术
随着电子技术的快速发展，手机、平板电脑等电子装置在用户生活中愈发普及。目前，电子装置在原生应用框架下显示用户界面时，通常基于常规的组件分层方式来进行用户界面显示，而无法解决混合页面中原生组件与非原生组件重叠时的显示问题，例如视频组件显示时无法实现“弹幕”组件显示，直播组件显示时无法实现“打赏”组件显示，地图组件显示时无法实现“附近与发现”组件显示等，从而应用所能支持的业务类型较为局限。
发明内容
本申请实施例提供了一种页面显示方法、装置及计算机可读存储介质，至少能够解决相关技术中在原生应用框架下显示用户界面时，应用所能支持的业务类型较为局限的问题。
本申请实施例第一方面提供了一种页面显示方法，包括：
在接收到页面显示请求时，获取原生组件层页面和网页视图层页面；
通过目标网页插件将所述原生组件层页面的位置信息映射至所述网页视图层页面，确定所述网页视图页面上对应于所述位置信息的目标区域；
将所述网页视图层页面相应的第一渲染页面上所述目标区域进行纹理擦除处理；
将处理后的所述第一渲染页面与所述原生组件层页面相应的第二渲染页面进行合成，得到混合渲染页面；
基于所述混合渲染页面进行应用页面显示。
本申请实施例第二方面提供了一种页面显示装置，包括：
获取模块，用于在接收到页面显示请求时，获取原生组件层页面和网页视图层页面；
确定模块，用于通过目标网页插件将所述原生组件层页面的位置信息映射至所述网页视图层页面，确定所述网页视图页面上对应于所述位置信息的目标区域；
处理模块，用于将所述网页视图层页面相应的第一渲染页面上所述目标区域进行纹理擦除处理；
合成模块，用于将处理后的所述第一渲染页面与所述原生组件层页面相应的第二渲染页面进行合成，得到混合渲染页面；
显示模块，用于基于所述混合渲染页面进行应用页面显示。
本申请实施例第三方面提供了一种电子装置，包括：存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时，实现上述本申请实施例第一方面提供的页面显示方法中的各步骤。
本申请实施例第四方面提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时，实现上述本申请实施例第一方面提供的页面显示方法中的各步骤。
由上可见，根据本申请方案所提供的页面显示方法、装置及计算机可读存储介质，在接收到页面显示请求时，获取原生组件层页面和网页视图层页面；通过目标网页插件将原生组件层页面的位置信息映射至网页视图层页面，确定网页视图页面上对应于位置信息的目标区域；将网页视图层页面相应的第一渲染页面上目标区域进行纹理擦除处理；将处理后的第一渲染页面与原生组件层页面相应的第二渲染页面进行合成，得到混合渲染页面；基于混合渲染页面进行应用页面显示。通过本申请方案的实施，将网页视图层上对应于原生组件层的位置进行透明化处理，克服了原生组件层显示时的层级限制，拓展了应用开发生态，允许开发者针对更多业务类型进行应用开发。
附图说明
图1为本申请第一实施例提供的页面显示方法的基本流程示意图；
图2为本申请第一实施例提供的一种系统功能模块示意图；
图3为本申请第一实施例提供的一种网页插件创建方法流程示意图；
图4为本申请第一实施例提供的一种混合渲染显示的界面示意图；
图5为本申请第一实施例提供的一种页面混合渲染与显示方法的流程示意图；
图6为本申请第二实施例提供的页面显示方法的细化流程示意图；
图7为本申请第三实施例提供的一种页面显示装置的程序模块示意图；
图8为本申请第四实施例提供的电子装置的结构示意图。
具体实施方式
为使得本申请的发明目的、特征、优点能够更加的明显和易懂，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而非全部实施例。基于本申请中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
为了解决相关技术中在原生应用框架下显示用户界面时，应用所能支持的业务类型较为局限的缺陷，本申请第一实施例提供了一种页面显示方法，可以应用于手机、个人电脑、智能手表、平板电脑等电子装置。如图1为本实施例提供的页面显示方法的基本流程图，该页面显示方法包括以下的步骤：
步骤101、在接收到页面显示请求时，获取原生组件层页面和网页视图层页面。
具体的，在本实施例中，该页面显示功能可以应用于轻应用场景下，轻应用是一种无需下载、即搜即用的全功能应用，轻应用具备网页应用的可被检索与智能分发的特性。
如图2所示为本实施例提供的一种系统功能模块示意图，本实施例在轻应用视图中，将网页视图(WebView)组件和组件层父组件挂在同一个根组件上，并用WebView组件覆盖组件层，其中组件层保护WebView层上的待显示原生组件区域。WebView层通过WebView内核模块加载对应网页视图内容。
步骤102、通过目标网页插件将原生组件层页面的位置信息映射至网页视图层页面，确定网页视图页面上对应于位置信息的目标区域。
具体的，在本实施例中，基于网页Web插件在WebView层页面上映射出组件层页面位置，该位置所对应的目标区域即为待显示原生组件区域，应当说明的是，本实施例的网页插件可以是直接调用得到，也可以是自定义创建得到。
在本实施例的一些实施方式中，在通过目标网页插件将原生组件层页面的位置信息映射至网页视图层页面之前，还包括：获取对应于原生组件层页面的原生组件属性信息；基于原生组件属性信息对应创建目标网页插件。
具体的，本实施例的原生组件属性信息包括：原生组件的嵌入标签信息、原生组件的类型信息、原生组件的位置信息。在本实施例中，基于原生组件的组件属性来对应自定义网页插件。
应当说明的是，请再次参阅图2，在本实施例中，组件软件开发工具包(SDK，Software Development Kit)模块和前端框架模块处理待显示原生组件的业务逻辑与视图；前端框架组件渲染接口通过交互模块，发送一段轻量级脚本语言(JS，JavaScript)代码给WebView解析，JS代码中带有原生组件对应的超文本标记语言(HTML，Hyper Text MarkupLanguage)嵌入embed标签信息，原生组件类型转化为Web插件的类型信息、原生组件位置信息等，当WebView内核模块接收到交互模块发送的JS代码后解析该JS，在Web页面对应的原生组件待显示区域插入embed标签，并通过自定义插件模块与Web引擎模块创建原生组件对应的Web插件。
如图3所示为本实施例提供的一种网页插件创建方法的流程示意图，自定义Web插件的目的主要是针对轻应用不同的原生组件类型设计待显示原生组件区域上层交互逻辑，例如事件穿透等。当前轻应用原生组件包括video、map、canvas、camera、textarea、live-player、live-pusher等，具体处理步骤如下：
1)轻应用页面预渲染：页面预渲染包含初始化逻辑层环境与WebView层环境。逻辑层初始化工作不限于JS运行环境初始化(IOS平台为JScore，Android平台为V8引擎)，注入逻辑层基础库等；WebView层初始化工作不限于WebView内核的初始化，注入视图层基础库等。其中WebView内核不局限于Google官方内核或厂家自研引擎，例如UC内核、X5内核、T7内核等；
2)页面预渲染完成后，注入自定义Web插件的全局JS交互接口，通过交互模块发布到WebView内核，将接口注册到WebView内核，为WebView与JS交互做准备。全局JS接口包含协议Web插件类型接口、WebView传递全局对象到JS接口、插件位置大小变化更新接口、插件属性变化更新接口等，示例代码如下：
3)继续注入页面业务视图代码；
4)前端框架模块负责将页面业务视图代码解析成文档对象模型(DOM，DocumentObject Model)树后，挂载到轻应用页面上，渲染DOM节点，这里主要描述为原生组件节点的渲染；在本实施例中，原生组件渲染需要结合轻应用内置组件实现方式，本实施例需要修改原生组件的渲染，以video组件为例，修改后的示例代码如下：
5)交互模块注入一段JS代码到WebView，JS代码包含待显示原生组件对应的HTMLembed标签信息，原生组件类型转化为Web插件的类型信息、原生组件位置信息等；
6)WebView接受到交互模块发布的message后，通过WebView内核解析执行这段JS；
7)在WebView层待显示原生组件区插入<embed>标签，触发WebView内核创建自定义Web插件。
进一步地，在本实施例的一些实施方式中，在基于原生组件属性信息对应创建目标网页插件之前，还包括：获取对应于原生组件的类型信息的第一插件类型信息，以及获取网页视图层所支持的第二插件类型信息；将第一插件类型信息与第二插件类型信息进行匹配。
具体的，WebView内核能否创建插件由用户协议支持的Web插件类型决定，即由之前注入到WebView的协议Web插件类型全局JS接口决定。例如，用户通过JS协议WebView可支持的插件类型为“plugin/video”，当WebView内核解析刚注入的JS代码中指定的插件类型为“plugin/video”时，说明原生组件类型所对应的插件类型与WebView所支持的插件类型相匹配，从而触发WebView内核基于原生组件属性信息对应创建目标网页插件；而若解析刚注入的JS代码中并未指定插件类型或者插件类型不为“plugin/video”时，则WebView内核结束插件创建。
应当说明的是，在本实施例的另一些实施方式中，将第一插件类型信息与第二插件类型信息进行匹配之后，还包括：在匹配不通过时，将预设的通用网页插件确定为目标网页插件。
具体的，在本实施例中，当原生组件类型所对应的插件类型与WebView所支持的插件类型不匹配时，可以调用预置的通用Web插件进行使用，其中，通用Web插件为针对不同原生组件的类型信息所统一协议的网页插件，也即针对不同类型的原生组件，开发者可以统一协议Web插件类型，不必要一一对应。假设使用“Web-plugin”代表所有原生组件，则在WebView内核和JS端需要共同协议，前端框架内置组件实现做如下修改：
步骤103、将网页视图层页面相应的第一渲染页面上目标区域进行纹理擦除处理。
具体的，本实施例的第一渲染页面是指对WebView层页面进行渲染后所得到的页面。在本实施例中，网页视图层页面通过WebView模块的Web引擎完成页面渲染之后，将渲染页面中对应于待显示原生组件区域的位置进行纹理擦除处理(也即透明化处理)，以使该位置透明。
步骤104、将处理后的第一渲染页面与原生组件层页面相应的第二渲染页面进行合成，得到混合渲染页面。
具体的，本实施例的第二渲染页面是指对原生组件层页面进行渲染后所得到的页面。在本实施例中，原生组件层各组件通过组件SDK模块完成组件渲染，然后将原生组件层渲染页面与前述纹理擦除之后的WebView层渲染页面在图2中的图形处理器(GPU，GraphicsProcessing Unit)模块进行合成，即可得到混合渲染页面。
在本实施例的一些实施方式中，将网页视图层页面相应的第一渲染页面上目标区域进行纹理擦除处理包括：基于原生组件的类型信息确定原生组件层页面所要求的目标透明度；参考目标透明度，将网页视图层页面相应的第一渲染页面上目标区域进行纹理擦除处理。
具体的，本实施例考虑到在不同页面显示场景下，所显示的原生组件层页面有所不同，而为了提高页面显示的灵活性，不同原生组件层页面所要求的最佳显示透明度有所不同，基于此，本实施例针对不同原生组件层页面确定对应的目标透明度，然后参考该透明度来适应性对WebView层渲染页面上目标区域进行纹理擦除。
在本实施例的另一些实施方式中，将网页视图层页面相应的第一渲染页面上目标区域进行纹理擦除处理包括：从网页视图层页面相应的第一渲染页面上目标区域提取出非原生组件区域；参考预设第一透明度对非原生组件区域进行纹理擦除处理，以及参考预设第二透明度对目标区域中的剩余区域进行纹理擦除处理；其中，第一透明度与第二透明度的取值不同。
具体的，本实施例的待显示原生组件区域上还包括有非原生组件区域，那么在进行纹理擦除时，可以分别参考不同的透明度来分别对非原生组件区域和待显示原生组件区域上其它区域分别进行纹理擦除处理，在实际应用中，第一透明度可以低于第二透明度，从而可以保证原生组件层在WebView层的非原生组件区域透出显示的同时，保证非原生组件的显示效果。
步骤105、基于混合渲染页面进行应用页面显示。
具体的，在本实施例中，可以将合成后的混合渲染页面放入离屏画布中，离屏画布为应用显示页面绘制数据的载体，然后再调用平台的绘制机制上屏并显示。
如图4所示为本实施例提供的一种混合渲染显示的界面示意图，其中，图4中(a)为采用现有技术中技术方案的具体实现，可以看出其待显示原生组件区为黑色，从而WebView层的待显示原生组件区域不能透出下层的原生组件的内容，而图4中(b)则为本实施例的具体实现，允许原生组件内容从WebView层透出，并且，图中待显示原生组件区右下角的矩形框为原生组件上的用户交互区，可以为应用的特殊使用场景做准备，例如，短视频或长视频上的弹幕、分享、收藏、评论等功能；在线直播刷礼物、评论、点赞等功能；地图上搜索、查找附近、交通状况、定制路线等功能。
在本实施例的一些实施方式中，将网页视图层页面相应的第一渲染页面上目标区域进行纹理擦除处理包括：将网页视图层页面相应的第一渲染页面上传至第一命令缓冲区；对第一渲染页面上目标区域进行纹理擦除处理；将处理后的第一渲染页面存储至目标帧缓冲区。相对应的，将处理后的第一渲染页面与原生组件层页面相应的第二渲染页面进行合成，得到混合渲染页面包括：将原生组件层页面相应的第二渲染页面上传至第二命令缓冲区；将第二命令缓冲区内的第二渲染页面上传至目标帧缓冲区；在目标帧缓冲区将处理后的第一渲染页面与第二渲染页面进行合成，得到混合渲染页面。
如图5所示为本实施例提供的一种页面混合渲染与显示的流程示意图，具体的，本实施例至少设置于两个命令缓冲区，主要用于存储组件层和WebView层渲染页面，隔离未经纹理处理与合成模块处理的WebView层和组件层渲染页面。并且，将经过纹理擦除处理后的WebView纹理数据单独存储到为WebView分配的帧缓冲区中，再将原生组件所在层的纹理数据合成到WebView对应帧缓冲区中。应当说明的是，如果不额外给WebView分配帧缓冲区再将原生组件层纹理合成到该帧缓冲区，组件层和WebView的渲染页面直接在GPU合成，则待显示原生组件区为黑色，WebView层的Web插件区域不能透出原生组件的内容。
基于上述本申请实施例的技术方案，在接收到页面显示请求时，获取原生组件层页面和网页视图层页面；通过目标网页插件将原生组件层页面的位置信息映射至网页视图层页面，确定网页视图页面上对应于位置信息的目标区域；将网页视图层页面相应的第一渲染页面上目标区域进行纹理擦除处理；将处理后的第一渲染页面与原生组件层页面相应的第二渲染页面进行合成，得到混合渲染页面；基于混合渲染页面进行应用页面显示。通过本申请方案的实施，将网页视图层上对应于原生组件层的位置进行透明化处理，克服了原生组件层显示时的层级限制，拓展了应用开发生态，允许开发者针对更多业务类型进行应用开发。
图6中的方法为本申请第二实施例提供的一种细化的页面显示方法，该页面显示方法包括：
步骤601、在接收到页面显示请求时，获取原生组件层页面和网页视图层页面，以及获取对应于原生组件层页面的原生组件属性信息。
具体的，本实施例的原生组件属性信息包括：原生组件的嵌入标签信息、原生组件的类型信息、原生组件的位置信息。另外，本实施例的网页视图WebView组件和组件层父组件挂在同一个根组件上，并用WebView组件覆盖组件层。
步骤602、通过基于原生组件属性信息对应创建的目标网页插件，将原生组件层页面的目标位置信息映射至网页视图层页面。
具体的，本实施例可以基于原生组件的类型信息对应创建自定义Web插件，然后通过Web插件在WebView层页面上映射出组件层页面位置，该位置所对应的目标区域即为待显示原生组件区域。
步骤603、将网页视图层页面相应的第一渲染页面上传至第一命令缓冲区。
步骤604、对第一渲染页面上对应于目标位置信息的目标区域进行纹理擦除处理，并将处理后的第一渲染页面存储至目标帧缓冲区。
在本实施例中，首先将网页视图层页面的渲染页面上传至独立的命令缓冲区，然后将其经过纹理擦除处理后存储至专门的帧缓冲区。
步骤605、将原生组件层页面相应的第二渲染页面上传至第二命令缓冲区。
步骤606、将第二渲染页面上传至目标帧缓冲区与处理后的第一渲染页面进行合成，得到混合渲染页面。
具体的，本实施例的原生组件层页面的渲染页面同样存储至一个独立的命令缓冲区，然后再在帧缓冲区与经过纹理擦除处理后的网页视图层页面的渲染页面进行合成。
步骤607、基于混合渲染页面进行应用页面显示。
具体的，本实施例将合成后的混合渲染页面放入离屏画布中，离屏画布为应用显示页面绘制数据的载体，然后再调用平台的绘制机制上屏并显示。
应当理解的是，本实施例中各步骤的序号的大小并不意味着步骤执行顺序的先后，各步骤的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成唯一限定。
本申请实施例公开了一种页面显示方法，将网页视图层上对应于原生组件层的位置进行透明化处理，并采用分层命令缓冲区隔离方式柔和地将原生组件内容与WebView页面内容混合并显示上屏，克服了原生组件层显示时的层级限制，拓展了应用开发生态，允许开发者针对更多业务类型进行应用开发，丰富了应用的业务场景。
图7为本申请第三实施例提供的一种页面显示装置，该页面显示装置可应用于前述第一实施例及第二实施例的页面显示方法。如图7所示，该页面显示装置主要包括：
获取模块701，用于在接收到页面显示请求时，获取原生组件层页面和网页视图层页面；
确定模块702，用于通过目标网页插件将原生组件层页面的位置信息映射至网页视图层页面，确定网页视图页面上对应于位置信息的目标区域；
处理模块703，用于将网页视图层页面相应的第一渲染页面上目标区域进行纹理擦除处理；
合成模块704，用于将处理后的第一渲染页面与原生组件层页面相应的第二渲染页面进行合成，得到混合渲染页面；
显示模块705，用于基于混合渲染页面进行应用页面显示。
在本实施例一些实施方式中，页面显示装置还包括：创建模块，用于：在通过目标网页插件将原生组件层页面的位置信息映射至网页视图层页面之前，获取对应于原生组件层页面的原生组件属性信息；基于原生组件属性信息对应创建目标网页插件。其中，原生组件属性信息包括：原生组件的嵌入标签信息、原生组件的类型信息、原生组件的位置信息。
进一步地，在本实施例一些实施方式中，页面显示装置还包括：匹配模块，用于：在基于原生组件属性信息对应创建目标网页插件之前，获取对应于原生组件的类型信息的第一插件类型信息，以及获取网页视图层所支持的第二插件类型信息；将第一插件类型信息与第二插件类型信息进行匹配。相对应的，创建模块具体用于：在匹配通过时，基于原生组件属性信息对应创建目标网页插件。
更进一步地，在本实施例一些实施方式中，确定模块702还用于：将第一插件类型信息与第二插件类型信息进行匹配之后，在匹配不通过时，将预设的通用网页插件确定为目标网页插件；其中，通用网页插件为针对不同原生组件的类型信息所统一协议的网页插件。
在本实施例一些实施方式中，处理模块703具体用于：将网页视图层页面相应的第一渲染页面上传至第一命令缓冲区；对第一渲染页面上目标区域进行纹理擦除处理；将处理后的第一渲染页面存储至目标帧缓冲区。相对应的，合成模块704具体用于：将原生组件层页面相应的第二渲染页面上传至第二命令缓冲区；将第二命令缓冲区内的第二渲染页面上传至目标帧缓冲区；在目标帧缓冲区将处理后的第一渲染页面与第二渲染页面进行合成，得到混合渲染页面。
在本实施例另一些实施方式中，处理模块703具体用于：基于原生组件的类型信息确定原生组件层页面所要求的目标透明度；参考目标透明度，将网页视图层页面相应的第一渲染页面上目标区域进行纹理擦除处理。
在本实施例又一些实施方式中，处理模块703具体用于：从网页视图层页面相应的第一渲染页面上目标区域提取出非原生组件区域；参考预设第一透明度对非原生组件区域进行纹理擦除处理，以及参考预设第二透明度对目标区域中的剩余区域进行纹理擦除处理；其中，第一透明度与第二透明度的取值不同。
应当说明的是，第一、二实施例中的页面显示方法均可基于本实施例提供的页面显示装置实现，所属领域的普通技术人员可以清楚的了解到，为描述的方便和简洁，本实施例中所描述的页面显示装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
根据本实施例所提供的页面显示装置，在接收到页面显示请求时，获取原生组件层页面和网页视图层页面；通过目标网页插件将原生组件层页面的位置信息映射至网页视图层页面，确定网页视图页面上对应于位置信息的目标区域；将网页视图层页面相应的第一渲染页面上目标区域进行纹理擦除处理；将处理后的第一渲染页面与原生组件层页面相应的第二渲染页面进行合成，得到混合渲染页面；基于混合渲染页面进行应用页面显示。通过本申请方案的实施，将网页视图层上对应于原生组件层的位置进行透明化处理，克服了原生组件层显示时的层级限制，拓展了应用开发生态，允许开发者针对更多业务类型进行应用开发。
请参阅图8，图8为本申请第四实施例提供的一种电子装置。该电子装置可用于实现前述实施例中的页面显示方法。如图8所示，该电子装置主要包括：
存储器801、处理器802、总线803及存储在存储器801上并可在处理器802上运行的计算机程序，存储器801和处理器802通过总线803连接。处理器802执行该计算机程序时，实现前述实施例中的页面显示方法。其中，处理器的数量可以是一个或多个。
存储器801可以是高速随机存取记忆体(RAM，Random Access Memory)存储器，也可为非不稳定的存储器(non-volatile memory)，例如磁盘存储器。存储器801用于存储可执行程序代码，处理器802与存储器801耦合。
进一步的，本申请实施例还提供了一种计算机可读存储介质，该计算机可读存储介质可以是设置于上述各实施例中的电子装置中，该计算机可读存储介质可以是前述图8所示实施例中的存储器。
该计算机可读存储介质上存储有计算机程序，该程序被处理器执行时实现前述实施例中的页面显示方法。进一步的，该计算机可存储介质还可以是U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个模块或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或模块的间接耦合或通信连接，可以是电性，机械或其它的形式。
作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能模块可以集成在一个处理模块中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。
集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个可读存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例方法的全部或部分步骤。而前述的可读存储介质包括：U盘、移动硬盘、ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
需要说明的是，对于前述的各方法实施例，为了简便描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其它顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定都是本申请所必须的。
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其它实施例的相关描述。
以上为对本申请所提供的页面显示方法、装置及计算机可读存储介质的描述，对于本领域的技术人员，依据本申请实施例的思想，在具体实施方式及应用范围上均会有改变之处，综上，本说明书内容不应理解为对本申请的限制。
Claims (10)
1.一种页面显示方法，其特征在于，包括：
在接收到页面显示请求时，获取原生组件层页面和网页视图层页面；
通过目标网页插件将所述原生组件层页面的位置信息映射至所述网页视图层页面，确定所述网页视图页面上对应于所述位置信息的目标区域；
将所述网页视图层页面相应的第一渲染页面上所述目标区域进行纹理擦除处理；
将处理后的所述第一渲染页面与所述原生组件层页面相应的第二渲染页面进行合成，得到混合渲染页面；
基于所述混合渲染页面进行应用页面显示。
2.根据权利要求1所述的页面显示方法，其特征在于，所述通过目标网页插件将所述原生组件层页面的位置信息映射至所述网页视图层页面之前，还包括：
获取对应于所述原生组件层页面的原生组件属性信息；其中，所述原生组件属性信息包括：原生组件的嵌入标签信息、原生组件的类型信息、原生组件的位置信息；
基于所述原生组件属性信息对应创建所述目标网页插件。
3.根据权利要求2所述的页面显示方法，其特征在于，所述基于所述原生组件属性信息对应创建所述目标网页插件之前，还包括：
获取对应于所述原生组件的类型信息的第一插件类型信息，以及获取所述网页视图层所支持的第二插件类型信息；
将所述第一插件类型信息与所述第二插件类型信息进行匹配；
在匹配通过时，执行所述基于所述原生组件属性信息对应创建所述目标网页插件的步骤。
4.根据权利要求3所述的页面显示方法，其特征在于，所述将所述第一插件类型信息与所述第二插件类型信息进行匹配之后，还包括：
在匹配不通过时，将预设的通用网页插件确定为所述目标网页插件；其中，所述通用网页插件为针对不同所述原生组件的类型信息所统一协议的网页插件。
5.根据权利要求1至4中任意一项所述的页面显示方法，其特征在于，所述将所述网页视图层页面相应的第一渲染页面上所述目标区域进行纹理擦除处理包括：
将所述网页视图层页面相应的第一渲染页面上传至第一命令缓冲区；
对所述第一渲染页面上所述目标区域进行纹理擦除处理；
将处理后的所述第一渲染页面存储至目标帧缓冲区；
所述将处理后的所述第一渲染页面与所述原生组件层页面相应的第二渲染页面进行合成，得到混合渲染页面包括：
将所述原生组件层页面相应的第二渲染页面上传至第二命令缓冲区；
将所述第二命令缓冲区内的第二渲染页面上传至所述目标帧缓冲区；
在所述目标帧缓冲区将处理后的所述第一渲染页面与所述第二渲染页面进行合成，得到混合渲染页面。
6.根据权利要求1至4中任意一项所述的页面显示方法，其特征在于，所述将所述网页视图层页面相应的第一渲染页面上所述目标区域进行纹理擦除处理包括：
基于原生组件的类型信息确定所述原生组件层页面所要求的目标透明度；
参考所述目标透明度，将所述网页视图层页面相应的第一渲染页面上所述目标区域进行纹理擦除处理。
7.根据权利要求1至4中任意一项所述的页面显示方法，其特征在于，所述将所述网页视图层页面相应的第一渲染页面上所述目标区域进行纹理擦除处理包括：
从所述网页视图层页面相应的第一渲染页面上所述目标区域提取出非原生组件区域；
参考预设第一透明度对所述非原生组件区域进行纹理擦除处理，以及参考预设第二透明度对所述目标区域中的剩余区域进行纹理擦除处理；其中，所述第一透明度与所述第二透明度的取值不同。
8.一种页面显示装置，其特征在于，包括：
获取模块，用于在接收到页面显示请求时，获取原生组件层页面和网页视图层页面；
确定模块，用于通过目标网页插件将所述原生组件层页面的位置信息映射至所述网页视图层页面，确定所述网页视图页面上对应于所述位置信息的目标区域；
处理模块，用于将所述网页视图层页面相应的第一渲染页面上所述目标区域进行纹理擦除处理；
合成模块，用于将处理后的所述第一渲染页面与所述原生组件层页面相应的第二渲染页面进行合成，得到混合渲染页面；
显示模块，用于基于所述混合渲染页面进行应用页面显示。
9.一种电子装置，其特征在于，包括：存储器、处理器及总线；
所述总线用于实现所述存储器、处理器之间的连接通信；
所述处理器用于执行存储在所述存储器上的计算机程序；
所述处理器执行所述计算机程序时，实现权利要求1至7中任意一项所述方法中的步骤。
10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时，实现权利要求1至7中的任意一项所述方法中的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010824139.3A CN111966354A (zh) | 2020-08-17 | 2020-08-17 | 一种页面显示方法、装置及计算机可读存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010824139.3A CN111966354A (zh) | 2020-08-17 | 2020-08-17 | 一种页面显示方法、装置及计算机可读存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111966354A true CN111966354A (zh) | 2020-11-20 |
Family
ID=73388767
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010824139.3A Pending CN111966354A (zh) | 2020-08-17 | 2020-08-17 | 一种页面显示方法、装置及计算机可读存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111966354A (zh) |
Cited By (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112799665A (zh) * | 2021-01-27 | 2021-05-14 | 视若飞信息科技(上海)有限公司 | 一种以WebUI的方式构建App功能界面的方法 |
| CN113297522A (zh) * | 2021-05-10 | 2021-08-24 | 广州虎牙科技有限公司 | 一种页面渲染方法、装置、电子设备及可读存储介质 |
| CN113377475A (zh) * | 2021-06-22 | 2021-09-10 | 北京字节跳动网络技术有限公司 | 一种内容展示方法及终端设备 |
| CN113436344A (zh) * | 2021-06-25 | 2021-09-24 | 广联达科技股份有限公司 | 一种引用视图的显示方法、系统及图像显示设备 |
| CN113741764A (zh) * | 2021-07-30 | 2021-12-03 | 阿里巴巴新加坡控股有限公司 | 组件处理方法、装置及设备 |
| CN114356324A (zh) * | 2021-12-16 | 2022-04-15 | 阿里巴巴（中国）有限公司 | 界面处理方法、装置、设备和存储介质 |
| CN114371837A (zh) * | 2022-01-07 | 2022-04-19 | 深圳依时货拉拉科技有限公司 | 地图构建方法、装置、存储介质和计算机设备 |
| CN115079923A (zh) * | 2022-06-17 | 2022-09-20 | 北京新唐思创教育科技有限公司 | 事件处理方法、装置、设备及介质 |
| CN115408047A (zh) * | 2022-08-11 | 2022-11-29 | 北京大氪信息科技有限公司 | 一种版本发布方法、装置及电子设备 |
| WO2022252804A1 (zh) * | 2021-05-31 | 2022-12-08 | 华为技术有限公司 | 显示视图控件的方法及装置 |
| CN116166255A (zh) * | 2021-11-25 | 2023-05-26 | 华为技术有限公司 | 界面生成方法及电子设备 |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140047517A1 (en) * | 2012-08-13 | 2014-02-13 | Jihui DING | Hybrid network application architecture |
| CN105574049A (zh) * | 2014-10-30 | 2016-05-11 | 阿里巴巴集团控股有限公司 | 移动应用的页面处理方法、装置和系统 |
| CN106371844A (zh) * | 2016-08-31 | 2017-02-01 | 北京奇艺世纪科技有限公司 | 一种用原生用户界面组件展示网页的方法及系统 |
| CN109101300A (zh) * | 2018-06-14 | 2018-12-28 | 腾讯科技（深圳）有限公司 | 一种页面渲染方法、装置及终端 |
| CN110532495A (zh) * | 2019-08-30 | 2019-12-03 | 郑州阿帕斯科技有限公司 | 一种网页信息的展示方法及装置 |
| CN111045668A (zh) * | 2019-12-03 | 2020-04-21 | 安徽航天信息科技有限公司 | 一种跨平台的移动端系统开发方法及装置 |
| CN111274510A (zh) * | 2020-01-15 | 2020-06-12 | 平安银行股份有限公司 | 页面渲染方法、装置、设备及可读存储介质 |
| CN111506841A (zh) * | 2019-01-30 | 2020-08-07 | 阿里巴巴集团控股有限公司 | 网页展示方法、装置、设备及可读存储介质 |
| CN111506847A (zh) * | 2019-01-30 | 2020-08-07 | 阿里巴巴集团控股有限公司 | 网页展示方法、装置、设备及可读存储介质 |
| CN111506848A (zh) * | 2019-01-30 | 2020-08-07 | 阿里巴巴集团控股有限公司 | 网页处理方法、装置、设备及可读存储介质 |
-
2020
- 2020-08-17 CN CN202010824139.3A patent/CN111966354A/zh active Pending
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140047517A1 (en) * | 2012-08-13 | 2014-02-13 | Jihui DING | Hybrid network application architecture |
| CN105574049A (zh) * | 2014-10-30 | 2016-05-11 | 阿里巴巴集团控股有限公司 | 移动应用的页面处理方法、装置和系统 |
| CN106371844A (zh) * | 2016-08-31 | 2017-02-01 | 北京奇艺世纪科技有限公司 | 一种用原生用户界面组件展示网页的方法及系统 |
| CN109101300A (zh) * | 2018-06-14 | 2018-12-28 | 腾讯科技（深圳）有限公司 | 一种页面渲染方法、装置及终端 |
| CN111506841A (zh) * | 2019-01-30 | 2020-08-07 | 阿里巴巴集团控股有限公司 | 网页展示方法、装置、设备及可读存储介质 |
| CN111506847A (zh) * | 2019-01-30 | 2020-08-07 | 阿里巴巴集团控股有限公司 | 网页展示方法、装置、设备及可读存储介质 |
| CN111506848A (zh) * | 2019-01-30 | 2020-08-07 | 阿里巴巴集团控股有限公司 | 网页处理方法、装置、设备及可读存储介质 |
| CN110532495A (zh) * | 2019-08-30 | 2019-12-03 | 郑州阿帕斯科技有限公司 | 一种网页信息的展示方法及装置 |
| CN111045668A (zh) * | 2019-12-03 | 2020-04-21 | 安徽航天信息科技有限公司 | 一种跨平台的移动端系统开发方法及装置 |
| CN111274510A (zh) * | 2020-01-15 | 2020-06-12 | 平安银行股份有限公司 | 页面渲染方法、装置、设备及可读存储介质 |
Non-Patent Citations (4)
| Title |
|---|
| PINKU HAZARIKA: "Recommendations for Webview Based Mobile Applications on Android", 《2014 IEEE INTERNATIONAL CONFERENCE ON ADVANCED COMMUNICATIONS, CONTROL AND COMPUTING TECHNOLOGIES》, pages 1 - 4 * |
| 刘辟径: "硬件加速Android网页图层合成的研究与实现", 《万方》, pages 1 - 20 * |
| 张志远: "基于Android混合模式开发的实习宝软件", 《中国优秀硕士学位论文全文数据库 信息科技辑》, no. 4, pages 138 - 686 * |
| 百家晓东: "Flutter中显示原生系统的视图控件", Retrieved from the Internet <URL:《https://blog.csdn.net/tianmaxingkong_/article/details/104170334》> * |
Cited By (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112799665A (zh) * | 2021-01-27 | 2021-05-14 | 视若飞信息科技(上海)有限公司 | 一种以WebUI的方式构建App功能界面的方法 |
| CN113297522A (zh) * | 2021-05-10 | 2021-08-24 | 广州虎牙科技有限公司 | 一种页面渲染方法、装置、电子设备及可读存储介质 |
| WO2022252804A1 (zh) * | 2021-05-31 | 2022-12-08 | 华为技术有限公司 | 显示视图控件的方法及装置 |
| CN113377475A (zh) * | 2021-06-22 | 2021-09-10 | 北京字节跳动网络技术有限公司 | 一种内容展示方法及终端设备 |
| CN113377475B (zh) * | 2021-06-22 | 2024-04-09 | 北京字节跳动网络技术有限公司 | 一种内容展示方法及终端设备 |
| CN113436344A (zh) * | 2021-06-25 | 2021-09-24 | 广联达科技股份有限公司 | 一种引用视图的显示方法、系统及图像显示设备 |
| CN113741764A (zh) * | 2021-07-30 | 2021-12-03 | 阿里巴巴新加坡控股有限公司 | 组件处理方法、装置及设备 |
| CN116166255A (zh) * | 2021-11-25 | 2023-05-26 | 华为技术有限公司 | 界面生成方法及电子设备 |
| CN114356324A (zh) * | 2021-12-16 | 2022-04-15 | 阿里巴巴（中国）有限公司 | 界面处理方法、装置、设备和存储介质 |
| CN114371837A (zh) * | 2022-01-07 | 2022-04-19 | 深圳依时货拉拉科技有限公司 | 地图构建方法、装置、存储介质和计算机设备 |
| CN115079923A (zh) * | 2022-06-17 | 2022-09-20 | 北京新唐思创教育科技有限公司 | 事件处理方法、装置、设备及介质 |
| CN115079923B (zh) * | 2022-06-17 | 2023-11-07 | 北京新唐思创教育科技有限公司 | 事件处理方法、装置、设备及介质 |
| CN115408047A (zh) * | 2022-08-11 | 2022-11-29 | 北京大氪信息科技有限公司 | 一种版本发布方法、装置及电子设备 |
| CN115408047B (zh) * | 2022-08-11 | 2023-07-25 | 北京大氪信息科技有限公司 | 一种版本发布方法、装置及电子设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111966354A (zh) | 一种页面显示方法、装置及计算机可读存储介质 | |
| CN107832108B (zh) | 3D canvas网页元素的渲染方法、装置及电子设备 | |
| CN108010112B (zh) | 动画处理方法、装置及存储介质 | |
| US11403364B2 (en) | Method and terminal device for extracting web page content | |
| CN109358936B (zh) | 信息处理方法、装置、存储介质、电子设备及系统 | |
| CN110691136B (zh) | 数据交互方法、装置、电子设备及存储介质 | |
| US11902377B2 (en) | Methods, systems, and computer program products for implementing cross-platform mixed-reality applications with a scripting framework | |
| US8886669B2 (en) | File access via conduit application | |
| US20170173467A1 (en) | Technologies for native game experience in web rendering engine | |
| CN108021356B (zh) | 一种跨屏跨平台的可量测实景地图组织方法 | |
| CN105354013A (zh) | 应用界面渲染方法及装置 | |
| CN111339458B (zh) | 页面呈现方法和装置 | |
| CN105096368B (zh) | 三维对象处理方法和相关装置 | |
| CN110908712A (zh) | 移动端跨平台的数据处理方法和设备 | |
| CN109325157B (zh) | 基于浏览器的地理空间信息承载方法 | |
| CN113411664B (zh) | 基于子应用的视频处理方法、装置和计算机设备 | |
| CN104850388A (zh) | 网页绘制方法及装置 | |
| CN112272109A (zh) | 一种网络拓扑图生成方法、设备及系统 | |
| US20240007701A1 (en) | Continuing video playback when switching from a dynamic page to a non-dynamic page | |
| CN112052416A (zh) | 用于展示图像元素的方法和装置 | |
| CN111324381B (zh) | 开发系统、方法、装置、计算机设备及存储介质 | |
| CN110443880A (zh) | 图像渲染方法、装置、存储介质及电子设备 | |
| EP3835967A1 (en) | Card data display method and apparatus, and storage medium | |
| WO2023005751A1 (zh) | 渲染方法及电子设备 | |
| CN108133029B (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 |