一种页面生成方法、装置、设备及存储介质与流程

1.本技术涉及计算机技术领域，具体涉及一种页面生成方法、装置、设备及存储介质。


背景技术：

2.目前，在开发前端全球广域网(world wide web，web)页面时，通常需要根据业务编写专门的用户界面(user interface，ui)组件，并将该ui组件用于各个web页面中。比如，web页面a需要一个选择日期的ui组件，此时，开发人员可以开发该ui组件，并将该ui组件应用于web页面。若该ui组件是基于前端框架react开发，web页面a也是基于前端框架react开发的，那么，可以在web页面a引入该ui组件。但web页面a是基于前端框架vue开发，那么，就无法在web页面a引入该ui组件。换句话来说，web页面和ui组件需要使用同一前端框架，这导致ui组件适用场景单一，无法适用于更多应用场景。


技术实现要素：

3.本技术实施例提供了一种页面生成方法、装置、设备及存储介质，丰富了ui组件的适用场景。
4.第一方面，提供一种页面生成方法，该方法包括：
5.获取第一组件的组件代码和组件代码依赖的第一框架的第一框架代码；组件代码包括以下至少一项：第一组件对应的样式代码、第一组件对应的行为逻辑代码；
6.将组件代码和第一框架代码进行封装，得到第二组件；
7.获取第二框架的第二框架代码；其中，第一框架与第二框架不同；
8.根据第二组件和第二框架代码，生成目标页面；
9.基于第二框架显示目标页面。
10.第二方面，提供一种页面生成装置，该页面生成装置包括第一获取单元、封装单元、第二获取单元、生成单元和显示模块，
11.第一获取单元，用于获取第一组件的组件代码和组件代码依赖的第一框架的第一框架代码；组件代码包括以下至少一项：第一组件对应的样式代码、第一组件对应的行为逻辑代码；
12.封装单元，用于将组件代码和第一框架代码进行封装，得到第二组件；
13.第二获取单元，用于获取第二框架的第二框架代码；其中，第一框架与第二框架不同；
14.生成单元，用于根据第二组件和第二框架代码，生成目标页面；
15.显示模块，用于基于第二框架显示目标页面。
16.第三方面，提供一种页面生成设备，其特征在于，包括处理器、存储器、通信接口以及一个或多个程序，其中，所述一个或多个程序被存储在所述存储器中，并且被生成由所述处理器执行，以执行第一方面任一项方法中的步骤的指令。
17.第四方面，提供一种计算机可读存储介质，所述计算机可读存储介质用于存储计算机程序，所述存储计算机程序被处理器执行，以实现第一方面任一项所述的方法。
18.可以看出，上述技术方案中，通过将第一组件的组件代码和该组件代码依赖的第一框架的第一框架代码进行封装，得到第二组件，进而可以根据第二组件以及获取的第二框架的第二框架代码，生成目标页面，并基于第二框架显示目标页面，从而实现了依赖于第一框架的第一框架代码的组件代码可以与不同于第一框架的第二框架的第二框架代码一起运行，并生成目标页面。换句话来说，使用第一框架代码的ui组件可以运行在使用第二框架代码的目标页面中，使得ui组件的适用场景更加丰富，也降低ui组件的开发维护成本。
附图说明
19.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
20.图1a为本技术实施例提供的一种页面生成方法的流程示意图；
21.图1b为本技术实施例提供的又一种页面生成方法的流程示意图；
22.图2为本技术实施例提供的一种第二组件对应的目标页面元素示意图；
23.图3是本技术实施例提供的一种页面生成装置；
24.图4是本技术实施例提供的一种页面生成设备的结构示意图。
具体实施方式
25.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
26.目前，在开发前端web页面时，通常需要根据业务编写专门的ui组件，并将该ui组件用于各个web页面中。比如，web页面a需要一个选择日期的ui组件，此时，开发人员可以开发该ui组件，并将该ui组件应用于web页面。若该ui组件是基于前端框架react开发，web页面a也是基于前端框架react开发的，那么，可以在web页面a引入该ui组件。但web页面a是基于前端框架vue开发，那么，就无法在web页面a引入该ui组件，且需要重新开发一个基于前端框架vue的选择日期的ui组件。换句话来说，web页面和ui组件需要使用同一前端框架，这导致ui组件适用场景单一，无法适用于更多应用场景，且组件开发维护成本高。
27.为了解决上述技术问题，本技术提出一种页面生成方法，下面对本技术实施例进行详细介绍。
28.应理解的，本技术实施例的技术方案可以应用于电子设备，该电子设备可以是手机、平板电脑、可穿戴设备(如手表)、车载设备、增强现实(augmented reality，ar)/虚拟现实(virtual reality，vr)设备、笔记本电脑、超级移动个人计算机(ultra-mobile personal computer，umpc)、个人计算机(personal computer，pc)、上网本、个人数字助理(personaldigital assistant，pda)等移动终端、物联网(internet of things，iot)设备，
本技术实施例对电子设备的具体类型不作任何限制。
29.另外，在本技术中，电子设备上还可以运行有编译器(或编译链工具)等，在此不做限制。
30.参见图1a或图1b，如图1a或图1b所示，该方法包括但不限于以下步骤：
31.101、电子设备获取第一组件的组件代码和组件代码依赖的第一框架的第一框架代码。
32.其中，第一组件为ui组件。ui组件为用于web页面的图形用户界面(graphical user interface，gui)控件。可以理解的，在本技术中，第一组件可以包括表单类组件或其他组件，在此不做限制。表单类组件可以包括至少一项：复选框、单选框、下拉选择框等。当然，该表单类组件还可以包括表单按钮等，如提交按钮、复位按钮、一般按钮等。
33.示例性的，第一组件为时间选择组件。其中，该时间选择组件可以为使用第一框架代码实现的datapicker类。
34.可选的，组件代码包括以下至少一项：第一组件对应的样式代码、第一组件对应的行为逻辑代码。其中，样式代码用于实现第一组件显示在用户界面时的样式，如样式代码可以通过层叠样式表(cascading style sheets，css)实现。可以理解的，样式例如可以为大小尺寸、中心点、分辨率、色彩等信息。行为逻辑代码用于在第一组件的内容显示在用户界面后，用户操作该组件的内容的行为所能够触发的功能，如第一组件为时间选择组件，则运行日期选择组件的行为逻辑代码可以实现在检测到对时间选择组件中时间选择控件的选择操作时，可以获取该选择操作所选择的时间信息，并可以实现时间信息的显示功能等。其中，行为逻辑代码例如可以通过js(javascript)实现。
35.可选的，第一框架可以为以下一项：前端框架react、前端框架vue、前端框架angular、前端框架angular。第一框架代码可以为前端框架react对应的框架代码、前端框架vue对应的框架代码、前端框架angular对应的框架代码或前端框架svelte对应的框架代码等，在此不做限制。
36.102、电子设备将组件代码和第一框架代码进行封装，得到第二组件。
37.其中，第二组件为web组件。web组件是w3c官方定义的一套规范及应用程序接口(application programming interface，api)，允许创建自定义元素，然后在web页面中使用。
38.可选的，步骤102，可以包括：电子设备获取模块打包工具；电子设备采用模块打包工具将组件代码和第一框架代码进行封装，得到第二组件。其中，模块打包工具例如可以为rollup。可以理解的，电子设备可以采用rollup将组件代码和第一框架代码打包，得到代码文件形式的第二组件，该代码文件可以为js文件。
39.可以看出，上述技术方案中，通过获取模块打包工具，使得电子设备可以采用模块打包工具将组件代码和第一框架代码进行封装，得到第二组件，进而可以使得组件代码可以仍旧依赖第一框架代码运行，避免了组件代码在使用第二框架代码的目标页面中无法正常运行的问题。
40.103、电子设备获取第二框架的第二框架代码。
41.可选的，第二框架可以为以下一项：前端框架react、前端框架vue、前端框架angular、前端框架angular。第二框架代码可以为前端框架react对应的框架代码、前端框
架vue对应的框架代码、前端框架angular对应的框架代码或前端框架svelte对应的框架代码等，在此不做限制。
42.可选的，第一框架与第二框架不同。第一框架与第二框架不同，可以理解为：第一框架代码和第二框架代码的版本不同，或，第一框架代码和第二框架代码的类型不同，在此不做限制。
43.示例性的，第一框架代码的版本高于或低于第二框架代码的版本。如，第一框架代码的版本为16版本，第一框架代码的版本为17版本。
44.又示例性的，第一框架代码为前端框架react对应的框架代码，第二框架代码可以为前端框架vue对应的框架代码；或，第一框架代码为前端框架vue对应的框架代码，第二框架代码可以为前端框架react对应的框架代码；或，第一框架代码为前端框架angular对应的框架代码，第二框架代码可以为前端框架react对应的框架代码；或，第一框架代码为前端框架react对应的框架代码，第二框架代码可以为前端框架angular对应的框架代码等。
45.104、电子设备根据第二组件和第二框架代码，生成目标页面。
46.其中，目标页面为web页面。可以理解的，目标页面可以包括第二组件对应的目标页面元素和除目标页面元素之外的其他页面元素。如，参见图2，图2为本技术实施例提供的一种第二组件对应的目标页面元素示意图，如图2所示，该目标页面元素可以包括时间选择控件，时间选择控件可以包括年份选择控件、月份选择控件等，用户可以选择年份、月份等，在此不做限制。控件是在用户界面上能够看见的任何可视控件或元素，例如，图片、输入框、文本框、按钮、标签等控件。其中一些控件响应用户的操作，例如，点击年份选择控件可以选取年份。
47.需要说明的，在本技术中，第二组件对应的目标页面元素依赖于第一框架的第一框架代码运行，除该目标页面元素之外的其他页面元素依赖于第二框架的第二框架代码运行。可以理解的，目标页面对应的源文件代码可以通过超文本标记语言(hyper text markup language，html)、层叠样式表(cascading style sheets，css)、js等实现。
48.可选的，步骤104可以包括：电子设备在加载目标页面元素的过程中调用第二组件，以渲染目标页面元素；电子设备在加载其他页面元素的过程中依赖第二框架代码，以渲染其他页面元素。
49.其中，第二组件以预设标签形式挂载在目标页面。预设标签为web组件所规定的自定义元素，如《data-picker》。可以理解的，开发人员可以定义自定义元素，如《data-picker》。
50.示例性的，第二组件以预设标签形式挂载在目标页面的方式可以参见以下代码：
[0051][0052]
可以理解的，当第二组件以预设标签形式挂载在目标页面时，对于目标页面来说，预设标签和目标页面对应的超文本标记语言(hyper text markup language，html)原生元
素一致，开发人员可以直接以标签的形式引入使用第二组件。换句话来说，当《data-picker》挂载到目标页面上时，电子设备可以在目标页面中通过《data-picker》标签来加载datapicker类，即电子设备可以在目标页面中通过《data-picker》标签来加载目标页面元素。而对于其他页面元素，电子设备以html原生元素来加载其他页面元素。
[0053]
可选的，电子设备加载目标页面元素，包括：电子设备以预设标签形式加载目标页面元素。
[0054]
可选的，电子设备调用第二组件，以渲染目标页面元素，包括：电子设备在调用第二组件的过程中，从组件代码中获取目标页面元素对应的样式信息；电子设备依赖第一框架代码，以按照样式信息渲染目标页面元素。
[0055]
其中，该样式信息例如可以包括以下至少一项：尺寸信息、字体颜色、字体大小等。
[0056]
可选的，电子设备从组件代码中获取目标页面元素对应的样式信息，包括：电子设备依赖第一框架代码解析组件代码，得到目标页面元素对应的样式信息。即，电子设备依赖第一框架代码解析组件代码，以从第一组件对应的样式代码中得到目标页面元素对应的样式信息。
[0057]
可以看出，上述技术方案中，电子设备可以在加载目标页面元素的过程中，调用第二组件，以渲染目标页面元素，并在加载其他页面元素的过程中，依赖第二框架代码，以渲染其他页面元素，即实现了使用第一框架代码的ui组件可以运行在使用第二框架代码的页面中，使得ui组件的适用场景更加丰富，也降低ui组件的开发维护成本。
[0058]
可选的，本方案还可以包括：电子设备当监听到预设标签对应的样式信息发生变化时，按照预设方式处理目标页面元素；其中，电子设备按照预设方式处理目标页面元素，包括：电子设备获取预设标签对应的变化后的样式信息；电子设备调用第二组件，以依赖第一框架代码并按照预设标签对应的变化后的样式信息重新渲染目标页面元素。可以理解的，开发人员可以预先设定好在监听到预设标签对应的样式信息发生变化时，处理目标页面元素的具体方式。其次，当开发人员重新调整预设标签对应的样式信息后，对于电子设备来说，可以在监听到预设标签对应的样式信息发生变化时，按照预设方式处理目标页面元素。
[0059]
其中，预设标签对应的样式信息例如可以包括以下至少一项：位置信息、尺寸信息、堆叠顺序信息、类型信息等。
[0060]
示例性的，当以《data-picker》标签来加载datapicker时，预设标签对应的样式信息可以参考以下代码：
[0061]
《data-picker style＝”position：absolute；top：352.2px；left：280px；z-index：200；”type＝”date”value＝
””
》
[0062]
#shadow-root(open)
[0063]
《/data-picker》
[0064]
结合该代码可以看出，位置信息为absolute，尺寸信息可以包括目标页面元素的高度信息，即top：352.2px。尺寸信息还可以包括目标页面元素左外边距边界与其包含块左边界之间的偏移信息，即left：280px。堆叠顺序信息可以包括z-index属性设置的堆叠顺序，即z-index：200。其中，z-index属性设置目标页面元素的堆叠顺序。类型信息可以包括返回date字段的表单元素类型。
[0065]
可以看出，上述技术方案中，实现了在单独改变第二组件对应的样式代码时仍旧可以使得第二组件正常运行在使用第二框架代码的目标页面中。
[0066]
可选的，组件代码包括时间标签，目标页面包括第二组件对应的目标页面元素，目标页面元素包括时间选择控件和时间显示区域；电子设备基于第二框架显示目标页面之后，本方案还包括：；电子设备响应于对时间选择控件的选择操作，获取选择操作所选择的时间信息；电子设备将时间标签的时间属性信息替换为时间信息，并调用第二组件，以将时间信息加载至时间显示区域上进行显示。
[0067]
其中，电子设备调用第二组件，以将时间信息加载至时间显示区域上进行显示，可以包括：电子设备通过调用第二组件来运行行为逻辑代码，以将时间信息加载至时间显示区域上进行显示。
[0068]
可以看出，上述技术方案中，实现了用户在目标页面进行时间选择后，电子设备可以响应于对时间选择控件的选择操作，并获取选择操作所选择的时间信息，从而可以将时间标签的时间属性信息替换为时间信息，并调用第二组件，以将时间信息加载至时间显示区域上进行显示。换句话来说，在第二组件正常运行在使用第二框架代码的目标页面的情况下，可以通过调用第二组件实现时间信息的调整。
[0069]
参见图3，图3是本技术实施例提供一种页面生成装置，该页面生成装置300可以包括第一获取单元301、封装单元302、第二获取单元303、生成单元304和显示单元305。本发明实施例的所述装置可以设置在电子设备中。
[0070]
可选的，第一获取单元301，用于获取第一组件的组件代码和组件代码依赖的第一框架的第一框架代码；组件代码包括以下至少一项：第一组件对应的样式代码、第一组件对应的行为逻辑代码；封装单元302，用于将组件代码和第一框架代码进行封装，得到第二组件；第二获取单元303，用于获取第二框架的第二框架代码；其中，第一框架与第二框架不同；生成单元304，用于根据第二组件和第二框架代码，生成目标页面；显示单元305，用于基于第二框架显示目标页面。
[0071]
可选的，在将组件代码和第一框架代码进行封装，得到第二组件时，封装单元302，具体用于获取模块打包工具；采用模块打包工具将组件代码和第一框架代码进行封装，得到第二组件。
[0072]
可选的，目标页面包括第二组件对应的目标页面元素和除目标页面元素之外的其他页面元素，在根据第二组件和第二框架代码，生成目标页面时，生成单元304，具体用于在加载目标页面元素的过程中调用第二组件，以渲染目标页面元素；在加载其他页面元素的过程中依赖第二框架代码，以渲染其他页面元素。
[0073]
可选的，第二组件以预设标签形式挂载在目标页面；在加载目标页面元素时，生成单元304，具体用于以预设标签形式加载目标页面元素。
[0074]
可选的，在调用第二组件，以渲染目标页面元素时，生成单元304，具体用于在调用第二组件的过程中，从组件代码中获取目标页面元素对应的样式信息；依赖第一框架代码，以按照样式信息渲染目标页面元素。
[0075]
可选的，在从组件代码中获取目标页面元素对应的样式信息时，生成单元304，具体用于依赖第一框架代码解析组件代码，得到目标页面元素对应的样式信息。
[0076]
可选的，页面生成装置还包括处理单元306，处理单元306，用于当监听到预设标签
对应的样式信息发生变化时，按照预设方式处理目标页面元素；其中，在按照预设方式处理目标页面元素时，处理单元306，具体用于通过第一获取单元301获取预设标签对应的变化后的样式信息；调用第二组件，以依赖第一框架代码并按照预设标签对应的变化后的样式信息重新渲染目标页面元素。
[0077]
可选的，组件代码包括时间标签；目标页面包括第二组件对应的目标页面元素，目标页面元素包括时间选择控件和时间显示区域；基于第二框架显示目标页面之后，第一获取单元301，用于响应于对时间选择控件的选择操作，获取选择操作所选择的时间信息；显示单元305，用于通过处理单元306将时间标签的时间属性信息替换为时间信息，并调用第二组件，以将时间信息加载至时间显示区域上进行显示。
[0078]
本发明实施例中各个单元的具体实现可参考前述实施例中相关内容的描述，其与前述实施例实现的技术效果相同，在此均不再赘述。
[0079]
参见图4，图4是本技术实施例提供的一种页面生成设备的结构示意图，该页面生成设备可以是电子设备；该页面生成设备至少包括处理器401、通信接口402和存储器403。在一个实施例中，处理器401、通信接口402和存储器403可通过总线或其他方式连接，本技术实施例以通过总线连接为例。在一个实施例中，处理器401(或称中央处理器(central processing unit，cpu))是页面生成设备的计算核心以及控制核心，其可以解析页面生成设备内的各类指令以及处理页面生成设备的各类数据，例如：cpu可以用于解析用户向页面生成设备所发送的开关机指令，并控制页面生成设备进行开关机操作；再如：cpu可以在页面生成设备内部结构之间传输各类交互数据，等等。通信接口402在一个实施例中可以包括标准的有线接口、无线接口(如wi-fi、移动通信接口等)，受处理器401的控制可以用于收发数据；通信接口402还可以用于页面生成设备内部数据的传输以及交互。存储器403(memory)是页面生成设备中的记忆设备，用于存放程序和数据。可以理解的是，此处的存储器403既可以包括页面生成设备的内置存储器，当然也可以包括页面生成设备所支持的扩展存储器。存储器403提供存储空间，该存储空间存储了页面生成设备的操作系统，可包括但不限于：android系统、ios系统、windows phone系统等等，本技术对此并不作限定。
[0080]
在本技术实施例中，处理器401通过运行存储器403中的可执行程序代码，执行如下操作：
[0081]
获取第一组件的组件代码和组件代码依赖的第一框架的第一框架代码；组件代码包括以下至少一项：第一组件对应的样式代码、第一组件对应的行为逻辑代码；
[0082]
将组件代码和第一框架代码进行封装，得到第二组件；
[0083]
获取第二框架的第二框架代码；其中，第一框架与第二框架不同；
[0084]
根据第二组件和第二框架代码，生成目标页面；
[0085]
基于第二框架显示目标页面。
[0086]
在一个实施例中，在将组件代码和第一框架代码进行封装，得到第二组件时，处理器401通过运行存储器403中的可执行程序代码，具体执行如下操作：
[0087]
获取模块打包工具；
[0088]
采用模块打包工具将组件代码和第一框架代码进行封装，得到第二组件。
[0089]
在一个实施例中，目标页面包括第二组件对应的目标页面元素和除目标页面元素之外的其他页面元素，在根据第二组件和第二框架代码，生成目标页面时，处理器401通过
运行存储器403中的可执行程序代码，具体执行如下操作：
[0090]
在加载目标页面元素的过程中调用第二组件，以渲染目标页面元素；
[0091]
在加载其他页面元素的过程中依赖第二框架代码，以渲染其他页面元素。
[0092]
在一个实施例中，第二组件以预设标签形式挂载在目标页面，在加载目标页面元素时，处理器401通过运行存储器403中的可执行程序代码，具体执行如下操作：
[0093]
以预设标签形式加载目标页面元素。
[0094]
在一个实施例中，在调用第二组件，以渲染目标页面元素时，处理器401通过运行存储器403中的可执行程序代码，具体执行如下操作：
[0095]
在调用第二组件的过程中，从组件代码中获取目标页面元素对应的样式信息；
[0096]
依赖第一框架代码，以按照样式信息渲染目标页面元素。
[0097]
在一个实施例中，在从组件代码中获取目标页面元素对应的样式信息时，处理器401通过运行存储器403中的可执行程序代码，具体执行如下操作：
[0098]
依赖第一框架代码解析组件代码，得到目标页面元素对应的样式信息。
[0099]
在一个实施例中，处理器401通过运行存储器403中的可执行程序代码，还执行如下操作：
[0100]
当监听到预设标签对应的样式信息发生变化时，按照预设方式处理目标页面元素；
[0101]
其中，按照预设方式处理目标页面元素，包括：
[0102]
获取预设标签对应的变化后的样式信息；
[0103]
调用第二组件，以依赖第一框架代码并按照预设标签对应的变化后的样式信息重新渲染目标页面元素。
[0104]
在一个实施例中，组件代码包括时间标签，目标页面包括第二组件对应的目标页面元素，目标页面元素包括时间选择控件和时间显示区域；基于第二框架显示目标页面之后，处理器401通过运行存储器403中的可执行程序代码，还执行如下操作：
[0105]
响应于对时间选择控件的选择操作，获取选择操作所选择的时间信息；
[0106]
将时间标签的时间属性信息替换为时间信息，并调用第二组件，以将时间信息加载至时间显示区域上进行显示。
[0107]
上述提及的处理器401的具体实现可参考前述实施例中相关内容的描述，其与前述实施例实现的技术效果相同，在此均不再赘述。
[0108]
本技术实施例还提供一种计算机可读存储介质，计算机可读存储介质中存储有计算机程序，该计算机程序适于由处理器加载并执行上述方法实施例的页面生成方法。
[0109]
本技术实施例还提供一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述页面生成方法。
[0110]
需要说明的是，对于前述的各个方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本技术并不受所描述的动作顺序的限制，因为依据本技术，某一些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申
请所必须的。
[0111]
本技术实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减。
[0112]
本技术实施例装置中的模块可以根据实际需要进行合并、划分和删减。
[0113]
本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，可读存储介质可以包括：闪存盘、只读存储器(read-only memory，rom)、随机存取器(random access memory，ram)、磁盘或光盘等。
[0114]
以上所揭露的仅为本技术一种较佳实施例而已，当然不能以此来限定本技术之权利范围，本领域普通技术人员可以理解实现上述实施例的全部或部分流程，并依本技术权利要求所作的等同变化，仍属于申请所涵盖的范围。