页面开发处理方法、装置、设备及存储介质与流程

1.本技术涉及数据可视化技术领域，尤其涉及一种页面开发处理方法、装置、设备及存储介质。


背景技术：

2.大屏展示是当前可视化领域的一项热门应用。通过大屏展示能够将复杂且抽象的数据通过可视的、交互的方式进行展示，从而形象直观地表达数据蕴含的信息和规律，使用户更易理解。
3.大屏展示中包括各种各样的图表，通过这些图表能够实现数据可视化。要将这些数据可视化，目前是通过将页面中将要展示的内容划分为不同的功能模块，并且针对每个功能模块进行开发，这些开发好的功能模块可以在新的页面开发过程中，再通过组合的方式重新组装得到新的页面。当开发人员在进行新的页面开发时，可以调用与新的页面中待开发模块大小相同的功能模块进行复用。
4.然而，上述方案中只能调用与新的页面中待开发模块大小相同的模块进行复用，导致功能模块复用的灵活度较低。


技术实现要素：

5.本技术提供一种页面开发处理方法、装置、设备及存储介质，用以解决功能模块复用的灵活度较低的问题。
6.第一方面，本技术提供一种页面开发处理方法，包括：获取待开发的目标页面的页面布局信息；所述页面布局信息包括：所述目标页面所包括的m个组件的标识，以及，各所述组件在所述目标页面中的布局位置和布局大小；所述m为大于或等于1的整数；根据各所述组件的标识，从组件库中获取封装好的各所述组件；若所述m个组件中存在n个第一组件的初始大小与布局大小不同，则根据每个所述第一组件的初始大小和布局大小，调整每个所述第一组件的大小，以使调整后的所述第一组件的大小等于所述第一组件的布局大小；所述n为大于1且小于或等于m的整数；根据调整后的n个所述第一组件、所述m个组件中除n个所述第一组件之外的组件，各所述组件在所述目标页面中的布局位置，生成所述目标页面。
7.第二方面，本技术提供一种页面开发处理装置，所述装置包括：获取模块，用于获取待开发的目标页面的页面布局信息；所述页面布局信息包括：所述目标页面所包括的m个组件的标识，以及，各所述组件在所述目标页面中的布局位置和布局大小；所述m为大于或等于1的整数；所述获取模块，还用于根据各所述组件的标识，从组件库中获取封装好的各所述组件；调整模块，用于若所述m个组件中存在n个第一组件的初始大小与布局大小不同，则根据每个所述第一组件的初始大小和布局大小，调整每个所述第一组件的大小，以使调整后的所述第一组件的大小等于所述第一组件的布局大小；所述n为大于1且小于或等于m的整数；生成模块，用于根据调整后的n个所述第一组件、所述m个组件中除n个所述第一组件之外的组件，各所述组件在所述目标页面中的布局位置，生成所述目标页面。
8.第三方面，本技术提供一种电子设备，包括：处理器，以及与所述处理器通信连接的存储器；所述存储器存储计算机执行指令；所述处理器执行所述存储器存储的计算机执行指令，以实现如第一方面所述的方法。
9.第四方面，本技术提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现如第一方面所述的方法。
10.第五方面，本技术提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现如第一方面所述的方法。
11.本技术提供的页面开发处理方法、装置、设备及存储介质，通过获取待开发的目标页面的页面布局信息，页面布局信息包括目标页面所包括的m个组件的标识，以及，各组件在目标页面中的布局位置和布局大小，m为大于或等于1的整数，根据各组件的标识，从组件库中获取封装好的各组件，若m个组件中存在n个第一组件的初始大小与布局大小不同，则根据每个第一组件的初始大小和布局大小，调整每个第一组件的大小，以使调整后的第一组件的大小等于第一组件的布局大小，n为大于1且小于或等于m的整数，根据调整后的n个第一组件、m个组件中除n个第一组件之外的组件，各组件在目标页面中的布局位置，生成目标页面。由于在m个组件中存在n个第一组件的初始大小与布局大小不同，则根据每个第一组件的初始大小和布局大小，调整每个第一组件的大小，以使调整后的第一组件的大小等于第一组件的布局大小，提高组件的复用率，从而提高组件复用的灵活度，进一步提高页面开发效率。
附图说明
12.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本技术的实施例，并与说明书一起用于解释本技术的原理。
13.图1为现有技术中的一种模块复用的示意图；
14.图2为本技术实施例提供的应用场景示意图；
15.图3为本技术实施例提供的页面开发处理方法的流程图一；
16.图4为本技术实施例提供的页面框架的示意图；
17.图5为本技术实施例提供的页面开发处理方法的流程图二；
18.图6为本技术实施例提供的页面开发处理方法的流程图三；
19.图7为本技术实施例提供的通过统一数据渲染接口获取渲染数据的示意图；
20.图8为本技术实施例提供的根据各封装好的组件进行组合的示意图；
21.图9为本技术实施例提供的页面开发处理装置的结构示意图；
22.图10为本技术实施例提供的电子设备的结构示意图。
23.通过上述附图，已示出本技术明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本技术构思的范围，而是通过参考特定实施例为本领域技术人员说明本技术的概念。
具体实施方式
24.这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及
附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本技术相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本技术的一些方面相一致的装置和方法的例子。
25.术语解释：
26.大屏展示：基于业务数据内容、以大屏的形式呈现统计、监控等信息。
27.组件：通过自定义方式开发的html标签。
28.随着大数据的发展，用户能够获取和分析的信息数据越来越多。通常，用户会将这些信息数据进行分类或分析，并应用于各种各样的场景，比如进行用户行为分析等。其中，将数据分析结果在大屏的页面进行展示(简称为大屏展示)是一种流行的方式。大屏展示能够将一些业务的关键指标通过数据可视化的方式展示到一块或多块发光二极管(light-emitting diode，led)大屏上，实现以大屏为主要展示载体的数据可视化设计。也可以理解为是通过整个超大尺寸的屏幕来展示关键数据内容。大屏具有面积大、可展示信息多的特点，通过关键信息大屏共享的方式可方便团队讨论和决策，所以大屏也常用来做数据分析监测使用。而大屏上页面展示的内容离不开后台开发人员的开发工作。
29.在目前基于组件化的方式进行页面开发的方式中，是将页面中的各个功能模块剥离出来，再通过组合的方式重新组装成一个新的页面。图1为现有技术中的一种模块复用的示意图。如图1所示，大屏1的页面中包括模块a、模块b、模块c、模块d和模块e，通过对大屏1的页面中的模块b、模块c、模块d和模块e进行重新组合，可以得到大屏2的页面。无论是大屏1还是大屏2，每个模块均对应有样式，样式可以理解为字体、图片等显示内容的大小、颜色等属性。
30.并且模块化重新组装的方式，若将复用的模块与待开发页面中待添加组件的外部整体布局，例如布局大小不同，每个模块还需要根据其所属的外部整体布局做调整。而在调整过程中，模块之间的样式可能会产生冲突，从而无法达到预期效果。因而，每个模块也不能随意组合。举例来说，开发人员a开发了模块a，其样式命名为样式a，样式a的含义是字体为红色，开发人员b开发了模块b，其样式也命名为样式a，样式a的含义是字体无颜色，而开发人员c在复用模块a和模块b时，模块b的样式就会受模块a的样式的影响(比如模块b的字体显示为红色)，导致模块b达不到所需要的展示效果的问题。因此，若针对某个功能模块进行大小调节，可能会引起其他功能模块的调整，从而造成页面节点之间相互冲突的问题。
31.综上，在现有技术中，设计好的模块在复用时，仅在与自身大小相同或相差较小的页面节点中才能进行较好地渲染展示，导致模块复用的灵活度较低。
32.针对上述技术问题，本技术的发明人提出如下技术构思：将待开发的页面视为多个功能模块，针对每个功能模块进行组件化设计，将设计好的组件进行存储，以在后续的新页面开发过程中，若遇到需要相同功能的功能模块，则可以直接复用，并且可以自动调整已开发组件的大小，以使已开发组件自适应页面中节点(待添加组件的区域)的布局大小。而通过将组件库中每个组件封装好，使得各个组件相互独立。从而针对某个功能模块进行大小调节，不会引起其他功能模块的调整，以解决现有技术中的问题。
33.下面以具体地实施例对本技术的技术方案以及本技术的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本技术的实施例进行描述。
34.图2为本技术实施例提供的应用场景示意图。如图2所示，该应用场景包括终端设备21和服务器22；其中，终端设备21可以是数据可视化大屏设备，服务器22可以是单独的一台服务器，或者是包括多台服务器的服务器集群。
35.用户可以在终端设备21上针对待开发页面中的功能模块进行组件化设计，并将设计好的组件存储在组件库中。组件库可以设置在终端设备21中，也可以设置在服务器22中，或者是终端设备21和服务器22之外的第三方设备中，本实施例对此不作限制。这里的用户可以是页面开发人员。
36.当上述用户或其他用户在进行新的页面开发时，可以直接从组件库中获取已开发组件进行复用。
37.基于上述应用场景，本技术的实施例提供了一种页面开发处理方法。图3为本技术实施例提供的页面开发处理方法的流程图一。如图3所示，该页面开发处理方法，包括如下步骤：
38.s301、获取待开发的目标页面的页面布局信息，页面布局信息包括：目标页面所包括的m个组件的标识，以及，各组件在目标页面中的布局位置和布局大小，m为大于或等于1的整数。
39.本实施例的方法的执行主体可以是终端设备，也可以是服务器。
40.若实施例的方法的执行主体为终端设备，则本步骤是终端设备接收用户输入的目标页面所需实现的功能，生成待开发的目标页面的页面布局信息，或者终端设备接收用户输入的待开发的目标页面的页面布局信息。之后，由终端设备直接执行步骤s302至步骤s304。
41.若实施例的方法的执行主体为服务器，则本步骤是终端设备接收用户输入的目标页面所需实现的功能，生成待开发的目标页面的页面布局信息并发送至服务器，或者终端设备接收用户输入的待开发的目标页面的页面布局信息并发送至服务器。即服务器从终端设备获取待开发的目标页面的页面布局信息，并执行步骤s302至步骤s304。
42.在一些示例中，可以预先设计好一些页面框架并存储在终端设备或服务器中，这些页面框架包括页面布局信息。用户通过输入待开发的目标页面所需实现的功能，可以调用预先设计好的页面框架。页面框架可以理解为是一种适用于不同业务场景下的通用的页面模板。举例来说，用户在终端设备中输入“监控”、“用户行为分析”等功能，则终端设备可以自动显示监控页面、用户行为分析页面的页面框架。
43.图4为本技术实施例提供的页面框架的示意图。
44.如图4所示，可以将页面框架理解为通过多个矩形框划分为不同节点的空白页面，这里的每个矩形框(图中标号为1、2、3的方框)在空白页面中的位置对应每个组件在目标页面中的布局位置，每个矩形框的大小对应每个组件在目标页面中的布局大小。
45.在另一些示例中，用户还可以自行在终端设备中输入页面布局信息。即用户自行输入目标页面所包括的m个组件的标识、以及，各组件在目标页面中的布局位置和布局大小。
46.其中，组件的标识可以是组件的名称，例如饼状图、柱状图、地图等标识。根据组件的标识可以获取到将添加至待开发的目标页面中的组件。
47.s302、根据各组件的标识，从组件库中获取封装好的各组件。
48.如上介绍，组件库中包括多个可复用的组件以及每个组件对应的标识。针对各组件中每个组件，根据每个组件的标识可以在组件库中查找与该组件的标识对应的组件。
49.在一些示例中，组件的标识可以是组件的名称。例如，组件的标识为饼状图，则可以直接在组件库中搜索名称为饼状图的组件。
50.本步骤中，组件库中的各个组件是封装好的，意味着各个组件之间是独立的。也可以理解为是将组件中的组件元素都进行封装，得到一个独立的组件。
51.s303、若m个组件中存在n个第一组件的初始大小与布局大小不同，则根据每个第一组件的初始大小和布局大小，调整每个第一组件的大小，以使调整后的第一组件的大小等于第一组件的布局大小，n为大于1且小于或等于m的整数。
52.请继续参阅图4，若将一组件待添加至图4中一个矩形框中，而组件的初始大小于矩形框的大小不同，则本步骤可以理解为是将组件调整为与图4中的矩形框的大小相同。
53.进一步的，步骤s303之后，还可以包括：
54.步骤a1、根据第一组件的布局大小对应的高度，以及，第一组件的初始大小对应的高度，得到第一比值。
55.步骤a2、根据第一组件的布局大小对应的宽度，以及，第一组件的初始大小对应的宽度，得到第二比值。
56.步骤a2之后，可以执行步骤a3或步骤a4：
57.步骤a3、根据第一比值和第二比值中较小的比值，分别调整第一组件中每个组件元素的高度和宽度。
58.步骤a4、根据第一比值调整第一组件中每个组件元素的高度，以及根据第二比值调整第一组件中每个组件元素的宽度。
59.具体的，是根据第一比值和第二比值中较小的比值，调整第一组件中每个组件元素的高度，以及，调整第一组件中每个组件元素的宽度。
60.本实施例中，组件库中的每一个组件对应有初始大小，该初始大小包括高度和宽度，当组件放置于不同的页面节点中时，需要根据页面节点的大小(对应第一组件的布局大小)和初始大小，来自动计算组件内各个组件元素的高度和宽度。布局大小可以理解为包括布局高度和布局宽度，经过步骤a3的调整后，第一组件中每个组件元素的高度与第一组件的布局大小中布局宽度相等，且宽度与布局高度相等。
61.举例来说，比如，假定一组件在设计时高宽为400px*400px，则可以视为该组件的初始大小为400*400。当400*400的组件被放置于500*550的页面节点中时，第一比值为500/400，第二比值为550/400，则第组件中组件元素调整后高度＝原高度*(500/400)，调整后宽度＝原宽度*(550/400)。
62.而经过步骤a4的调整，第一组件中每个组件元素的高度和宽度，与第一组件的布局大小中布局宽度或布局高度中较小的值相等。
63.举例来说，假定一组件在设计时高宽为400px*400px，则可以视为该组件的初始大小为400*400。当400*400的组件被放置于500*550的页面节点中时，第一比值为500/400，第二比值为550/400，取500/400和550/400中较小的比值作为比例值(scale＝math.min(500/400，550/400)*100)。以第一比值和第二比值中较小的比值对组件中每个组件元素的初始大小进行调整，能够防止组件元素，例如字体过大溢出页面节点。
64.而进一步的，可以根据组件元素类型，确定步骤a3和步骤a4介绍的两种调整方式，例如针对字体类元素，采用步骤a4的调整方式，针对图片类元素，采用步骤a3的调整方式。
65.s304、根据调整后的n个第一组件、m个组件中除n个第一组件之外的组件，各组件在目标页面中的布局位置，生成目标页面。
66.具体的，将调整后的组件进行组合，可以得到目标页面，可以理解为是在空白页面中添加组件，目标页面中可以包括饼状图、柱状图、地图等各种图表。
67.本实施例通过获取待开发的目标页面的页面布局信息，页面布局信息包括目标页面所包括的m个组件的标识，以及，各组件在目标页面中的布局位置和布局大小，m为大于或等于1的整数，根据各组件的标识，从组件库中获取封装好的各组件，若m个组件中存在n个第一组件的初始大小与布局大小不同，则根据每个第一组件的初始大小和布局大小，调整每个第一组件的大小，以使调整后的第一组件的大小等于第一组件的布局大小，n为大于1且小于或等于m的整数，根据调整后的n个第一组件、m个组件中除n个第一组件之外的组件，各组件在目标页面中的布局位置，生成目标页面。由于在m个组件中存在n个第一组件的初始大小与布局大小不同，则根据每个第一组件的初始大小和布局大小，调整每个第一组件的大小，以使调整后的第一组件的大小等于第一组件的布局大小，提高组件的复用率，从而提高组件复用的灵活度，进一步提高页面开发效率。
68.图5为本技术实施例提供的页面开发处理方法的流程图二。如图5所示，在调整第一组件中每个组件元素的高度和宽度之后，本实施例的方法还包括：
69.s501、确定调整后的第一组件的大小是否等于第一组件的布局大小。
70.具体的，是将调整后的第一组件的宽度与第一组件的布局宽度进行比较，以及将调整后的第一组件的高度与第一组件的布局高度进行比较，以确定调整后的第一组件的宽度是否等于第一组件的布局宽度，或者确定调整后的第一组件的高度是否等于第一组件的布局高度。
71.s502、若调整后的第一组件的大小不等于第一组件的布局大小，则输出提示信息，提示信息用于指示调整后的第一组件的大小不等于第一组件的布局大小。
72.若判断出调整后的第一组件的宽度不等于第一组件的布局宽度，或者调整后的第一组件的高度不等于第一组件的布局高度，则输出调整后的第一组件的宽度不等于第一组件的布局宽度，或者调整后的第一组件的高度不等于第一组件的布局高度的提示信息，以提示用户进行手动调整。
73.可选的，若调整后的第一组件的大小等于第一组件的布局大小，则执行步骤s304。
74.s503、响应于用户输入的第一组件的组件元素的大小信息，再次调整第一组件的大小，以使调整后的第一组件的大小等于第一组件的布局大小。
75.此时，用户可以在终端设备中输入第一组件的组件元素的大小信息，再次调整第一组件的大小，以使调整后的第一组件的大小等于第一组件的布局大小。
76.举例来说，组件基准高宽400,400。组件被放置于一个500*550的容器中时，组件中每个组件元素的实际高度和宽度分别为：调整后高度＝原高度*(500/400)；调整后宽度＝原宽度*(550/400)。则用户可以手动输入500*550，以使终端设备或服务器将第一组件调整为500*550的大小。
77.本实施例通过在调整后的第一组件的大小不等于第一组件的布局大小时，则输出
提示信息，提示信息用于指示调整后的第一组件的大小不等于第一组件的布局大小，以提示用户手动调整组件的大小，并且响应于用户输入的第一组件的组件元素的大小信息，再次调整第一组件的大小，以使调整后的第一组件的大小等于第一组件的布局大小，从而实现针对一些无法通过百分比自动实现自适应调整的组件，可以根据高宽比，手动设置组件中每个组件元素的大小，进一步提高组件复用的灵活度。
78.图6为本技术实施例提供的页面开发处理方法的流程图三。如图6所示，根据调整后的n个第一组件、m个组件中除n个第一组件之外的组件，各组件在目标页面中的布局位置，生成目标页面，包括如下步骤：
79.s601、获取各组件的渲染数据。
80.具体的，获取各组件的渲染数据，包括：调用预设的数据渲染接口，获取所有组件的渲染数据。
81.在一些实施例中，可以是所有组件对应一个数据渲染接口，则本步骤是针对所有组件调用同一个数据渲染接口，以获取所有组件的渲染数据。
82.图7为本技术实施例提供的通过统一数据渲染接口获取渲染数据的示意图。如图7所示，可以看到，服务端(服务器)通过数据总线与终端设备上的所有组件通信连接，以实现每个组件实现相同的数据渲染方法，通过公共的数据总线为每个组件提供数据。
83.在另一些实施例中，还可以是所有部件中的部分组件对应一个数据渲染接口，则本步骤是针对所有组件调用至少两个数据渲染接口，以获取所有组件的渲染数据。
84.s602、根据调整后的n个第一组件、m个组件中除n个第一组件之外的组件，各组件在目标页面中的布局位置，将各组件添加至空白页面中，得到待渲染页面。
85.举例来说，调整后的第一组件为饼状图，第一组件在目标页面的布局位置位于目标页面的左上方，则是将饼状图添加至空白页面中。应注意，此时得到的待渲染页面是未添加渲染数据的页面，即待渲染页面，其不是最终展示给使用大屏展示的用户的页面。
86.s603、利用各组件的渲染数据，对待渲染页面中各组件进行渲染，得到目标页面。
87.本实施例中，每个组件对应有数据类型，而数据渲染接口获取到的渲染数据中每个渲染数据也对应有数据类型。在所有组件的渲染数据通过同一个数据渲染接口获取的实施例的基础上，该数据渲染接口在获取到所有组件的渲染数据之后，还需要根据获取到的所有组件的渲染数据中，渲染数据的类型将渲染数据分配至对应的组件中，以实现数据渲染，渲染后的目标页面与最终展现给使用大屏展示的用户的页面相同。
88.在所有部件中的部分组件对应一个数据渲染接口的实施例的基础上，也是类似的原理，此处不再赘述。
89.其中，每个组件对应的数据类型可以是用户配置得到的。即用户在根据调整后的n个第一组件、m个组件中除n个第一组件之外的组件，各组件在目标页面中的布局位置，将各组件添加至空白页面中之后，可以对每个组件配置数据类型，并且根据配置好的数据类型调用数据渲染接口，以查看渲染效果。
90.例如，用户针对每个组件配置数据源的获取途径，则用户在调用数据渲染接口获取所有组件的渲染数据时，可以根据每个组件所配置的数据源的获取途径来获取渲染数据。
91.本实施例通过针对所有组件调用同一个数据渲染接口，以获取所有组件的渲染数
据，或者针对所有组件调用至少两个数据渲染接口，以获取所有组件的渲染数据。能够简化数据请求流程，通过统一的数据总线结构，降低数据请求与组件本身的耦合度。
92.在本步骤之前，还可以根据组件所需实现的功能，采用shadowdom结构构建组件，以及将构建好的组件添加至组件库中，以使得各个组件是独立的。即每个组件元素均为shadow的子节点，保证组件不会与外部节点发生冲突。具体的，是通过自定义标签的方式开发组件，例如通过html5规范htmlelement实现。其中，采用shadowdom结构构建组件的实现方式可以参见现有技术的介绍。
93.图8为本技术实施例提供的根据各封装好的组件进行组合的示意图。如图8所示，假设组件库中包括a～i组件，则通过将组件库中的组件c、d、e、h、i进行自由组合，可以得到新的页面。a～i组件中每个组件可以视为一个积木块，而自由组合的方式可以视为搭积木。通过搭积木的方式，将各个组件进行拼装，从而实现页面开发，使页面开发变得更加简单易操作。
94.本实施例中采用shadowdom结构构建的组件，每个组件是独立的，各个组件在进行复用时，针对两个组件的样式命名相同，而具体的样式内容不同的情况，即使对其中一个组件的样式进行调整，也不会与其他组件的样式发生冲突，从而实现通过组件拼装的方式进行页面开发，降低页面开发的难度，提高页面开发效率。
95.图9为本技术实施例提供的页面开发处理装置的结构示意图。如图9所示，页面开发处理装置，包括：获取模块91、调整模块92和生成模块93；
96.其中，获取模块91，用于获取待开发的目标页面的页面布局信息；所述页面布局信息包括：所述目标页面所包括的m个组件的标识，以及，各所述组件在所述目标页面中的布局位置和布局大小；所述m为大于或等于1的整数；获取模块91，还用于根据各所述组件的标识，从组件库中获取封装好的各所述组件；调整模块92，用于若所述m个组件中存在n个第一组件的初始大小与布局大小不同，则根据每个所述第一组件的初始大小和布局大小，调整每个所述第一组件的大小，以使调整后的所述第一组件的大小等于所述第一组件的布局大小；所述n为大于1且小于或等于m的整数；生成模块93，用于根据调整后的n个所述第一组件、所述m个组件中除n个所述第一组件之外的组件，各所述组件在所述目标页面中的布局位置，生成所述目标页面。
97.在一些实施例中，调整模块92，具体用于：根据第一组件的布局大小对应的高度，以及，所述第一组件的初始大小对应的高度，得到第一比值；根据所述第一组件的布局大小对应的宽度，以及，所述第一组件的初始大小对应的宽度，得到第二比值；根据所述第一比值和所述第二比值中较小的比值，分别调整所述第一组件中每个组件元素的高度和宽度，或者，根据所述第一比值调整所述第一组件中每个组件元素的高度以及根据所述第二比值调整所述第一组件中每个组件元素的宽度。
98.在一些实施例中，该装置还包括：确定模块94和输出模块95；确定模块94，用于确定调整后的所述第一组件的大小是否等于所述第一组件的布局大小；输出模块95，用于若调整后的所述第一组件的大小不等于所述第一组件的布局大小，则输出提示信息，所述提示信息用于指示调整后的所述第一组件的大小不等于所述第一组件的布局大小；调整模块92，还用于响应于用户输入的第一组件的组件元素的大小信息，再次调整所述第一组件的大小，以使调整后的所述第一组件的大小等于所述第一组件的布局大小。
99.在一些实施例中，生成模块93，具体用于：获取各所述组件的渲染数据；根据调整后的n个所述第一组件、所述m个组件中除n个所述第一组件之外的组件，各所述组件在所述目标页面中的布局位置，将各所述组件添加至空白页面中，得到待渲染页面；利用各所述组件的渲染数据，对所述待渲染页面中各所述组件进行渲染，得到所述目标页面。
100.在一些实施例中，获取模块91，具体用于：调用预设的数据渲染接口，获取所有组件的渲染数据。
101.在一些实施例中，该装置还包括：构建模块96，用于根据所述组件所需实现的功能，采用shadowdom结构构建所述组件；以及，将构建好的组件添加至所述组件库中。
102.在一些实施例中，获取模块91，具体用于：接收用户输入的所述目标页面所需实现的功能，生成所述待开发的目标页面的页面布局信息；或者，接收用户输入的所述待开发的目标页面的页面布局信息。
103.本技术实施例提供的页面开发处理装置，可用于执行上述实施例中页面开发处理方法的技术方案，其实现原理和技术效果类似，在此不再赘述。
104.本实施例通过获取待开发的目标页面的页面布局信息，页面布局信息包括目标页面所包括的m个组件的标识，以及，各组件在目标页面中的布局位置和布局大小，m为大于或等于1的整数，根据各组件的标识，从组件库中获取封装好的各组件，若m个组件中存在n个第一组件的初始大小与布局大小不同，则根据每个第一组件的初始大小和布局大小，调整每个第一组件的大小，以使调整后的第一组件的大小等于第一组件的布局大小，n为大于1且小于或等于m的整数，根据调整后的n个第一组件、m个组件中除n个第一组件之外的组件，各组件在目标页面中的布局位置，生成目标页面。由于在m个组件中存在n个第一组件的初始大小与布局大小不同，则根据每个第一组件的初始大小和布局大小，调整每个第一组件的大小，以使调整后的第一组件的大小等于第一组件的布局大小，提高组件的复用率，从而提高组件复用的灵活度，进一步提高页面开发效率。
105.需要说明的是，应理解以上装置的各个模块的划分仅仅是一种逻辑功能的划分，实际实现时可以全部或部分集成到一个物理实体上，也可以物理上分开。且这些模块可以全部以软件通过处理元件调用的形式实现；也可以全部以硬件的形式实现；还可以部分模块通过处理元件调用软件的形式实现，部分模块通过硬件的形式实现。例如，调整模块92可以为单独设立的处理元件，也可以集成在上述装置的某一个芯片中实现，此外，也可以以程序代码的形式存储于上述装置的存储器中，由上述装置的某一个处理元件调用并执行以上调整模块92的功能。其它模块的实现与之类似。此外这些模块全部或部分可以集成在一起，也可以独立实现。这里的处理元件可以是一种集成电路，具有信号的处理能力。在实现过程中，上述方法的各步骤或以上各个模块可以通过处理器元件中的硬件的集成逻辑电路或者软件形式的指令完成。
106.图10为本技术实施例提供的电子设备的结构示意图。如图10所示，该电子设备可以包括：收发器101、处理器102、存储器103。
107.处理器102执行存储器存储的计算机执行指令，使得处理器102执行上述实施例中的方案。处理器102可以是通用处理器，包括中央处理器cpu、网络处理器(network processor，np)等；还可以是数字信号处理器dsp、专用集成电路asic、现场可编程门阵列fpga或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
108.存储器103通过系统总线与处理器102连接并完成相互间的通信，存储器103用于存储计算机程序指令。
109.收发器101可以用于获取待开发的目标页面的页面布局信息。
110.系统总线可以是外设部件互连标准(peripheral component interconnect，pci)总线或扩展工业标准结构(extended industry standard architecture，eisa)总线等。系统总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。收发器用于实现数据库访问装置与其他计算机(例如客户端、读写库和只读库)之间的通信。存储器可能包含随机存取存储器(random access memory，ram)，也可能还包括非易失性存储器(non-volatile memory)。
111.本技术实施例提供的电子设备，可以是上述实施例的终端设备。
112.本技术实施例还提供一种运行指令的芯片，该芯片用于执行上述实施例中页面开发处理方法的技术方案。
113.本技术实施例还提供一种计算机可读存储介质，该计算机可读存储介质中存储有计算机指令，当该计算机指令在计算机上运行时，使得计算机执行上述实施例页面开发处理方法的技术方案。
114.本技术实施例还提供一种计算机程序产品，该计算机程序产品包括计算机程序，其存储在计算机可读存储介质中，至少一个处理器可以从计算机可读存储介质读取计算机程序，至少一个处理器执行计算机程序时可实现上述实施例中页面开发处理方法的技术方案。
115.本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本技术的其它实施方案。本技术旨在涵盖本技术的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本技术的一般性原理并包括本技术未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本技术的真正范围和精神由下面的权利要求书指出。
116.应当理解的是，本技术并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本技术的范围仅由所附的权利要求书来限制。
117.本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本技术的其它实施方案。本技术旨在涵盖本技术的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本技术的一般性原理并包括本技术未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本技术的真正范围和精神由下面的权利要求书指出。
118.应当理解的是，本技术并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本技术的范围仅由所附的权利要求书来限制。