CN111651160A - 插件构建、网页设计的方法和装置 - Google Patents

Abstract

本发明实施例提供一种插件构建、网页设计方法和装置，该方法包括：根据运行业务逻辑和视图显示信息，生成视图运行文件；根据配置业务逻辑和视图设计信息，生成设计配置文件；基于预设CSS样式文件，对所述视图运行文件和所述设计配置文件进行插件样式设置。通过上述技术方案，将插件构建为可根据需要对配置进行编辑、修改，满足个性化或定制化网页设计需求。

Description

插件构建、网页设计的方法和装置

技术领域

本发明涉及互联网技术领域，尤其涉及一种插件构建、网页设计的方法和装置。

背景技术

随着网页设计技术的发展，越来越多的应用通过网页来实现。同时也意味着网页应用需求和设计类型也越来越多样化。

现有技术中，为了降低网页设计的复杂度，通常采用可配置插件的方式来满足用户的简单配置需求。然而，在现有可配置插件应用中，留给用户的可自行配置的权限很有限，仅限于简单的修改，无法增删配置内容，更无法对配置进行编辑。

因此，需要一种易于操作的插件构建方案，从而能够满足多样化的网页设计需求。

发明内容

本发明实施例提供一种插件构建、网页设计方法和装置，用以实现满足多样化的网页设计需求。

第一方面，本发明实施例提供一种插件构建方法，该方法包括：

根据运行业务逻辑和视图显示信息，生成视图运行文件；

根据配置业务逻辑和视图设计信息，生成设计配置文件；

基于预设CSS样式文件，对所述视图运行文件和所述设计配置文件进行插件样式设置。

可选地，定义运行生命周期函数、运行内置对象以及待构建插件所继承父类作为所述运行业务逻辑；

根据所述运行业务逻辑，利用视图模板生成所述视图显示信息；其中，所述视图模板为基于目标编译库的类HTML片段生成的。

可选地，定义beforeMount函数和mounted函数、定义插件类型type和插件配置项的对象，以及定义需要继承的父类插件作为所述运行业务逻辑。

可选地，所述视图运行文件包括内置有所述运行业务逻辑的javascript脚本文件，和预设有视图显示信息的HTML视图模板文件。

可选地，定义设计配置视图生命周期函数、设计配置内置对象作为配置业务逻辑；

通过XML静态资源配置文件配置视图设计信息。

可选地，定义getDesignHtml函数、getAttrDlgHtml函数和getMecJson函数，定义插件标识、插件配置项对象作为所述配置业务逻辑。

可选地，基于getDesignHtml函数添加和编辑所述插件的设计视图；

基于getAttrDlgHtml函数添加和编辑所述插件的配置项内容；

基于getMecJson函数声明和返回所述插件的配置项对象。

第二方面，本发明实施例提供一种网页设计方法，该方法包括：

导出待修改插件，包括视图运行文件、设计配置文件和CSS样式文件；

基于所述视图运行文件、设计配置文件和CSS样式文件实现对所述待修改插件的编辑；

将完成编辑的所述待修改插件导入网页设计系统中实现对网页设计。

第三方面，本发明实施例提供一种插件构建装置，该装置包括：

第一文件生成模块，根据运行业务逻辑和视图显示信息，生成视图运行文件；

第二文件生成模块，根据配置业务逻辑和视图设计信息，生成设计配置文件；

插件设置模块，基于预设CSS样式文件，对所述视图运行文件和所述设计配置文件进行插件样式设置。

第四方面，本发明实施例提供一种网页设计装置，该装置包括：

导出模块，用于导出待修改插件，包括视图运行文件、设计配置文件和CSS 样式文件；

编辑模块，用于基于所述视图运行文件、设计配置文件和CSS样式文件实现对所述待修改插件的编辑；

导入模块，用于将完成编辑的所述待修改插件导入网页设计系统中实现对网页设计。

本发明实施例中，首先根据网页设计需求，生成内置有运行业务逻辑和视图显示信息的视图运行文件。在根据网页插件配置业务逻辑和视图设计信息，生成设计配置文件。最后，基于预设的CSS样式文件，对视图运行文件和设计配置文件进行插件样式设置，从而完成插件构建。进而，可以将构建完成的插件导入系统，完成网页设计。通过上述技术方案，将插件构建为可根据需要对配置进行编辑、修改，满足个性化或定制化网页设计需求。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例提供的一种插件构建方法的流程示意图；

图2为本申请实施例提供的一种网页设计方法的流程示意图；

图3为本申请实施例提供的一种插件构建装置的结构示意图；

图4为本申请实施例提供的一种网页设计装置的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义，“多种”一般包含至少两种，但是不排除包含至少一种的情况。

应当理解，本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。

取决于语境，如在此所使用的词语“如果”、“若”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于检测”。类似地，取决于语境，短语“如果确定”或“如果检测(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当检测(陈述的条件或事件)时”或“响应于检测(陈述的条件或事件)”。

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

另外，下述各方法实施例中的步骤时序仅为一种举例，而非严格限定。

图1为本发明实施例提供的一种插件构建方法的流程示意图，如图1所示，该方法包括以下步骤：

101：根据运行业务逻辑和视图显示信息，生成视图运行文件。

102：根据配置业务逻辑和视图设计信息，生成设计配置文件。

103：基于预设CSS样式文件，对所述视图运行文件和所述设计配置文件进行插件样式设置。

在实际应用中，视图运行文件包括javascript脚本文件和HTML视图模板文件。其中，javascript脚本文件中内置是插件运行时所需的所有生命周期函数、内置对象等等，主要用于开发和编辑插件运行时的业务逻辑。HTML视图模板文件，预先定义了视图模板，通过该视图模板可以实现对视图结构和展示效果的调整。

下面分别对javascript脚本文件和HTML视图模板文件的生成过程通过实例进行说明。在实际应用中，插件运行业务逻辑包括运行生命周期函数、运行内置对象以及待构建插件所继承父类。这里所说的生命周期函数包括但不限于 beforeMount函数和mounted函数。

beforeMount函数是在插件被渲染之前被调用，页面渲染时所需要的数据，应尽量在这之前完成赋值，此时还无法操作插件的dom元素。mounted函数是在插件渲染完成后调用，在这一步创建vm.$el并替换el，并挂载到实例上，此时可以通过this.$el操作插件dom元素。

这里所说的运行内置对象是指插件运行时所需的内置对象，包括表示插件类型的type和插件配置项viewmodel。其中，type作为插件的唯一标识，用于表示插件的类型，这里之所以说是能够作为插件的唯一标识，是因为一旦插件导入新建插件之后，该插件的type将无法再修改。viewModel：插件配置项的对象，可以用于替换html文件中的动态字面量，也可以用于完成一些功能性的业务逻辑。

在实际应用中，无论内置插件或是用户新建编辑的插件，每一个插件都会继承与系统内的一个父类插件，该父类插件不同于具体的业务组件，主要用于统一插件的数据获取方式和视图渲染效果等。

通过定义beforeMount函数和mounted函数、定义插件类型type和插件配置项的对象，以及定义需要继承的父类插件作为所述运行业务逻辑，并将该运行业务逻辑内置于JavaScript脚本文件，作为视图运行文件中的其中一个文件。基于此，用户可以根据需要自行定义业务运行逻辑，能够满足用户多样化、个性化的网页设计需求。

除了建立JavaScript脚本文件外，还需要基于此建立HTML视图模板文件。根据所述运行业务逻辑，利用视图模板生成所述视图显示信息；其中，所述视图模板为基于目标编译库的类HTML片段生成的。

插件的视图模板是基于一个第三方的模板编译库(juicer.js)的类html 片段，在此视图模板中内置的编译作用域为插件的viewModel对象，在模板中可以通过使用模板语言的动态字面量，将html解析为对应业务逻辑的视图，基于此用户可以根据需要修改和编辑视图显示效果，能够满足用户多样化显示的需求。

在执行步骤102根据配置业务逻辑和视图设计信息，生成设计配置文件之前，还包括：定义设计配置视图生命周期函数、设计配置内置对象作为配置业务逻辑；通过XML静态资源配置文件配置视图设计信息。

插件设计时的配置文件，包含一个javascript脚本文件和一个静态资源配置的xml文件，javascript脚本文件内置了插件设计时的所有生命周期方法与内置对象和函数。可用于开发和编辑插件设计时的配置项。XML文件用于了插件所依赖的静态资源，通常情况下无需再做更改。

具体来说，所述定义设计配置视图生命收起函数、设计配置内置对象作为配置业务逻辑，包括：定义getDesignHtml函数、getAttrDlgHtml函数和 getMecJson函数，定义插件标识、插件配置项对象作为所述配置业务逻辑。

其中，getDesignHtml：该函数用于返回插件的设计视图，可在此处添加和编辑插件的设计视图。

getAttrDlgHtml：该函数用于返回插件的配置项的面板，可在此处添加或编辑插件的配置项内容。

getMecJson：该函数用于返回插件的配置项的对象，可以在此处声明和返回插件的配置项对象。

本申请实施例还提出一种网页设计方法，图2为本申请实施例提供的一种网页设计方法的流程示意图。从图中可以看出该方法包括如下步骤：

201：导出待修改插件，包括视图运行文件、设计配置文件和CSS样式文件。

202：基于所述视图运行文件、设计配置文件和CSS样式文件实现对所述待修改插件的编辑。

203：将完成编辑的所述待修改插件导入网页设计系统中实现对网页设计。

具体来说，在进行网页设计的时候，利用如图1所示及其对应的实施例，能够满足用户多样化需求。利用上述网页设计方案，插件能够实现可插拔，并且用户能够根据自己的需要修改和配置视图。利用插件进行网页设计的具体技术方案已经在前述实施例中进行展开说明，这里就不再进行重复赘述。

如图3为本申请实施例提供的一种插件构建装置的结构示意图。所述装置包括：

第一文件生成模块31，根据运行业务逻辑和视图显示信息，生成视图运行文件。

第二文件生成模块32。根据配置业务逻辑和视图设计信息，生成设计配置文件；

插件设置模块33，基于预设CSS样式文件，对所述视图运行文件和所述设计配置文件进行插件样式设置。

第一文件生成模块31用于定义运行生命周期函数、运行内置对象以及待构建插件所继承父类作为所述运行业务逻辑；根据所述运行业务逻辑，利用视图模板生成所述视图显示信息；其中，所述视图模板为基于目标编译库的类HTML 片段生成的。

第一文件生成模块31用于定义beforeMount函数和mounted函数、定义插件类型type和插件配置项的对象，以及定义需要继承的父类插件作为所述运行业务逻辑。

可选地，所述视图运行文件包括内置有所述运行业务逻辑的javascript脚本文件，和预设有视图显示信息的HTML视图模板文件。

第二文件生成模块32用于定义设计配置视图生命周期函数、设计配置内置对象作为配置业务逻辑；通过XML静态资源配置文件配置视图设计信息。

可选地，定义getDesignHtml函数、getAttrDlgHtml函数和getMecJson函数，定义插件标识、插件配置项对象作为所述配置业务逻辑。

可选地，基于getDesignHtml函数添加和编辑所述插件的设计视图；

基于getAttrDlgHtml函数添加和编辑所述插件的配置项内容；

基于getMecJson函数声明和返回所述插件的配置项对象。

如图4为本申请实施例提供的一种网页设计装置的结构示意图。所述装置包括：

导出模块41，用于导出待修改插件，包括视图运行文件、设计配置文件和 CSS样式文件。

编辑模块42，用于基于所述视图运行文件、设计配置文件和CSS样式文件实现对所述待修改插件的编辑。

导入模块43，用于将完成编辑的所述待修改插件导入网页设计系统中实现对网页设计。

本申请实施例还提供一种存储有计算机程序的计算机可读存储介质。当计算机可读存储介质存储计算机程序，且计算机程序被一个或多个处理器执行时，致使一个或多个处理器执行相应图1所示方法实施例中的各步骤。

本申请实施例还提供一种存储有计算机程序的计算机可读存储介质。当计算机可读存储介质存储计算机程序，且计算机程序被一个或多个处理器执行时，致使一个或多个处理器执行相应图2所示方法实施例中的各步骤。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助加必需的通用硬件平台的方式来实现，当然也可以通过硬件和软件结合的方式来实现。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以计算机产品的形式体现出来，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和 /或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/ 或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程更新设备的处理器以产生一个机器，使得通过计算机或其他可编程设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM) 和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flashRAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘 (DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitorymedia)，如调制的数据信号和载波。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种插件构建方法，其特征在于，所述方法包括：

根据运行业务逻辑和视图显示信息，生成视图运行文件；

根据配置业务逻辑和视图设计信息，生成设计配置文件；

基于预设CSS样式文件，对所述视图运行文件和所述设计配置文件进行插件样式设置。

2.根据权利要求1所述的插件构建方法，其特征在于，根据运行业务逻辑和视图显示信息，生成视图运行文件之前，还包括：

定义运行生命周期函数、运行内置对象以及待构建插件所继承父类作为所述运行业务逻辑；

根据所述运行业务逻辑，利用视图模板生成所述视图显示信息；其中，所述视图模板为基于目标编译库的类HTML片段生成的。

3.根据权利要求2所述的插件构建方法，其特征在于，所述定义生命周期函数、内置对象以及待构建插件所继承父类作为所述运行业务逻辑，包括：

定义beforeMount函数和mounted函数、定义插件类型type和插件配置项的对象，以及定义需要继承的父类插件作为所述运行业务逻辑。

4.根据权利要求1所述的插件构建方法，其特征在于，所述视图运行文件包括内置有所述运行业务逻辑的javascript脚本文件，和预设有视图显示信息的HTML视图模板文件。

5.根据权利要求1所述的插件构建方法，其特征在于，根据配置业务逻辑和视图设计信息，生成设计配置文件之前，还包括：

定义设计配置视图生命周期函数、设计配置内置对象作为配置业务逻辑；

通过XML静态资源配置文件配置视图设计信息。

6.根据权利要求1所述的插件构建方法，其特征在于，所述定义设计配置视图生命收起函数、设计配置内置对象作为配置业务逻辑，包括：

定义getDesignHtml函数、getAttrDlgHtml函数和getMecJson函数，定义插件标识、插件配置项对象作为所述配置业务逻辑。

7.根据权利要求6所述的插件构建方法，其特征在于，所述定义getDesignHtml函数、getAttrDlgHtml函数和getMecJson函数，包括：

基于getDesignHtml函数添加和编辑所述插件的设计视图；

基于getAttrDlgHtml函数添加和编辑所述插件的配置项内容；

基于getMecJson函数声明和返回所述插件的配置项对象。

8.一种网页设计方法，其特征在于，所述方法包括：

导出待修改插件，包括视图运行文件、设计配置文件和CSS样式文件；

基于所述视图运行文件、设计配置文件和CSS样式文件实现对所述待修改插件的编辑；

将完成编辑的所述待修改插件导入网页设计系统中实现对网页设计。

9.一种插件构建装置，其特征在于，所述装置包括：

第一文件生成模块，根据运行业务逻辑和视图显示信息，生成视图运行文件；

第二文件生成模块，根据配置业务逻辑和视图设计信息，生成设计配置文件；

插件设置模块，基于预设CSS样式文件，对所述视图运行文件和所述设计配置文件进行插件样式设置。

10.一种网页设计装置，其特征在于，所述装置包括：

导出模块，用于导出待修改插件，包括视图运行文件、设计配置文件和CSS样式文件；

编辑模块，用于基于所述视图运行文件、设计配置文件和CSS样式文件实现对所述待修改插件的编辑；

导入模块，用于将完成编辑的所述待修改插件导入网页设计系统中实现对网页设计。

Images