CN108958875B - 一种页面显示方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明公开了一种页面显示方法、装置、电子设备及存储介质，其中，该方法包括：对包含有子控件的原生父控件进行封装，其中，子控件用于对原生页面进行布局修改；基于子控件，获取原生父控件在非原生页面上显示时的显示参数；基于显示参数，在预设页面上对原生父控件进行绘制，实现绘制有原生父控件的预设页面通过非原生页面进行显示；本发明的方法、装置、电子设备及存储介质，基于得到的显示参数，在预设页面上对该原生父控件进行绘制，从而实现了对预设页面的布局修改，使得该绘制有原生父控件的预设页面可以在非原生页面上进行显示，即：实现了基于该原生父控件修改的预设页面可以在非原生页面上显示。

Description

一种页面显示方法、装置、电子设备及存储介质

技术领域

本发明涉及计算机领域，尤其涉及一种页面显示方法、装置、电子设备及存储介质。

背景技术

在现有技术中，基于封装的原生父控件修改的页面可以在非原生页面上进行显示。但是，当封装的原生父控件中包含有实现原生页面布局修改的子控件时，基于该封装的原生父控件修改的页面无法无法在非原生页面上进行显示。

发明内容

本发明的主要目的在于提出一种页面显示方法、装置、电子设备及存储介质，其克服了以下技术问题：当封装的原生父控件中包含有实现原生页面布局修改的子控件时，基于该封装的原生父控件修改的页面无法在非原生页面上进行显示。

根据本发明的第一个方面，提供了一种页面显示方法，所述方法包括：对包含有子控件的原生父控件进行封装，其中，所述子控件用于对原生页面进行布局修改；基于所述子控件，获取所述原生父控件在非原生页面上显示时的显示参数；基于所述显示参数，在预设页面上对所述原生父控件进行绘制，实现所述绘制有原生父控件的预设页面通过所述非原生页面进行显示。

可选的，所述基于子控件，获取原生父控件在非原生页面上显示时的显示参数，包括：通过与所述原生父控件适配的页面布局逻辑数据，对所述子控件进行预处理；基于经预处理的所述子控件，获取所述原生父控件在所述非原生页面上进行显示时的所述显示参数。

可选的，在所述获取原生父控件在非原生页面上显示时的显示参数之后，所述在预设页面上对所述原生父控件进行绘制之前，所述方法还包括：基于所述显示参数，确定所述原生父控件在所述非原生页面上的显示位置，以在所述预设页面上的所述显示位置对所述原生父控件进行绘制。

可选的，所述显示参数包括：所述原生父控件的宽、高及距离所述非原生页面的边缘的距离数值。

根据本发明的第二个方面，提供了一种页面显示装置，所述装置包括：

封装模块，用于对包含有子控件的原生父控件进行封装，其中，所述子控件用于对原生页面进行布局修改；获取模块，用于基于所述子控件，获取所述原生父控件在非原生页面上显示时的显示参数；绘制模块，用于基于所述显示参数，在预设页面上对所述原生父控件进行绘制，实现所述绘制有原生父控件的预设页面通过所述非原生页面进行显示。

可选的，所述获取模块包括：预处理单元，用于通过与所述原生父控件适配的页面布局逻辑数据，对所述子控件进行预处理；获取单元，用于基于经预处理的所述子控件，获取所述原生父控件在所述非原生页面上进行显示时的所述显示参数。

可选的，所述装置还包括：定位模块，用于在所述获取原生父控件在非原生页面上显示时的显示参数之后，所述在预设页面上对所述原生父控件进行绘制之前，基于所述显示参数，确定所述原生父控件在所述非原生页面上的显示位置，以在所述预设页面上的所述显示位置对所述原生父控件进行绘制。

可选的，所述显示参数包括：所述原生父控件的宽、高及距离所述非原生页面的边缘的距离数值。

根据本发明的第三个方面，提供了一种电子设备，包括处理器和存储器；

所述存储器用于存储计算机指令，所述处理器用于运行所述存储器存储的计算机指令，以实现上述的一种页面显示方法。

根据本发明的第四个方面，提供了一种计算机可读存储介质，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现上述的一种页面显示方法。

本发明有益效果如下：基于得到的显示参数，在预设页面上对该原生父控件进行绘制，从而实现了对预设页面的布局修改，而且，该绘制有所述原生父控件的预设页面可以在非原生页面上进行显示，即：实现了基于该原生父控件修改的预设页面可以在非原生页面上显示。

附图说明

图1为本发明第一实施例一种页面显示方法的流程框图；

图2为本发明第二实施例一种页面显示方法的流程框图；

图3为本发明第三实施例一种页面显示方法的流程框图；

图4为本发明第四实施例一种页面显示方法的流程框图；

图5为本发明第五实施例一种页面显示装置的结构示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

在后续的描述中，使用用于表示元件的诸如“模块”、“部件”或“单元”的后缀仅为了有利于本发明的说明，其本身没有特定的意义。因此，“模块”、“部件”或“单元”可以混合地使用。

为了便于理解本发明实施例，下面通过几个具体实施例对本发明的实施过程进行详细的阐述。

本发明第一实施例提供一种页面显示方法，该方法包括：对包含有子控件的原生父控件进行封装，其中，所述子控件用于对原生页面进行布局修改；基于所述子控件，获取所述原生父控件在非原生页面上显示时的显示参数；基于所述显示参数，在预设页面上对所述原生父控件进行绘制，实现所述绘制有原生父控件的预设页面通过所述非原生页面进行显示。

就此，基于得到的显示参数，在预设页面上对该原生父控件进行绘制，从而实现了对预设页面的布局修改，使得该绘制有原生父控件的预设页面可以在非原生页面上进行显示，即：实现了基于该原生父控件修改的预设页面可以在非原生页面上显示。

图1为本发明第一实施例一种页面显示方法的流程框图。根据图1所示，本发明第一实施例提供了一种页面显示方法，该方法包括：

S11：对包含有子控件的原生父控件进行封装，其中，所述子控件用于对原生页面进行布局修改；

在本实施例中，首先需要对含有子控件的原生父控件进行封装，其中，该子控件用于对原生页面的布局进行修改。

S12：基于所述子控件，获取所述原生父控件在非原生页面上显示时的显示参数；

基于封装后的原生父控件中的子控件，通过对原生父控件在非原生页面上显示时的各项参数进行测量，并基于测量结果，就可以使用原生父控件提供的处理方法得到显示参数。

其中，该处理方法可为显示屏可视距离算法，但是，在本实施例中，并不对该处理方法进行限定，只需其满足本实施例的要求即可。

其中，该显示参数包括但不限于：所述原生父控件的宽、高及距离所述非原生页面的边缘的距离数值。

S13：基于所述显示参数，在预设页面上对所述原生父控件进行绘制，实现所述绘制有原生父控件的预设页面通过所述非原生页面进行显示。

在本实施例中，基于得到的显示参数，在预设页面上对该原生父控件进行绘制，即：实现了对预设页面的布局修改，使得该绘制有原生父控件的预设页面可以在非原生页面上进行显示，即：实现了基于该原生父控件修改的预设页面可以在非原生页面上显示。

图2为本发明第二实施例一种页面显示方法的流程框图。根据图2所示，本发明第二实施例提供了一种页面显示方法，该方法包括：

S21：对包含有子控件的原生父控件进行封装，其中，所述子控件用于对原生页面进行布局修改；

在本实施例中，首先需要对含有子控件的原生父控件进行封装，其中，该子控件用于对原生页面的布局进行修改。

S22：通过与所述原生父控件适配的页面布局逻辑数据，对所述子控件进行预处理；

在本实施例中，需要通过与原生父控件适配的页面布局逻辑数据，对子控件进行预处理，从而使得该经过预处理的子控件可以被调用。

当然，若用于对子控件进行预处理的逻辑数据并不与该原生父控件适配，则在本实施例中需要重写该逻辑数据，以得到与原生父控件适配的页面布局逻辑数据。即：基于经重写得到的页面布局逻辑数据，对子控件进行预处理，其中，该重写的页面布局逻辑数据与原生父控件适配。

此外，在本实施例中，并不对该页面布局逻辑数据进行限定，只需其能实现该子控件可以被调用即可，而且，上述的页面布局逻辑数据包括但不限于：页面布局方法requestLayout。在本实施例中，由于对子控件进行预处理是为了使得该子控件能够被调用，故在本实施例中并不对该预处理的具体内容进行限定，只需其能够使得该子控件可以被调用即可。

S23：基于经预处理的所述子控件，获取所述原生父控件在所述非原生页面上进行显示时的所述显示参数。

在子控件被预处理后，使得该子控件可以被调用。故在本实施例中，通过该子控件，可以对原生父控件在非原生页面上进行显示时的各项参数进行测量，并基于测量结果，就可以使用原生父控件提供的处理方法得到显示参数。

其中，该处理方法可为显示屏可视距离算法，但是，在本实施例中，并不对该处理方法进行限定，只需其满足本实施例的要求即可。

其中，该显示参数包括但不限于：所述原生父控件的宽、高及距离所述非原生页面的边缘的距离数值。

S24：基于所述显示参数，在预设页面上对所述原生父控件进行绘制，实现所述绘制有原生父控件的预设页面通过所述非原生页面进行显示。

在本实施例中，基于得到的显示参数，在预设页面上对该原生父控件进行绘制，即：实现了对预设页面的布局修改，使得该绘制有所述原生父控件的预设页面可以在非原生页面上进行显示，即：实现了基于该原生父控件修改的预设页面可以在非原生页面上显示。

图3为本发明第三实施例一种页面显示方法的流程框图。根据图3所示，本发明第三实施例提供了一种页面显示方法，该方法包括：

S31：对包含有子控件的原生父控件进行封装，其中，所述子控件用于对原生页面进行布局修改；

在本实施例中，首先需要对含有子控件的原生父控件进行封装，其中，该子控件用于对原生页面的布局进行修改。

S32：通过与所述原生父控件适配的页面布局逻辑数据，对所述子控件进行预处理；

在本实施例中，需要通过与所述原生父控件适配的页面布局逻辑数据，对所述子控件进行预处理，从而使得该经过预处理的子控件可以被调用；

当然，若用于对子控件进行预处理的逻辑数据并不与该原生父控件适配，则在本实施例中需要重写该逻辑数据，以得到与原生父控件适配的页面布局逻辑数据。即：基于经重写得到的页面布局逻辑数据，对子控件进行预处理，其中，该重写的页面布局逻辑数据与原生父控件适配。

其中，该页面布局逻辑数据包括但不限于：页面布局方法requestLayout。

S33：基于经预处理的所述子控件，获取所述原生父控件在所述非原生页面上进行显示时的所述显示参数。

在子控件被预处理后，使得该子控件可以被调用。故在本实施例中，通过该子控件，可以对原生父控件在非原生页面上进行显示时的各项参数进行测量，并基于测量结果，就可以使用原生父控件提供的处理方法得到显示参数。

其中，该处理方法可为显示屏可视距离算法，但是，在本实施例中，并不对该处理方法进行限定，只需其满足本实施例的要求即可。

其中，该显示参数包括但不限于：所述原生父控件的宽、高及距离所述非原生页面的边缘的距离数值。

S34：基于所述显示参数，确定所述原生父控件在所述非原生页面上的显示位置，以在所述预设页面上的所述显示位置对所述原生父控件进行绘制。

在获得上述的显示数据后，即可获得该封装后的原生父控件的宽、高及距离非原生页面的边缘的距离数值等参数数值，通过该些参数数值可以计算出该原生父控件在非原生页面上的左、上、右、下的位置，得到位置参数。

在得到位置参数后，即可通过调用布局方法layout确定该封装后的原生父控件在非原生页面上的显示位置，即：基于计算出的原生父控件的左、上、右、下的位置参数，可以通过调用布局方法layout对原生父控件在非原生页面上的位置进行定位，从而，即可得到该原生父控件在非原生页面上的显示位置。然后，就可以在预设页面上的该显示位置对该原生父控件进行绘制。

S35：基于所述显示参数，在预设页面上的所述显示位置对所述原生父控件进行绘制，实现所述绘制有原生父控件的预设页面通过所述非原生页面进行显示。

在对该原生父控件进行定位之后，得到该原生父控件在非原生页面上的显示位置，基于该显示参数，在预设页面上定位的显示位置对该封装后的原生父控件对进行绘制，以得到修改之后的预设页面，使得该修改之后的预设页面可以在非原生页面上显示。

为了更好说明本实施例所述方法的实施过程，下面结合一个非原生页面为ReactNative页面的具体应用示例，对本实施例所述方法进行说明。

图4为本发明第四实施例一种页面显示方法的流程框图。根据图4所示，本发明第四实施例了一种页面显示方法，该方法包括：

1、封装原生页面VIEW。

具体的，将原生VIEW进行封装，其中，该原生VIEW中包括实现原生页面布局修改的子页面VIEW，其中，该原生VIEW相当于实施例一至三中的原生父控件,子VIEW相当于实施例一至三中的子控件；即：该步骤相当于实施例一至三中的将原生父控件进行封装，而且，原生父控件包括有实现原生页面布局修改的子控件；

2、在原生VIEW中重写requestLayout方法；

具体的，重写该原生VIEW对应的页面布局方法requestLayout，使得终端系统可以调用该重写的requestLayout方法对实现原生页面布局修改的子View进行预处理，使得该经过预处理的子View可以被调用；其中，该页面布局方法requestLayout相当于第一至三实施例中的页面布局逻辑数据。在本实施例中，由于对子View进行预处理是为了使得该子View能够被调用，故在本实施例中并不对该预处理的具体内容进行限定，只需其能够使得该子View可以被调用即可。

3、基于原生VIEW的显示参数,调用layout方法进行定位。

具体的，基于经过预处理的子View,对封装后的原生View进行测量。基于测量结果，就可以使用原生父控件提供的方法得到显示参数。其中，该显示参数包括但不限于：原生View的宽、高及距离所述非原生页面的边缘的距离参数。通过该显示参数计算出封装后原生View在非原生页面上的左、上、右、下的位置参数。然后，基于位置参数，并通过调用layout方法对封装后的原生View在ReactNative页面上的位置进行定位，得到原生View在ReactNative页面上的显示位置；在预设页面的该显示位置上绘制该封装后的原生View，得到修改之后的预设页面，从而使得该修改后的预设页面可以在ReactNative页面上显示。其中，该ReactNative页面相当于第一至三实施例中的非原生页面。

图5为本发明第五实施例一种页面显示装置的流程框图。根据图5所示，本发明第五实施例提供了一种页面显示装置，所述装置包括：

封装模块110，用于对包含有子控件的原生父控件进行封装，其中，所述子控件用于对原生页面进行布局修改；获取模块120，用于基于所述子控件，获取所述原生父控件在非原生页面上显示时的显示参数；绘制模块130，用于基于所述显示参数，在预设页面上对所述原生父控件进行绘制，实现所述绘制有原生父控件的预设页面通过所述非原生页面进行显示。

可选的，所述获取模块120包括：预处理单元，用于通过与所述原生父控件适配的页面布局逻辑数据，对所述子控件进行预处理；获取单元，用于基于经预处理的所述子控件，获取所述原生父控件在所述非原生页面上进行显示时的所述显示参数。

可选的，所述装置还包括：定位模块，用于在所述获取原生父控件在非原生页面上显示时的显示参数之后，所述在预设页面上对所述原生父控件进行绘制之前，基于所述显示参数，确定所述原生父控件在所述非原生页面上的显示位置，以在所述预设页面上的所述显示位置对所述原生父控件进行绘制

可选的，所述显示参数包括：所述原生父控件的宽、高及距离所述非原生页面的边缘的距离数值。

本发明第六实施例提供了一种电子设备，包括处理器和存储器；所述存储器用于存储计算机指令，所述处理器用于运行所述存储器存储的计算机指令，以实现上述的一种页面显示方法。

本发明第六实施例中的一种电子设备所涉及的名词及实现原理具体可以参照本发明实施例中的第一至四实施例的一种页面显示方法，在此不再赘述。

本发明第七实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储有一个或者多个模块，所述一个或者多个模块可被一个或者多个处理器执行，以实现上述的一种页面显示方法。

本发明第四实施例中的一种计算机可读存储介质所涉及的名词及实现原理具体可以参照本发明实施例中的第一至四实施例的一种页面显示方法，在此不再赘述。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。

上面结合附图对本发明的实施例进行了描述，但是本发明并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本发明的启示下，在不脱离本发明宗旨和权利要求所保护的范围情况下，还可做出很多形式，这些均属于本发明的保护之内。

Claims (8)

1.一种页面显示方法，其特征在于，所述方法包括：

对包含有子控件的原生父控件进行封装，其中，所述子控件用于对原生页面进行布局修改；

基于所述子控件，获取所述原生父控件在非原生页面上显示时的显示参数；

基于所述显示参数，在预设页面上对所述原生父控件进行绘制，实现所述绘制有原生父控件的预设页面通过所述非原生页面进行显示；

所述基于子控件，获取原生父控件在非原生页面上显示时的显示参数，包括：

通过与所述原生父控件适配的页面布局逻辑数据，对所述子控件进行预处理；

基于经预处理的所述子控件，获取所述原生父控件在所述非原生页面上进行显示时的所述显示参数。

2.根据权利要求1所述的方法，其特征在于，在所述获取原生父控件在非原生页面上显示时的显示参数之后，所述在预设页面上对所述原生父控件进行绘制之前，所述方法还包括：

基于所述显示参数，确定所述原生父控件在所述非原生页面上的显示位置，以在所述预设页面上的所述显示位置对所述原生父控件进行绘制。

3.根据权利要求1所述的方法，其特征在于，所述显示参数包括：所述原生父控件的宽、高及距离所述非原生页面的边缘的距离数值。

4.一种页面显示装置，其特征在于，所述装置包括：

封装模块，用于对包含有子控件的原生父控件进行封装，其中，所述子控件用于对原生页面进行布局修改；

获取模块，用于基于所述子控件，获取所述原生父控件在非原生页面上显示时的显示参数；

绘制模块，用于基于所述显示参数，在预设页面上对所述原生父控件进行绘制，实现所述绘制有原生父控件的预设页面通过所述非原生页面进行显示；

所述获取模块包括：

预处理单元，用于通过与所述原生父控件适配的页面布局逻辑数据，对所述子控件进行预处理；

获取单元，用于基于经预处理的所述子控件，获取所述原生父控件在所述非原生页面上进行显示时的所述显示参数。

5.根据权利要求4所述的装置，其特征在于，所述装置还包括：

定位模块，用于在所述获取原生父控件在非原生页面上显示时的显示参数之后，所述在预设页面上对所述原生父控件进行绘制之前，基于所述显示参数，确定所述原生父控件在所述非原生页面上的显示位置，以在所述预设页面上的所述显示位置对所述原生父控件进行绘制。

6.根据权利要求4所述的装置，其特征在于，所述显示参数包括：所述原生父控件的宽、高及距离所述非原生页面的边缘的距离数值。

7.一种电子设备，其特征在于，包括处理器和存储器；

所述存储器用于存储计算机指令，所述处理器用于运行所述存储器存储的计算机指令，以实现权利要求1至3中任一项所述的一种页面显示方法。

8.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现权利要求1至3中任一项所述的一种页面显示方法。

Images