CN110286904A - 生成前端皮肤的方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本申请中提供了一种生成前端皮肤的方法、装置、计算机设备和存储介质，获取到多个预设皮肤模板，预设皮肤模板包括显示于显示界面的各应用以及各应用对应的应用参数；接收用户从所有预设皮肤模板中选择的第一皮肤模板，以及接收用户在第一皮肤模板内选择的第一应用和第一应用对应的第一应用参数；获取到与第一皮肤模板对应的第一主题代码，以及获取到第一应用参数对应的参数代码；将参数代码设于第一主题代码中形成第一配置代码，并根据所述第一配置代码生成对应的皮肤配置；根据皮肤配置生成预览皮肤，并将预览皮肤发送于显示平台上进行显示预览。生成前端皮肤的方法简单，提升前端皮肤的制作效率，且可实时预览。

Description

生成前端皮肤的方法、装置、计算机设备和存储介质

技术领域

本申请涉及计算机技术领域，特别涉及一种生成前端皮肤的方法、装置、计算机设备和存储介质。

背景技术

目前市面上，前端皮肤的制作都是程序员直接编写代码并将代码植入到项目中，或者有一套皮肤制作的软件生成皮肤文件后再植入到项目中，采用这种方式制作前端皮肤比较繁琐，效率低，且皮肤的可变项目不多。

发明内容

本申请的主要目的为提供一种生成前端皮肤的方法、装置、计算机设备和存储介质，旨在解决提升前端皮肤的制作效率的问题。

为实现上述目的，本申请提供了一种生成前端皮肤的方法，包括以下步骤：

获取到多个预设皮肤模板，其中，所述预设皮肤模板包括显示于显示界面的各应用以及所述各应用对应的应用参数，所述应用参数是指应用于所述各应用上的皮肤颜色的参数；

接收用户从所有所述预设皮肤模板中选择的第一皮肤模板，以及接收所述用户在所述第一皮肤模板内选择的第一应用和所述第一应用对应的第一应用参数；

获取到与所述第一皮肤模板对应的第一主题代码，以及获取到所述第一应用参数对应的参数代码；

将所述参数代码设于所述第一主题代码中形成第一配置代码，并根据所述第一配置代码生成对应的皮肤配置；

根据所述皮肤配置生成预览皮肤，并将所述预览皮肤发送于显示平台上进行显示预览。

进一步地，所述获取到多个预设皮肤模板的步骤之后，还包括：

将获取到的所有所述预设皮肤模板存储于皮肤数据库中；

接收到对所述皮肤数据库中的所有所述预设皮肤模板的管理指令，其中，所述管理指令包括但不限于以下的一种或者多种：增加指令、删除指令和修改指令；

依据所述管理指令，对所述预设皮肤模板进行处理。

进一步地，所述将所述参数代码设于所述第一主题代码中形成第一配置代码，并根据所述第一配置代码生成对应的皮肤配置的步骤之后，包括：

获取所述第一皮肤模板对应的第一皮肤模板ID，以及获取到所述第一配置代码对应的第一配置模板ID，其中，所述第一配置模板ID与所述第一皮肤模板的ID相同；

根据所述第一皮肤模板ID和第一配置模板ID，将所述第一皮肤模板与所述第一配置代码建立关联关系；

实时监控所述第一皮肤模板对应的第一主题代码是否变更；

若是，则根据所述关联关系对应变更所述第一配置代码中的所述第一主题代码。

进一步地，所述将所述预览皮肤发送于显示平台上进行显示预览的步骤，包括：

将所述皮肤通过预览引擎发送至所述显示平台上进行显示预览。

进一步地，所述接收用户从所有所述预设皮肤模板中选择的第一皮肤模板的步骤，还包括：

将所有所述预设皮肤模板的皮肤主题内容显示在所述显示平台，所述皮肤主题内容包括主题列表、主题配置、主题应用以及应用参数；

接收所述用户选择的第一皮肤主题内容，并根据所述第一皮肤主题内容确定选择的所述第一皮肤模板。

进一步地，所述获取到与所述第一皮肤模板对应的第一主题代码的步骤之后，包括：

判断所述第一主题代码对应的皮肤是否适应于所述显示平台；

若否，将当前的所述第一主题代码对应的所述第一皮肤模板发送至开发人员的终端，以供所述终端的开发人员进行修改后生成第二皮肤模板；

接收所述终端发送的所述第二皮肤模板。

进一步地，所述接收所述终端发送的所述第二皮肤模板的步骤之后，包括：

将所述第二皮肤模板存储于所述皮肤数据库中并替换对应的所述第一皮肤模板。

本申请还提供了一种生成前端皮肤的装置，包括：

第一获取模块，用于获取到多个预设皮肤模板，其中，所述皮肤模板包括显示于显示界面的各应用以及所述各应用对应的应用参数，所述应用参数是指应用于所述各应用上的皮肤颜色的参数；

第一接收模块，用于接收用户从所有所述预设皮肤模板中选择的第一皮肤模板，以及接收所述用户在所述第一皮肤模板内选择的第一应用和所述第一应用对应的第一应用参数；

第二获取模块，用于获取到与所述第一皮肤模板对应的第一主题代码，以及获取到与所述第一应用参数对应的参数代码；

生成模块，用于将所述参数代码设于所述第一主题代码中形成第一配置代码，并根据所述第一配置代码生成对应的皮肤配置；

发送模块，用于根据所述皮肤配置生成预览皮肤，并将所述预览皮肤发送于显示平台上进行显示预览。

本申请还提供一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序时实现上述任一项所述方法的步骤。

本申请还提供一种计算机存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任一项所述的方法的步骤。

本申请中提供的生成前端皮肤的方法、装置、计算机设备和存储介质，具有以下有益效果：

通过将预设好的皮肤模板存储于存储库中，以便用户可以选取所需的皮肤模板以及对应的参数，以便得到对应的主题代码，并获取到主题代码生成的皮肤配置显示于显示平台上进行显示预览，生成前端皮肤简单，提升前端皮肤的制作效率，且可实时预览。

附图说明

图1是本申请一实施例中生成前端皮肤的方法步骤示意图；

图2是本申请一实施例中生成前端皮肤的装置结构框图；

图3是本申请一实施例的计算机设备的结构示意框图。

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

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

参照图1，为本申请一实施例中提供了一种生成前端皮肤的方法，包括以下步骤：

步骤S1，获取到多个预设皮肤模板，其中，所述预设皮肤模板包括显示于显示界面的各应用以及所述各应用对应的应用参数，所述应用参数是指应用于所述各应用上的皮肤颜色的参数；

步骤S2，接收用户从所有所述预设皮肤模板中选择的第一皮肤模板，以及接收所述用户在所述第一皮肤模板内选择的第一应用和所述第一应用对应的第一应用参数；

步骤S3，获取到与所述第一皮肤模板对应的第一主题代码，以及获取到所述第一应用参数对应的参数代码；

步骤S4，将所述参数代码设于所述第一主题代码中形成第一配置代码，并根据所述第一配置代码生成对应的皮肤配置；

步骤S5，根据所述皮肤配置生成预览皮肤，并将所述预览皮肤发送于显示平台上进行显示预览。

以上步骤中，通过接收到开发人员预先编写好的每一皮肤模板对应的皮肤代码，每一皮肤代码均可生成对应的皮肤，***可将皮肤显示于显示界面上；在本实施例中，***/后台预先接收到开发人员设置的多种类型的预设皮肤模板，其中，预设皮肤模板包括有用于显示在显示界面的各应用以及各应用对应的应用参数，所述应用参数指的是应用于各应用上的皮肤颜色的参数，如应用于包括***的主菜单、按钮、列表、整体的大背景颜色等等参数，而应用参数包括每一应用中的主色、不可操作色、背景图、普通色等等，在其他实施例中，应用参数还包括应用于各应用上的图片，如在皮肤里面的独立背景图片，定义为背景图，根据预设的应用参数进行定义对应的背景图，可以根据接收到的用户所选择的具体参数，如接收到用户选择的应用于“主菜单”，颜色为普通色的，接收用户选择的应用于“按钮选中”，颜色为主色等，根据接收到用户选择的第一皮肤模板以及应用参数，获取到所选取第一皮肤模板对应的第一主题代码，以及接收到用户选择的各应用参数的参数代码，将参数代码设于第一主题代码内形成第一配置代码，根据第一配置代码生成对应的皮肤配置，并将该皮肤配置生成预览皮肤发送至显示平台上，进行显示预览，以供用户查看是否为所需的配置皮肤。

在本实施例中，存储于***/后台的所有的皮肤模板、主题代码等等，均通过***的对外接口利用浏览器插件显示于显示平台上供用户进行选择，当用户选择完成后，通过***/后台的预览引擎将皮肤代码生成对应的皮肤后，发送至浏览器插件并显示于浏览器中进行预览，通过浏览器与***/后台的交互，可将每一次生成的皮肤显示于前端/显示平台上，即可实时改变前端所显示的内容，实现了实时皮肤预览效果。

在本实施例中，根据用户选取不同类型的皮肤模板，可生成多种与选取类型对应的皮肤代码于***中，再根据所选取的预设皮肤模板进行选择不同的应用以及应用参数，以生成符合用户需要的主题代码。

在一实施例中，所述获取到多个预设皮肤模板的步骤S1之后，还包括：

步骤S11，将获取到的所有所述预设皮肤模板存储于皮肤数据库中；

步骤S12，接收到对所述皮肤数据库中的所有所述预设皮肤模板的管理指令，其中，所述管理指令包括但不限于以下的一种或者多种：增加指令、删除指令和修改指令；

步骤S13，依据所述管理指令，对所述预设皮肤模板进行处理。

以上步骤中，将获取到的开发人员开发的所有的预设皮肤模板存储于皮肤数据库中，***接收到对存储于皮肤数据库中的所有预设皮肤模板的管理指令后，依据该管理指令，对所述预设模板进行处理。如若接收到新增皮肤模板，根据新增皮肤模板的标签获取皮肤数据库中是否存在相同标签的皮肤模板，若不存在，则直接将新增皮肤模板增加至皮肤数据库中，若存在相同的标签，在一实施例中，可将新增皮肤模板替换存储于皮肤数据库中的相同标签的皮肤模板；在另一实施例中，也可以将存储于皮肤数据库中的相同标签的皮肤模板发送至开发人员的终端，以便开发人员判断是否需要替换，若接收到开发人员的终端的替换指令的消息，则将新增皮肤模板替换存储于皮肤数据库中的相同标签的皮肤模板，若接收到开发人员的终端更改新增皮肤模板的标签，则判断更改标签后的新增皮肤模板的标签，在皮肤数据库中是否也存在相同标签的皮肤模板，若否，则直接增加存储于皮肤数据库中；在其他实施例中，也可以直接对***内的皮肤数据库中的皮肤模板进行删除或者修改。

在一实施例中，所述将所述参数代码设于所述第一主题代码中形成第一配置代码，并根据所述第一配置代码生成对应的皮肤配置的步骤S4之后，包括：

步骤S401，获取所述第一皮肤模板对应的第一皮肤模板ID，以及获取到所述第一配置代码对应的第一配置模板ID，其中，所述第一配置模板ID与所述第一皮肤模板ID相同；

步骤S402，根据所述第一皮肤模板ID和第一配置模板ID，将所述第一皮肤模板与所述第一配置代码建立关联关系；

步骤S403，实时监控所述第一皮肤模板对应的所述第一主题代码是否变更；

步骤S404，若是，则根据所述关联关系对应变更所述第一配置代码中的所述第一主题代码。

以上步骤中，***需要将接收到的每一配置好的皮肤所对应的第一配置代码与第一皮肤模板进行关联，其通过获取到所述第一皮肤模板对应的第一皮肤模板ID，以及获取到所述第一配置代码对应的第一配置模板ID，其中，所述第一配置模板ID与所述第一皮肤模板ID相同；进而对所述第一皮肤模板与所述第一配置代码建立关联关系，实时监控所述第一皮肤模板对应的所述第一主题代码是否变更，以便在之后的更新页面上，更加方便修改原有的第一皮肤模板，可根据所述关联关系对应变更所述第一配置代码中的所述第一主题代码，无需开发人员重新编写一套新的皮肤代码，可以在关联的皮肤模板上进行修改或者扩展即可得到新的适应于当前显示界面的皮肤。

在一实施例中，获取到第一皮肤模板，即可获取到第一皮肤模板对应的第一皮肤模板ID，根据接收到用户在第一皮肤模板内选择的应用和应用参数，获取到对应的第一主题代码以及参数代码，将参数代码设于第一主题代码中形成第一配置代码，并根据第一配置代码生成用户所需的对应的皮肤配置，根据第一配置代码获取到第一配置模板ID，并通过第一配置模板ID得到第一子模板ID，也称为template ID，其中，第一子模板ID与第一皮肤模板的ID相同，根据相同的ID对第一皮肤模板和所述第一配置代码进行关联，以便后续更新显示平台的界面时，若需要对应更新皮肤，可以在原有的基础上进行修改或者扩展。

在一实施例中，所述将所述预览皮肤发送于显示平台上进行显示预览的步骤S4，包括：

步骤S41，将所述皮肤通过预览引擎发送至所述显示平台上进行显示预览。

在一实施例中，将皮肤显示于显示平台上，是通过三部分浏览器端(用户端)、浏览器插件、后台(***)组合实现的，其中，浏览器端是负责实时显示预览效果，可以看到通过浏览器插件接收过来的最新的主题代码，在插件鼠标放置到相应的配置上，会在浏览器高亮作用区域。浏览器插件负责显示当前可用的主题列表，切换不同主题后，会将主题的对应配置项显示出来，它向后端的预览引擎拉取实时预览代码，并将实时预览的代码立即应用到浏览器环境中。当我们确定效果后，可以在浏览器插件上提交代码，将通过后端的开放接口提交请求。后台/***向浏览器插件提供实时预览代码，通过开放接口，可以向浏览器插件提供如主题配置、主题列表的相关内容。同时可以接收来自浏览器插件的配置请求，接收到配置请求后，获取相应的模板生成皮肤代码。还可以通过将生成的代码发布到不同的环境(开发、测试、线上)，发布代码后，会通过开放接口返回相应的代码地址等内容。

插件应用于显示平台上，用户通过插件设置好所需显示的皮肤配置，通过***/后台的接口传输并配置，再通过后台的预览引擎发送至插件上并显示于显示平台上，以供用户查看是否为所需的界面预览。

在一实施例中，所述接收用户从所有所述预设皮肤模板中选择的第一皮肤模板的步骤S2，还包括：

步骤S201，将所有所述预设皮肤模板的皮肤主题内容显示在所述显示平台上，所述皮肤主题内容包括主题列表、主题配置、主题应用以及应用参数；

步骤S202，接收所述用户选择的第一皮肤主题内容，并根据所述第一皮肤主题内容确定选择的所述第一皮肤模板。

以上步骤中，***通过接口与显示平台对接和交互，将所有所述预设皮肤模板的皮肤主题内容显示在所述显示平台上，其中，皮肤主题包括用皮肤的主题列表、主题配置、主题应用，以及各应用参数，以便用户进行选取，将选取好的内容所对应的代码进行整合确定用户选择的第一皮肤模板，依据所述第一皮肤模板生成第一主题代码，以便得到用户所需的模板皮肤。

在一实施例中，所述获取到与所述第一皮肤模板对应的第一主题代码的步骤S3之后，包括：

步骤S31，判断所述第一主题代码对应的皮肤是否适应于所述显示平台；

步骤S32，若否，将当前的所述第一主题代码对应的所述第一皮肤模板发送至开发人员的终端，以供所述终端的开发人员进行修改后生成第二皮肤模板；

步骤S33，接收所述终端发送的所述第二主题代码。

以上步骤中，将配置好的皮肤应用于显示平台上，以便改善显示平台的交互界面，但当前端显示界面进行改善或者调整后，可能会导致配置好的皮肤无法满足调整后的前端显示界面，此时需要新的一套配置皮肤进行适应当前的显示界面。在本实施例中，判断所述第一主题代码对应的皮肤是否适应于当前的显示平台，若否，将当前的所述第一主题代码对应的所述第一皮肤模板发送至开发人员的终端，以供所述终端的开发人员进行修改后生成第二皮肤模板；接收所述终端发送的所述第二皮肤模板，且同时可以获取所述第二皮肤模板对应的第二主题代码，以便第二主题代码适应当前的显示界面。

在本实施中，通过插件提交皮肤制作请求后，***生成所需皮肤代码并将皮肤代码存储在***存储库中。***管理员可将皮肤相关代码和配置发送到静态文件服务器，***通过接口返回皮肤访问地址。显示终端可通过接口应用显示对应的皮肤。

在一实施例中，所述接收所述终端发送的所述第二主题代码的步骤S33之后，包括：

步骤S34，将所述第二皮肤模板存储于所述皮肤数据库中并替换对应的所述第一皮肤模板。

以上步骤中，接收到所述第二皮肤模板后，将所述第二皮肤模板存储于所述皮肤数据库中，并替换对应的所述第一皮肤模板，根据新增的第二皮肤模板的标签获取皮肤数据库中是否存在相同标签的第一皮肤模板，若不存在，则直接将第二皮肤模板增加至皮肤数据库中，若存在相同的标签，在一实施例中，可将第二皮肤模板替换存储于皮肤数据库中的相同标签的第二皮肤模板；在其他实施例中，也可以将存储于皮肤数据库中的相同标签的第一皮肤模板发送至开发人员的终端，以便开发人员判断是否需要替换，若接收到开发人员的终端的替换指令的消息，则将新增的第二皮肤模板替换存储于皮肤数据库中的相同标签的第一皮肤模板，若接收到开发人员的终端更改新增皮肤模板的标签，则判断更改标签后的第二皮肤模板的标签，在皮肤数据库中是否也存在相同标签的第一皮肤模板，若否，则直接增加存储于皮肤数据库中。将获取到的所述第二皮肤模板对应的所述第二主题代码存储于对应的代码库中，若需要替换第一主题代码，则对应替换第一主题代码。

综上所述，为本申请实施例中提供的生成前端皮肤的方法，通过将预设皮肤模板存储于存储库中，以便用户可以选取所需的皮肤模板以及对应的参数，以便得到对应的主题代码，并获取到主题代码生成的皮肤配置显示于显示平台上进行显示预览，生成皮肤简单，提升前端皮肤的制作效率，且可实时预览。

参照图3，本申请一实施例中还提供了一种生成前端皮肤的装置，包括：

第一获取模块10，用于获取到多个预设皮肤模板，其中，所述皮肤模板包括显示于显示界面的各应用以及所述各应用对应的应用参数，所述应用参数指的是应用于所述各应用上的皮肤颜色的参数；

第一接收模块20，用于接收用户从所有所述预设皮肤模板中选择的第一皮肤模板，以及接收所述用户在所述第一皮肤模板内选择的第一应用和所述第一应用对应的第一应用参数；

第二获取模块30，用于获取到与所述第一皮肤模板对应的第一主题代码，以及获取到与所述第一应用参数对应的参数代码；

生成模块40，用于将所述参数代码设于所述第一主题代码中形成第一配置代码，并根据所述第一配置代码生成对应的皮肤配置；

第一发送模块50，用于根据所述皮肤配置生成预览皮肤，并将所述预览皮肤发送于显示平台上进行显示预览。

本实施例中，通过接收到开发人员预先编写好的每一皮肤模板对应的皮肤代码，每一皮肤代码均可生成对应的皮肤，***可将皮肤显示于显示界面上；第一获取模块10获取到开发人员设置的多种类型的预设皮肤模板，其中，预设皮肤模板包括有用于显示在显示界面的各应用以及各应用对应的应用参数，所述应用参数指的是应用于各应用上的皮肤颜色的参数，如应用于包括***的主菜单、按钮、列表、整体的大背景颜色等等参数，而应用参数包括每一应用中的主色、不可操作色、背景图、普通色等等，在其他实施例中，应用参数还包括应用于各应用上的图片，如在皮肤里面的独立背景图片，定义为背景图，根据预设的应用参数进行定义对应的背景图，可以根据接收到的用户所选择的具体参数，如接收到用户选择的应用于“主菜单”，颜色为普通色的，接收用户选择的应用于“按钮选中”，颜色为主色等，根据第一接收模块20接收到用户选择的第一皮肤模板以及应用参数，第二获取模块30获取到所选取第一皮肤模板对应的第一主题代码，以及接收到用户选择的各应用参数的参数代码，生成模块40将参数代码设于第一主题代码内形成第一配置代码，根据第一配置代码生成对应的皮肤配置，并通过第一发送模块50将该皮肤配置生成预览皮肤发送至显示平台上，进行显示预览，以供用户查看是否为所需的配置皮肤。

在本实施例中，存储于***/后台的所有的皮肤模板、主题代码等等，均通过***的对外接口利用浏览器插件显示于显示平台上供用户进行选择，当用户选择完成后，通过***/后台的预览引擎将皮肤代码生成对应的皮肤后，发送至浏览器插件并显示于浏览器中进行预览，通过浏览器与***/后台的交互，可将每一次生成的皮肤显示于前端/显示平台上，即可实时改变前端所显示的内容，实现了实时皮肤预览效果。

在本实施例中，根据用户选取不同类型的皮肤模板，可生成多种与选取类型对应的皮肤代码于***中，再根据所选取的预设皮肤模板进行选择不同的应用以及应用参数，以生成符合用户需要的主题代码。

在一实施例中，生成前端皮肤的装置还包括：

存储模块，用于将获取到的所有所述预设皮肤模板存储于皮肤数据库中；

管理模块，用于接收到对所述皮肤数据库中的所有所述预设皮肤模板的管理指令，其中，所述管理指令包括但不限于以下的一种或者多种：增加指令、删除指令和修改指令；

处理模块，用于依据所述管理指令，对所述预设皮肤模板进行处理。

在本实施例中，存储模块将获取到的开发人员开发的所有的预设皮肤模板存储于皮肤数据库中，管理模块接收到对存储于皮肤数据库中的所有预设皮肤模板的管理指令后，依据该管理指令，处理模块对所述预设模板进行处理。如若接收到新增皮肤模板，根据新增皮肤模板的标签获取皮肤数据库中是否存在相同标签的皮肤模板，若不存在，则直接将新增皮肤模板增加至皮肤数据库中，若存在相同的标签，在一实施例中，可将新增皮肤模板替换存储于皮肤数据库中的相同标签的皮肤模板；在另一实施例中，也可以将存储于皮肤数据库中的相同标签的皮肤模板发送至开发人员的终端，以便开发人员判断是否需要替换，若接收到开发人员的终端的替换指令的消息，则将新增皮肤模板替换存储于皮肤数据库中的相同标签的皮肤模板，若接收到开发人员的终端更改新增皮肤模板的标签，则判断更改标签后的新增皮肤模板的标签，在皮肤数据库中是否也存在相同标签的皮肤模板，若否，则直接增加存储于皮肤数据库中；在其他实施例中，也可以直接对***内的皮肤数据库中的皮肤模板进行删除或者修改。

在一实施例中，生成前端皮肤的装置包括：

第三获取模块，用于获取所述第一皮肤模板对应的第一皮肤模板ID，以及获取到所述第一配置代码对应的第一配置模板ID，其中，所述第一配置模板ID与所述第一皮肤模板ID相同；

创建模块，用于根据所述第一皮肤模板ID和第一配置模板ID，将所述第一皮肤模板与所述第一配置代码建立关联关系；

监控模块，用于实时监控所述第一皮肤模板对应的所述第一主题代码是否变更；

执行模块，用于若是，则根据所述关联关系对应变更所述第一配置代码中的所述第一主题代码。

在本实施例中，创建模块需要将接收到的每一配置好的皮肤所对应的第一配置代码与第一皮肤模板进行关联，其通过第三获取模块获取到所述第一皮肤模板对应的第一皮肤模板ID，以及获取到所述第一配置代码对应的第一配置模板ID，其中，所述第一配置模板ID与所述第一皮肤模板ID相同；进而创建模块对所述第一皮肤模板与所述第一配置代码建立关联关系，并通过监控模块实时监控所述第一皮肤模板对应的所述第一主题代码是否变更，以便在之后的更新页面上，更加方便修改原有的第一皮肤模板，执行模块可根据所述关联关系对应变更所述第一配置代码中的所述第一主题代码，无需开发人员重新编写一套新的皮肤代码，可以在关联的皮肤模板上进行修改或者扩展即可得到新的适应于当前显示界面的皮肤。

在一实施例中，获取到第一皮肤模板，即可获取到第一皮肤模板对应的第一皮肤模板ID，根据接收到用户在第一皮肤模板内选择的应用和应用参数，获取到对应的第一主题代码以及参数代码，将参数代码设于第一主题代码中形成第一配置代码，并根据第一配置代码生成用户所需的对应的皮肤配置，根据第一配置代码获取到第一配置模板ID，并通过第一配置模板ID得到第一子模板ID，也称为template ID，其中，第一子模板ID与第一皮肤模板的ID相同，根据相同的ID对第一皮肤模板和所述第一配置代码进行关联，以便后续更新显示平台的界面时，若需要对应更新皮肤，可以在原有的基础上进行修改或者扩展。

在一实施例中，发送模块40包括：

发送单元，用于将所述皮肤通过预览引擎发送至所述显示平台上进行显示预览。

在一实施例中，发送单元将皮肤显示于显示平台上，是通过三部分浏览器端(用户端)、浏览器插件、后台(***)组合实现的，其中，浏览器端是负责实时显示预览效果，可以看到通过浏览器插件接收过来的最新的主题代码，在插件鼠标放置到相应的配置上，会在浏览器高亮作用区域。浏览器插件负责显示当前可用的主题列表，切换不同主题后，会将主题的对应配置项显示出来，它向后端的预览引擎拉取实时预览代码，并将实时预览的代码立即应用到浏览器环境中。当我们确定效果后，可以在浏览器插件上提交代码，将通过后端的开放接口提交请求。后台/***向浏览器插件提供实时预览代码，通过开放接口，可以向浏览器插件提供如主题配置、主题列表的相关内容。同时可以接收来自浏览器插件的配置请求，接收到配置请求后，获取相应的模板生成皮肤代码。还可以通过将生成的代码发布到不同的环境(开发、测试、线上)，发布代码后，会通过开放接口返回相应的代码地址等内容。

插件应用于显示平台上，用户通过插件设置好所需显示的皮肤配置，通过***/后台的接口传输并配置，再通过后台的预览引擎发送至插件上并显示于显示平台上，以供用户查看是否为所需的界面预览。

在一实施例中，第一接收模块还包括：

显示单元，用于将所有所述预设皮肤模板的皮肤主题内容显示在所述显示平台上，所述皮肤主题内容包括主题列表、主题配置、主题应用以及应用参数；

接收单元，用于接收所述用户选择的第一皮肤主题内容，并根据所述第一皮肤主题内容确定选择的所述第一皮肤模板。

在本实施例中，通过接口与显示平台对接和交互，显示单元将所有所述预设皮肤模板的皮肤主题内容显示在所述显示平台上，其中，皮肤主题包括用皮肤的主题列表、主题配置、主题应用，以及各应用参数，以便用户进行选取，接收单元接收到用户选取好的第一皮肤主题内容，并将选取好的第一皮肤主题内容所对应的代码进行整合确定用户选择的第一皮肤模板，依据所述第一皮肤模板生成第一主题代码，以便得到用户所需的模板皮肤。

在一实施例中，生成前端皮肤的装置包括：

判断模块，用于判断所述第一主题代码对应的皮肤是否适应于所述显示平台；

第二发送模块，用于若否，将当前的所述第一主题代码对应的所述第一皮肤模板发送至开发人员的终端，以供所述终端的开发人员进行修改后生成第二皮肤模板；

第二接收模块，接收所述终端发送的所述第二主题代码。

在本实施例中，将配置好的皮肤应用于显示平台上，以便改善显示平台的交互界面，但当前端显示界面进行改善或者调整后，可能会导致配置好的皮肤无法满足调整后的前端显示界面，此时需要新的一套配置皮肤进行适应当前的显示界面。在本实施例中，判断模块判断所述第一主题代码对应的皮肤是否适应于当前的显示平台，若否，第二发送模块将当前的所述第一主题代码对应的所述第一皮肤模板发送至开发人员的终端，以供所述终端的开发人员进行修改后生成第二皮肤模板；第二接收模块接收所述终端发送的所述第二皮肤模板，且同时可以获取所述第二皮肤模板对应的第二主题代码，以便第二主题代码适应当前的显示界面。

在本实施中，通过插件提交皮肤制作请求后，***生成所需皮肤代码并将皮肤代码存储在***存储库中。***管理员可将皮肤相关代码和配置发送到静态文件服务器，***通过接口返回皮肤访问地址。显示终端可通过接口应用显示对应的皮肤。

在一实施例中，第二接收模块包括：

替换单元，用于将所述第二皮肤模板存储于所述皮肤数据库中并替换对应的所述第一皮肤模板。

在本实施例中，替换单元接收到所述第二皮肤模板后，将所述第二皮肤模板存储于所述皮肤数据库中，并替换对应的所述第一皮肤模板，根据新增的第二皮肤模板的标签获取皮肤数据库中是否存在相同标签的第一皮肤模板，若不存在，则直接将第二皮肤模板增加至皮肤数据库中，若存在相同的标签，在一实施例中，可将第二皮肤模板替换存储于皮肤数据库中的相同标签的第二皮肤模板；在其他实施例中，也可以将存储于皮肤数据库中的相同标签的第一皮肤模板发送至开发人员的终端，以便开发人员判断是否需要替换，若接收到开发人员的终端的替换指令的消息，则将新增的第二皮肤模板替换存储于皮肤数据库中的相同标签的第一皮肤模板，若接收到开发人员的终端更改新增皮肤模板的标签，则判断更改标签后的第二皮肤模板的标签，在皮肤数据库中是否也存在相同标签的第一皮肤模板，若否，则直接增加存储于皮肤数据库中。将获取到的所述第二皮肤模板对应的所述第二主题代码存储于对应的代码库中，若需要替换第一主题代码，则对应替换第一主题代码。

综上所述，为本申请实施例中提供的生成前端皮肤的装置，通过将预设皮肤模板存储于存储库中，以便用户可以选取所需的皮肤模板以及对应的参数，以便得到对应的主题代码，并获取到主题代码生成的皮肤配置显示于显示平台上进行显示预览，生成皮肤简单，提升前端皮肤的制作效率，且可实时预览。

参照图3，本申请实施例中还提供一种计算机设备，该计算机设备可以是服务器，其内部结构可以如图3所示。该计算机设备包括通过***总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设计的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作***、计算机程序和数据库。该内存储器为非易失性存储介质中的操作***和计算机程序的运行提供环境。该计算机设备的数据库用于存储预设皮肤模板等数据。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种生成前端皮肤的方法。

上述处理器执行上述生成前端皮肤的方法的步骤：

获取到多个预设皮肤模板，其中，所述预设皮肤模板包括显示于显示界面的各应用以及所述各应用对应的应用参数，所述应用参数是指应用于所述各应用上的皮肤颜色的参数；

接收用户从所有所述预设皮肤模板中选择的第一皮肤模板，以及接收所述用户在所述第一皮肤模板内选择的第一应用和所述第一应用对应的第一应用参数；

获取到与所述第一皮肤模板对应的第一主题代码，以及获取到所述第一应用参数对应的参数代码；

将所述参数代码设于所述第一主题代码中形成第一配置代码，并根据所述第一配置代码生成对应的皮肤配置；

根据所述皮肤配置生成预览皮肤，并将所述预览皮肤发送于显示平台上进行显示预览。

在一实施例中，所述处理器获取到多个预设皮肤模板的步骤之后，还包括：

将获取到的所有所述预设皮肤模板存储于皮肤数据库中；

接收到对所述皮肤数据库中的所有所述预设皮肤模板的管理指令，其中，所述管理指令包括但不限于以下的一种或者多种：增加指令、删除指令和修改指令；

依据所述管理指令，对所述预设皮肤模板进行处理。

在一实施例中，所述处理器将所述参数代码设于所述第一主题代码中形成第一配置代码，并根据所述第一配置代码生成对应的皮肤配置的步骤之后，包括：

获取所述第一皮肤模板对应的第一皮肤模板ID，以及获取到所述第一配置代码对应的第一配置模板ID，其中，所述第一配置模板ID与所述第一皮肤模板ID相同；

根据所述第一皮肤模板ID和第一配置模板ID，将所述第一皮肤模板与所述第一配置代码建立关联关系；

实时监控所述第一皮肤模板对应的所述第一主题代码是否变更；

若是，则根据所述关联关系对应变更所述第一配置代码中的所述第一主题代码。

在一实施例中，所述处理器将所述预览皮肤发送于显示平台上进行显示预览的步骤，包括：

将所述皮肤通过预览引擎发送至所述显示平台上进行显示预览。

在一实施例中，所述处理器接收用户从所有所述预设皮肤模板中选择的第一皮肤模板的步骤，还包括：

将所有所述预设皮肤模板的皮肤主题内容显示在所述显示平台上，所述皮肤主题内容包括主题列表、主题配置、主题应用以及应用参数；

接收所述用户选择的第一皮肤主题内容，并根据所述第一皮肤主题内容确定选择的所述第一皮肤模板。

在一实施例中，所述处理器获取到与所述第一皮肤模板对应的第一主题代码的步骤之后，包括：

判断所述第一主题代码对应的皮肤是否适应于所述显示平台；

若否，将当前的所述第一主题代码对应的所述第一皮肤模板发送至开发人员的终端，以供所述终端的开发人员进行修改后生成第二皮肤模板；

接收所述终端发送的所述第二皮肤模板。

在一实施例中，所述处理器接收所述终端发送的所述第二皮肤模板的步骤之后，包括：

将所述第二皮肤模板存储于所述皮肤数据库中并替换对应的所述第一皮肤模板。

本领域技术人员可以理解，图3中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定。

本申请一实施例还提供一种计算机存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现一种生成前端皮肤的方法，具体为：

获取到多个预设皮肤模板，其中，所述预设皮肤模板包括显示于显示界面的各应用以及所述各应用对应的应用参数，所述应用参数是指应用于所述各应用上的皮肤颜色的参数；

接收用户从所有所述预设皮肤模板中选择的第一皮肤模板，以及接收所述用户在所述第一皮肤模板内选择的第一应用和所述第一应用对应的第一应用参数；

获取到与所述第一皮肤模板对应的第一主题代码，以及获取到所述第一应用参数对应的参数代码；

将所述参数代码设于所述第一主题代码中形成第一配置代码，并根据所述第一配置代码生成对应的皮肤配置；

根据所述皮肤配置生成预览皮肤，并将所述预览皮肤发送于显示平台上进行显示预览。

在一实施例中，所述处理器获取到多个预设皮肤模板的步骤之后，还包括：

将获取到的所有所述预设皮肤模板存储于皮肤数据库中；

接收到对所述皮肤数据库中的所有所述预设皮肤模板的管理指令，其中，所述管理指令包括但不限于以下的一种或者多种：增加指令、删除指令和修改指令；

依据所述管理指令，对所述预设皮肤模板进行处理。

在一实施例中，所述处理器将所述参数代码设于所述第一主题代码中形成第一配置代码，并根据所述第一配置代码生成对应的皮肤配置的步骤之后，包括：

获取所述第一皮肤模板对应的第一皮肤模板ID，以及获取到所述第一配置代码对应的第一配置模板ID，其中，所述第一配置模板ID与所述第一皮肤模板ID相同；

根据所述第一皮肤模板ID和第一配置模板ID，将所述第一皮肤模板与所述第一配置代码建立关联关系；

实时监控所述第一皮肤模板对应的所述第一主题代码是否变更；

若是，则根据所述关联关系对应变更所述第一配置代码中的所述第一主题代码。

在一实施例中，所述处理器将所述预览皮肤发送于显示平台上进行显示预览的步骤，包括：

将所述皮肤通过预览引擎发送至所述显示平台上进行显示预览。

在一实施例中，所述处理器接收用户从所有所述预设皮肤模板中选择的第一皮肤模板的步骤，还包括：

将所有所述预设皮肤模板的皮肤主题内容显示在所述显示平台上，所述皮肤主题内容包括主题列表、主题配置、主题应用以及应用参数；

接收所述用户选择的第一皮肤主题内容，并根据所述第一皮肤主题内容确定选择的所述第一皮肤模板。

在一实施例中，所述处理器获取到与所述第一皮肤模板对应的第一主题代码的步骤之后，包括：

判断所述第一主题代码对应的皮肤是否适应于所述显示平台；

若否，将当前的所述第一主题代码对应的所述第一皮肤模板发送至开发人员的终端，以供所述终端的开发人员进行修改后生成第二皮肤模板；

接收所述终端发送的所述第二皮肤模板。

在一实施例中，所述处理器接收所述终端发送的所述第二皮肤模板的步骤之后，包括：

将所述第二皮肤模板存储于所述皮肤数据库中并替换对应的所述第一皮肤模板。

综上所述，为本申请实施例中提供的生成前端皮肤的方法、装置、计算机设备和存储介质，通过将预设皮肤模板存储于存储库中，以便用户可以选取所需的皮肤模板以及对应的参数，以便得到对应的主题代码，并获取到主题代码生成的皮肤配置显示于显示平台上进行显示预览，生成皮肤简单，提升前端皮肤的制作效率，且可实时预览。。

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

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

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

Claims (10)

1.一种生成前端皮肤的方法，其特征在于，包括以下步骤：

获取到多个预设皮肤模板，其中，所述预设皮肤模板包括显示于显示界面的各应用以及所述各应用对应的应用参数，所述应用参数是指应用于所述各应用上的皮肤颜色的参数；

接收用户从所有所述预设皮肤模板中选择的第一皮肤模板，以及接收所述用户在所述第一皮肤模板内选择的第一应用和所述第一应用对应的第一应用参数；

获取到与所述第一皮肤模板对应的第一主题代码，以及获取到所述第一应用参数对应的参数代码；

将所述参数代码设于所述第一主题代码中形成第一配置代码，并根据所述第一配置代码生成对应的皮肤配置；

根据所述皮肤配置生成预览皮肤，并将所述预览皮肤发送于显示平台上进行显示预览。

2.根据权利要求1所述的生成前端皮肤的方法，其特征在于，所述获取到多个预设皮肤模板的步骤之后，还包括：

将获取到的所有所述预设皮肤模板存储于皮肤数据库中；

接收到对所述皮肤数据库中的所有所述预设皮肤模板的管理指令，其中，所述管理指令包括但不限于以下的一种或者多种：增加指令、删除指令和修改指令；

依据所述管理指令，对所述预设皮肤模板进行处理。

3.根据权利要求1所述的生成前端皮肤的方法，其特征在于，所述将所述参数代码设于所述第一主题代码中形成第一配置代码，并根据所述第一配置代码生成对应的皮肤配置的步骤之后，包括：

获取所述第一皮肤模板对应的第一皮肤模板ID，以及获取到所述第一配置代码对应的第一配置模板ID，其中，所述第一配置模板ID与所述第一皮肤模板ID相同；

根据所述第一皮肤模板ID和第一配置模板ID，将所述第一皮肤模板与所述第一配置代码建立关联关系；

实时监控所述第一皮肤模板对应的所述第一主题代码是否变更；

若是，则根据所述关联关系对应变更所述第一配置代码中的所述第一主题代码。

4.根据权利要求1所述的生成前端皮肤的方法，其特征在于，所述将所述预览皮肤发送于显示平台上进行显示预览的步骤，包括：

将所述皮肤通过预览引擎发送至所述显示平台上进行显示预览。

5.根据权利要求1所述的生成前端皮肤的方法，其特征在于，所述接收用户从所有所述预设皮肤模板中选择的第一皮肤模板的步骤，还包括：

将所有所述预设皮肤模板的皮肤主题内容显示在所述显示平台上，所述皮肤主题内容包括主题列表、主题配置、主题应用以及应用参数；

接收所述用户选择的第一皮肤主题内容，并根据所述第一皮肤主题内容确定选择的所述第一皮肤模板。

6.根据权利要求1所述的生成前端皮肤的方法，其特征在于，所述获取到与所述第一皮肤模板对应的第一主题代码的步骤之后，包括：

判断所述第一主题代码对应的皮肤是否适应于所述显示平台；

若否，将当前的所述第一主题代码对应的所述第一皮肤模板发送至开发人员的终端，以供所述终端的开发人员进行修改后生成第二皮肤模板；

接收所述终端发送的所述第二皮肤模板。

7.根据权利要求6所述的生成前端皮肤的方法，其特征在于，所述接收所述终端发送的所述第二皮肤模板的步骤之后，包括：

将所述第二皮肤模板存储于所述皮肤数据库中并替换对应的所述第一皮肤模板。

8.一种生成前端皮肤的装置，其特征在于，包括：

第一获取模块，用于获取到多个预设皮肤模板，其中，所述皮肤模板包括显示于显示界面的各应用以及所述各应用对应的应用参数，所述应用参数是指应用于所述各应用上的皮肤颜色的参数；

第一接收模块，用于接收用户从所有所述预设皮肤模板中选择的第一皮肤模板，以及接收所述用户在所述第一皮肤模板内选择的第一应用和所述第一应用对应的第一应用参数；

第二获取模块，用于获取到与所述第一皮肤模板对应的第一主题代码，以及获取到与所述第一应用参数对应的参数代码；

生成模块，用于将所述参数代码设于所述第一主题代码中形成第一配置代码，并根据所述第一配置代码生成对应的皮肤配置；

发送模块，用于根据所述皮肤配置生成预览皮肤，并将所述预览皮肤发送于显示平台上进行显示预览。

9.一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述方法的步骤。

10.一种计算机存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。