CN115268908A - 自定义配置页面的方法、装置、设备和存储介质 - Google Patents

Abstract

本申请提出一种自定义配置页面的方法、装置、设备和存储介质，该方法包括：对获取到的待生成页面的页面配置文件进行解析；获取符合解析到的页面类型信息和页面代码技术栈信息的页面代码模板；根据解析到的页面区块结构信息，获取待生成页面所包含的每个容器区块的第一代码，将第一代码填写至页面代码模板中；根据解析到的组件信息，获取每个容器区块所包含的组件的第二代码，将第二代码填写至页面代码模板中；根据填写完成后的页面代码模板生成待生成页面的页面代码文件。本申请可动态生成页面，实现页面的有效定制和改造。

Description

自定义配置页面的方法、装置、设备和存储介质

技术领域

本申请涉及计算机技术领域，尤其涉及一种自定义配置页面的方法、装置、设备和存储介质。

背景技术

如何动态生成前端页面是前端领域一个重要的话题。现有技术中，一般是通过低代码或无代码平台生成简单页面或根据UI切图自动生成页面。但这些方案仅能自动生成简单内容页面，代码质量不高，后续维护成本高。生成的页面如需定制化改造，改造成本较高或无法实现定制化改造。

发明内容

为了解决现有技术中动态生成的前端页面内容单一无法改造的技术问题。本申请提供了一种自定义配置页面的方法、装置、设备和存储介质，其主要目的在于可动态生成页面，实现页面的有效定制和改造。

为实现上述目的，本申请提供了一种自定义配置页面的方法，该方法包括：

对获取到的待生成页面的页面配置文件进行解析；

获取符合解析到的页面类型信息和页面代码技术栈信息的页面代码模板；

根据解析到的页面区块结构信息，获取待生成页面所包含的每个容器区块的第一代码，将第一代码填写至页面代码模板中；

根据解析到的组件信息，获取每个容器区块所包含的组件的第二代码，将第二代码填写至页面代码模板中；

根据填写完成后的页面代码模板生成待生成页面的页面代码文件。

可选地，对获取到的待生成页面的页面配置文件进行解析，包括：

读取待生成页面的页面配置文件中的第一字段，根据第一字段的取值确定待生成页面的页面类型信息；

读取页面配置文件中的第二字段，根据第二字段的取值确定待生成页面的页面代码技术栈信息；

读取页面配置文件中的第三字段，根据第三字段的取值确定待生成页面的页面区块结构信息，其中，页面区块结构信息用于指示待生成页面所包含的容器区块及容器区块的第一布局信息；

读取页面配置文件，获取每个组件的组件信息，其中，组件信息包括对应组件所在的容器区块以及组件属性信息。

可选地，读取页面配置文件，获取每个组件的组件信息，包括：

读取页面配置文件中的渲染函数，从渲染函数中获取待生成页面所包含的组件以及每个组件所在的容器区块；

读取页面配置文件中的第四字段，根据第四字段的取值确定对应组件的组件属性信息。

可选地，页面代码模板是根据从预先开发的物料库获取的初始代码模板生成的；

第一代码和第二代码均是根据从物料库获取的对应初始代码生成的；

方法还包括：

接收用户对物料库的第一自定义功能入口的调用操作，通过第一自定义功能入口接收用户新增的功能代码，其中，功能代码为组件对应的初始代码、页面对应的初始代码模板中的至少一种。

可选地，获取每个容器区块所包含的组件的第二代码，将第二代码填写至页面代码模板中，包括：

从物料库获取每个组件对应的初始代码；

从组件信息中提取出属性字段的取值填写至对应初始代码中，得到对应组件的第二代码；

将第二代码挂载至对应容器区块的第一代码下。

可选地，在生成页面代码文件之后，该方法还包括：

根据预先配置的代码检测工具对页面代码文件进行规范检查；

若出现不符合配置规范的代码，则进行报错提示。

可选地，在生成页面代码文件之后，该方法还包括：

调用预先配置的代码格式化工具对页面代码文件进行代码风格统一。

此外，为实现上述目的，本申请还提供了一种自定义配置页面的装置，该装置包括：

解析模块，用于对获取到的待生成页面的页面配置文件进行解析；

第一代码生成模块，用于获取符合解析到的页面类型信息和页面代码技术栈信息的页面代码模板；

第二代码生成填写模块，用于根据解析到的页面区块结构信息，获取待生成页面所包含的每个容器区块的第一代码，将第一代码填写至页面代码模板中；

第三代码生成填写模块，用于根据解析到的组件信息，获取每个容器区块所包含的组件的第二代码，将第二代码填写至页面代码模板中；

代码文件生成模块，用于根据填写完成后的页面代码模板生成待生成页面的页面代码文件。

为实现上述目的，本申请还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机可读指令，处理器执行计算机可读指令时执行如前面任一项的自定义配置页面的方法的步骤。

为实现上述目的，本申请还提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机可读指令，计算机可读指令被处理器执行时，使得处理器执行如前面任一项的自定义配置页面的方法的步骤。

本申请提出的自定义配置页面的方法、装置、设备和存储介质，通过页面配置文件对待生成页面进行自定义配置以实现功能改造，根据从页面配置文件中获取的页面类型信息、页面代码技术栈信息、页面区块结构信息以及组件对应的组件信息来自动动态生成页面代码文件，生成的页面代码文件即可作为页面渲染展示的底层代码。本申请通过少量的配置代码即可直接生产出完整页面对应的页面代码文件，无需开发人员手动编写页面代码，通过动态配置实现了任意复杂前端页面的自动化配置生成和改造，灵活性高，实现了页面的快速有效定制和动态生成，不需要对每个页面单独编写页面代码，有效提升了开发效率，降低了页面定制化改造的成本。

附图说明

图1为本申请一实施例中自定义配置页面的方法的流程示意图；

图2为本申请一实施例中自定义配置页面的装置的结构框图；

图3为本申请一实施例中计算机设备的内部结构框图。

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

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请的一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

图1为本申请一实施例中自定义配置页面的方法的流程示意图。参考图1，该自定义配置页面的方法包括以下步骤S100-S500。

S100：对获取到的待生成页面的页面配置文件进行解析。

具体地，现有技术中为了实现代码的通用化，通常代码平台会舍弃部分精细化与代码质量，因此生产出的页面会非常简单和单一。为了解决这个问题，本实施例根据少量的页面配置文件来生成可以生成复杂页面的页面代码文件。

页面配置文件为研发人员预先根据业务需求基于配置规则配置出的，用于对待生成页面中的各个元素进行声明以及为达到预设的展示效果而对元素的属性进行的配置。例如，对一个简单的登录页面来说，在页面配置文件中声明待生成的登录页面中包含有若干个按钮和文本框、以及每个文本框和按钮的属性。页面配置文件可以为JavaScript对象文件即JS对象文件。例如配置表单提交。

S200：获取符合解析到的页面类型信息和页面代码技术栈信息的页面代码模板。

具体地，根据解析到的待生成页面的页面类型信息和页面代码技术栈信息，生成符合页面代码技术栈信息所指示的页面框架和页面类型信息所指示的页面类型的页面代码模板。页面代码模板为待生成页面的底层代码框架，更具体地，为待生成页面的HTML代码框架。

页面类型为小程序页面、H5页面、PC页面等其中一种。

页面代码技术栈即页面框架为Vue、React等框架中的一种。

S300：根据解析到的页面区块结构信息，获取待生成页面所包含的每个容器区块的第一代码，将第一代码填写至页面代码模板中。

具体地，页面区块结构信息用于指示待生成页面的页面结构。页面结构可以包括上下结构、左右结构、左中右结构、上中下结构等不局限于此。其中，每种结构的大区块中还可以进一步按照上下、左右等结构继续划分为更小的区块。例如，在上下结构中的上区块或下区块还可以按照左右结构继续划分为多个小区块。

一个页面对应一个容器，一个容器可以包括多个容器区块，容器区块即页面区块是根据页面结构确定的。根据页面区块结构信息不仅可以获取待生成页面包含有哪些容器区块，而且还可以获取每个容器区块的区块属性。区块属性例如包括容器区块在页面中的位置等布局信息或布局参数。

容器区块的第一代码是基于容器区块的初始代码，根据容器区块的区块属性生成的。

S400：根据解析到的组件信息，获取每个容器区块所包含的组件的第二代码，将第二代码填写至页面代码模板中。

具体地，页面配置文件定义了待生成页面所包含的所有组件以及每个组件的组件信息。根据组件信息可以确定每个组件所属的容器区块以及组件的其他属性。例如，根据组件的布局参数和容器区块的布局参数可以确定组件位于哪个容器区块。每个容器区块可以包括多个组件。组件可以为公共组件也可以为高度定制化组件。

组件的第二代码是基于组件的初始代码，根据组件的组件信息生成的。例如，通过解析获取到待生成页面需要展示一个密码输入框，则获取该密码输入框的初始代码，根据该密码输入框的组件信息对初始代码进行信息填充，得到该密码输入框的第二代码。

S500：根据填写完成后的页面代码模板生成待生成页面的页面代码文件。

具体地，页面配置文件解析完成并将解析到的每个组件的代码生成并填写至页面代码模板后即算填写完成。可以对填写完成后的页面代码模板中的代码进行代码检查，检查无误后生成页面代码文件，页面代码文件即页面功能代码，是渲染展示页面的依据。

页面代码文件生成后可以保存至服务器端供前端调用。前端根据该页面代码文件对应的目标页面的页面地址访问到页面代码文件，通过执行页面代码文件以加载页面框架和自定义功能组件并将组件渲染到指定位置，即可展示出相应页面类型的目标页面。

例如，浏览器加载某个页面的地址，浏览器获取对应的页面代码文件，在前端渲染并展示对应页面。

本实施例使用配置自动化生成PC页面、H5页面、小程序页面等复杂页面。

另外，解析页面配置文件和生成代码并将代码填写至页面代码模板可以是并行执行；也可以是先解析完成得到解析结果后，再根据解析结果生成代码并将代码填写至页面代码模板。

本实施例通过页面配置文件对待生成页面进行自定义配置以实现功能改造，根据从页面配置文件中获取的页面类型信息、页面代码技术栈信息、页面区块结构信息以及组件对应的组件信息来自动动态生成页面代码文件，生成的页面代码文件即可作为页面渲染展示的底层代码。本实施例通过少量的配置代码即可直接生产出完整页面对应的页面代码文件，无需开发人员手动编写页面代码，本实施例有效地解决了现有技术无法自动生成复杂页面的问题，通过动态配置实现了任意复杂前端页面的自动化配置生成和改造，通用性和灵活性高，实现了页面的快速有效定制和动态生成，不需要对每个页面单独编写页面代码，有效提升了开发效率，降低了页面定制化改造的成本。

在一个实施例中，步骤S100具体包括：

读取待生成页面的页面配置文件中的第一字段，根据第一字段的取值确定待生成页面的页面类型信息；

读取页面配置文件中的第二字段，根据第二字段的取值确定待生成页面的页面代码技术栈信息；

读取页面配置文件中的第三字段，根据第三字段的取值确定待生成页面的页面区块结构信息，其中，页面区块结构信息用于指示待生成页面所包含的容器区块及容器区块的第一布局信息；

读取页面配置文件，获取每个组件的组件信息，其中，组件信息包括对应组件所在的容器区块以及组件属性信息。

具体地，第一字段即页面类型字段，用于定义待生成页面的页面类型。第一字段的取值确定了待生成页面为PC页面还是H5页面还是小程序页面或者其他类型的页面。

第二字段即框架字段，用于定义待生成页面的页面框架。框架字段的取值确定了待生成页面所接入的页面框架为Vue框架或React框架或者其他框架。

第三字段即页面结构字段，用于定义待生成页面所对应的容器所包含的容器区块的数量以及容器区块的布局。页面结构字段的取值确定了待生成页面的容器包含几个容器区块以及每个容器区块在整个页面中的布局参数。

在页面配置文件中对每个组件分别配置有对应的组件信息，从组件的组件信息中可以确定该组件归属于哪个容器区块。例如，在头部区块配有一个导航组件。

组件的组件属性信息包括组件的颜色、大小、点击事件、布局参数、展示数据所对应的字段值等其中的至少一个。

在一个实施例中，读取页面配置文件，获取每个组件的组件信息，包括：

读取页面配置文件中的渲染函数，从渲染函数中获取待生成页面所包含的组件以及每个组件所在的容器区块；

读取页面配置文件中的第四字段，根据第四字段的取值确定对应组件的组件属性信息。

具体地，一个容器区块可以对应有多个渲染函数，渲染函数可以为render函数。通过读取容器区块的渲染函数，可以从渲染函数中获取在其中所定义的组件。页面配置文件中存在有相关组件与容器区块的关系，在页面配置文件中定义的组件通过渲染函数挂载在定义的容器区块下，因此，根据渲染函数所挂载的容器区块可以确定组件所在的容器区块，根据渲染函数中定义的组件可以获取待生成页面所包含的所有组件。

可以在渲染函数定义的组件下定义组件的属性信息，从渲染函数的第四字段的取值确定对应组件的组件属性信息。

当然也可以在页面配置文件的渲染函数之外通过属性字段来定义每个组件的组件属性信息。例如，将attr字段作为属性字段，attr字段为一个对象包含了了组件的大小(尺寸)、颜色、名称、其他展示数据所对应的字段及取值等。

另外，在页面配置文件中容器区块开放有第二自定义功能入口，通过该第二自定义功能入口可以在容器区块下自定义渲染函数，在渲染函数中自定义配置功能组件，实现了容器区块的功能改造。当然，还可以对已有的渲染函数进行移除以将组件从容器区块下移除。支持自定义功能接入页面配置文件，增加了页面配置文件生成的灵活性与适用范围。

例如，开发人员通过第二自定义功能入口开发渲染函数，在渲染函数中编写对应需要的自定义功能组件，可以编写高度定制化非标准的业务组件。如一个提交按钮点击常规只弹框提示[是否确认提交]加上[确认/取消]即可，实际需求需要自定义一个弹框，用来确认各种信息如地址、订单号、姓名等各种信息，然后加上[确认/取消]，此时就可以使用第二自定义功能入口开发人员使用render函数手动实现需要弹框展示的内容，可以实现复杂功能。

在一个实施例中，页面代码模板是根据从预先开发的物料库获取的初始代码模板生成的；

第一代码和第二代码均是根据从物料库获取的对应初始代码生成的；

该方法还包括：

接收用户对物料库的第一自定义功能入口的调用操作，通过第一自定义功能入口接收用户新增的功能代码，其中，功能代码为组件对应的初始代码、页面对应的初始代码模板中的至少一种。

具体地，物料库为开发人员预先定义的代码库。物料库包括了各种组件所对应的原代码、各种页面类型和各种页面框架所对应的页面代码模板以及容器区块所对应的原代码。物料库中的组件根据构成大小可以区分为原子组件、分子组件、模块组件和业务组件等。例如，按钮标签为原子组件，导航栏为分子组件，订单组件为业务组件。

根据待生成页面的页面类型信息和页面代码技术栈信息从物料库中匹配到同时符合待生成页面的页面类型和页面代码技术栈(页面框架)的初始代码模板。根据页面类型信息和页面代码技术栈信息中的相关字段的取值对初始代码模板中相应字段进行赋值，以得到页面代码模板。

根据待生成页面的页面区块结构信息从物料库中匹配到待生成页面所包含的每个容器区块的第一初始代码，根据页面区块结构信息中的相关字段的取值对每个容器区块的第一初始代码相应字段进行赋值，得到每个容器区块对应的第一代码。

待生成页面所包含的每个组件都有对应的组件信息，根据组件信息从物料库中匹配到相应组件的第二初始代码，根据相应的组件信息中的相关字段的取值对该第二初始代码中相应字段进行赋值，得到该组件对应的第二代码。

为了方便对物料库中组件对应的初始代码进行扩展以满足页面对各种不同组件的需求，以及为了方便对初始代码模板进行扩展以满足不同页面类型和页面框架，本实施例的物料库提供了第一自定义功能入口。开发人员可以通过调用该第一自定义功能入口向物料库增加新的组件对应的初始代码或新的初始代码模板。通过第一自定义功能入口实现了定制化功能，增加了物料库的适用范围，使得自定义配置页面的应用更广泛。

在一个实施例中，步骤S400中获取每个容器区块所包含的组件的第二代码，将第二代码填写至页面代码模板中，包括：

从物料库获取每个组件对应的初始代码；

从组件信息中提取出属性字段的取值填写至对应初始代码中，得到对应组件的第二代码；

将第二代码挂载至对应容器区块的第一代码下。

具体地，每一种组件在物料库中都有对应的初始代码。初始代码中的字段的取值为空或为默认值，需要将页面配置文件中组件的属性字段的取值填充到初始代码中对应的字段，以为该字段赋值。字段取值填充完后的初始代码即为该组件的第二代码。

由于组件隶属对应的容器区块，因此，在页面代码文件中需要将组件的第二代码挂载到对应的容器区块的第一代码下。这样在执行页面代码文件进行页面渲染的时候会将容器区块的每个组件渲染展示到页面相应位置。

在一个实施例中，在生成页面代码文件之后，该方法还包括：

根据预先配置的代码检测工具对页面代码文件进行规范检查；

若出现不符合配置规范的代码，则进行报错提示。

具体地，代码检测工具用于代码规范检查和约束，即对产出代码的规则约束，如强制v-for必须伴随有v-bind:key、禁止不必要的分号等。代码检测工具的规范是预先已配置好的，具体是根据业务需求或企业相关代码规范来制定或配置的，这样实现了企业代码统一。利用代码检测工具扫描页面代码文件，如果页面代码文件中存在不符合预设规范的代码，则会报错，以提醒开发人员根据报错指示修改页面代码文件。

代码检测工具可以为eslint工具或stylelint工具等不局限于此。Eslint提供一个插件化的javascript代码检测工具，用来检查代码是否符合指定的规范。使用eslint的好处在于：多人协作时代码风格统一。Stylelint为一种css代码规范工具，可以发现细微的编码错误，支持插件。

本实施例通过代码检测工具对生成的页面代码文件进行规范检查，解决了现有技术中代码质量不高、代码不规范等问题。通过本实施例得到的页面代码文件符合统一代码规范，代码质量高，实现了企业内或项目内代码的统一规范，同时降低了代码维护成本和二次开发成本，提高了开发效率，降低了企业成本。

在一个实施例中，在生成页面代码文件之后，该方法还包括：

调用预先配置的代码格式化工具对页面代码文件进行代码风格统一。

具体地，代码格式化工具例如可以使用prettier。Prettier是一种Opinionated的代码格式化工具，能够去掉代码中的所有样式风格，使输出代码保持风格一致。对于HTML、CSS、JS、JAVA、PHP、Ruby、Python等形式代码prettier都可以支持代码格式化。

格式化代码具体是统一生成的组件、容器区块、页面代码模板的代码格式，格式化具体的处理例如统一按缩进2个空格、统一代码结尾使用分号等不局限于此，具体遵循对代码格式化工具的预先配置规则。

通过代码格式化可以统一项目中代码格式风格，降低代码维护和二次开发成本，提高了开发效率，降低了企业成本。

本申请提出的自定义配置页面的方案在于可以动态配置生成较复杂前端页面，不限于图文或者高度等格式或风格固定的简单页面，解决了现有技术无法实现页面功能定制化的问题，支持自定义功能接入页面配置文件，增加页面配置文件生成的灵活性与适用范围。通过少量的配置代码即可自动生成页面代码文件，无需研发人员手动编写页面代码，可以实现任意复杂页面对应的页面代码文件的自动动态生成。同时解决配置生成页面文件代码质量不高导致后续维护成本高的问题，通过对页面代码文件进行规范性检测和约束，由于物料库以及生成的页面代码文件符合统一的代码规范，因此提高了代码质量，代码质量有保证便于二次开发，有效提升开发效率，降低企业运营成本。同时代码质量提升了系统稳定性，改善了服务质量，提高客户满意度。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

图2为本申请一实施例中自定义配置页面的装置的结构框图。参考图2，该装置包括：

解析模块100，用于对获取到的待生成页面的页面配置文件进行解析；

第一代码生成模块200，用于获取符合解析到的页面类型信息和页面代码技术栈信息的页面代码模板；

第二代码生成填写模块300，用于根据解析到的页面区块结构信息，获取待生成页面所包含的每个容器区块的第一代码，将第一代码填写至页面代码模板中；

第三代码生成填写模块400，用于根据解析到的组件信息，获取每个容器区块所包含的组件的第二代码，将第二代码填写至页面代码模板中；

代码文件生成模块500，用于根据填写完成后的页面代码模板生成待生成页面的页面代码文件。

在一个实施例中，解析模块100具体包括：

第一读取解析模块，用于读取待生成页面的页面配置文件中的第一字段，根据第一字段的取值确定待生成页面的页面类型信息；

第二读取解析模块，用于读取页面配置文件中的第二字段，根据第二字段的取值确定待生成页面的页面代码技术栈信息；

第三读取解析模块，用于读取页面配置文件中的第三字段，根据第三字段的取值确定待生成页面的页面区块结构信息，其中，页面区块结构信息用于指示待生成页面所包含的容器区块及容器区块的第一布局信息；

第四读取解析模块，用于读取页面配置文件，获取每个组件的组件信息，其中，组件信息包括对应组件所在的容器区块以及组件属性信息。

在一个实施例中，第四读取解析模块具体包括：

函数读取解析模块，用于读取页面配置文件中的渲染函数，从渲染函数中获取待生成页面所包含的组件以及每个组件所在的容器区块；

字段读取解析模块，用于读取页面配置文件中的第四字段，根据第四字段的取值确定对应组件的组件属性信息。

在一个实施例中，页面代码模板是根据从预先开发的物料库获取的初始代码模板生成的；

第一代码和第二代码均是根据从物料库获取的对应初始代码生成的；

该装置还包括：

第一自定义模块，用于接收用户对物料库的第一自定义功能入口的调用操作，通过第一自定义功能入口接收用户新增的功能代码，其中，功能代码为组件对应的初始代码、页面对应的初始代码模板中的至少一种。

在一个实施例中，第三代码生成填写模块400具体包括：

第一匹配模块，用于从物料库获取每个组件对应的初始代码；

第一提取填写模块，用于从组件信息中提取出属性字段的取值填写至对应初始代码中，得到对应组件的第二代码；

第一挂载模块，用于将第二代码挂载至对应容器区块的第一代码下。

在一个实施例中，该装置还包括：

代码检查模块，用于根据预先配置的代码检测工具对页面代码文件进行规范检查；

报错模块，用于若出现不符合配置规范的代码，则进行报错提示。

在一个实施例中，该装置还包括：

代码格式化模块，用于调用预先配置的代码格式化工具对页面代码文件进行代码风格统一。

其中上述模块/单元中的“第一”和“第二”的意义仅在于将不同的模块/单元加以区分，并不用于限定哪个模块/单元的优先级更高或者其它的限定意义。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或模块的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或模块，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或模块，本申请中所出现的模块的划分，仅仅是一种逻辑上的划分，实际应用中实现时可以有另外的划分方式。

关于自定义配置页面的装置的具体限定可以参见上文中对于自定义配置页面的方法的限定，在此不再赘述。上述自定义配置页面的装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

图3为本申请一实施例中计算机设备的内部结构框图。如图3所示，该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、输入装置和显示屏。其中，该计算机设备的处理器用于提供计算和控制能力。存储器包括存储介质和内存储器。存储介质可以是非易失性存储介质，也可以是易失性存储介质。存储介质存储有操作系统，还可存储有计算机可读指令，该计算机可读指令被处理器执行时，可使得处理器实现自定义配置页面的方法。该内存储器为存储介质中的操作系统和计算机可读指令的运行提供环境。该内存储器中也可储存有计算机可读指令，该计算机可读指令被处理器执行时，可使得处理器执行自定义配置页面的方法。该计算机设备的网络接口用于与外部服务器通过网络连接通信。计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机可读指令(例如计算机程序)，处理器执行计算机可读指令时实现上述实施例中自定义配置页面的方法的步骤，例如图1所示的步骤S100至步骤S500及该方法的其它扩展和相关步骤的延伸。或者，处理器执行计算机可读指令时实现上述实施例中自定义配置页面的装置的各模块/单元的功能，例如图2所示模块100至模块500的功能。为避免重复，这里不再赘述。

处理器可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，处理器是计算机装置的控制中心，利用各种接口和线路连接整个计算机装置的各个部分。

存储器可用于存储计算机可读指令和/或模块，处理器通过运行或执行存储在存储器内的计算机可读指令和/或模块，以及调用存储在存储器内的数据，实现计算机装置的各种功能。存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据手机的使用所创建的数据(比如音频数据、视频数据等)等。

存储器可以集成在处理器中，也可以与处理器分开设置。

本领域技术人员可以理解，图3中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机可读指令，计算机可读指令被处理器执行时实现上述实施例中自定义配置页面的方法的步骤，例如图1所示的步骤S100至步骤S500及该方法的其它扩展和相关步骤的延伸。或者，计算机可读指令被处理器执行时实现上述实施例中自定义配置页面的装置的各模块/单元的功能，例如图2所示模块100至模块500的功能。为避免重复，这里不再赘述。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指示相关的硬件来完成，所述的计算机可读指令可存储于一计算机可读取存储介质中，该计算机可读指令在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双倍速率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

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

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

以上仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。

Claims (10)

1.一种自定义配置页面的方法，其特征在于，所述方法包括：

对获取到的待生成页面的页面配置文件进行解析；

获取符合解析到的页面类型信息和页面代码技术栈信息的页面代码模板；

根据解析到的页面区块结构信息，获取所述待生成页面所包含的每个容器区块的第一代码，将所述第一代码填写至所述页面代码模板中；

根据解析到的组件信息，获取每个所述容器区块所包含的组件的第二代码，将所述第二代码填写至所述页面代码模板中；

根据填写完成后的页面代码模板生成所述待生成页面的页面代码文件。

2.根据权利要求1所述的方法，其特征在于，所述对获取到的待生成页面的页面配置文件进行解析，包括：

读取待生成页面的页面配置文件中的第一字段，根据所述第一字段的取值确定所述待生成页面的页面类型信息；

读取所述页面配置文件中的第二字段，根据所述第二字段的取值确定所述待生成页面的页面代码技术栈信息；

读取所述页面配置文件中的第三字段，根据所述第三字段的取值确定所述待生成页面的页面区块结构信息，其中，所述页面区块结构信息用于指示所述待生成页面所包含的容器区块及所述容器区块的第一布局信息；

读取所述页面配置文件，获取每个组件的组件信息，其中，所述组件信息包括对应组件所在的容器区块以及组件属性信息。

3.根据权利要求2所述的方法，其特征在于，所述读取所述页面配置文件，获取每个组件的组件信息，包括：

读取所述页面配置文件中的渲染函数，从所述渲染函数中获取所述待生成页面所包含的组件以及每个组件所在的容器区块；

读取所述页面配置文件中的第四字段，根据所述第四字段的取值确定对应组件的组件属性信息。

4.根据权利要求1所述的方法，其特征在于，所述页面代码模板是根据从预先开发的物料库获取的初始代码模板生成的；

所述第一代码和第二代码均是根据从所述物料库获取的对应初始代码生成的；

所述方法还包括：

接收用户对所述物料库的第一自定义功能入口的调用操作，通过所述第一自定义功能入口接收所述用户新增的功能代码，其中，所述功能代码为组件对应的初始代码、页面对应的初始代码模板中的至少一种。

5.根据权利要求1所述的方法，其特征在于，所述获取每个所述容器区块所包含的组件的第二代码，将所述第二代码填写至所述页面代码模板中，包括：

从物料库获取每个组件对应的初始代码；

从所述组件信息中提取出属性字段的取值填写至对应初始代码中，得到对应组件的第二代码；

将所述第二代码挂载至对应容器区块的第一代码下。

6.根据权利要求1所述的方法，其特征在于，在生成所述页面代码文件之后，所述方法还包括：

根据预先配置的代码检测工具对所述页面代码文件进行规范检查；

若出现不符合配置规范的代码，则进行报错提示。

7.根据权利要求1所述的方法，其特征在于，在生成所述页面代码文件之后，所述方法还包括：

调用预先配置的代码格式化工具对所述页面代码文件进行代码风格统一。

8.一种自定义配置页面的装置，其特征在于，所述装置包括：

解析模块，用于对获取到的待生成页面的页面配置文件进行解析；

第一代码生成模块，用于获取符合解析到的页面类型信息和页面代码技术栈信息的页面代码模板；

第二代码生成填写模块，用于根据解析到的页面区块结构信息，获取所述待生成页面所包含的每个容器区块的第一代码，将所述第一代码填写至所述页面代码模板中；

第三代码生成填写模块，用于根据解析到的组件信息，获取每个所述容器区块所包含的组件的第二代码，将所述第二代码填写至所述页面代码模板中；

代码文件生成模块，用于根据填写完成后的页面代码模板生成所述待生成页面的页面代码文件。

9.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机可读指令，其特征在于，所述处理器执行所述计算机可读指令时执行如权利要求1-7任一项所述的自定义配置页面的方法的步骤。

10.一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机可读指令，其特征在于，所述计算机可读指令被处理器执行时，使得所述处理器执行如权利要求1-7任一项所述的自定义配置页面的方法的步骤。

Images