一种非模板化快速生成平台的实施方法与流程

【技术领域】

本发明涉及数据模块生成技术领域，具体涉及到一种非模板化快速生成平台的实施方法。

背景技术：

目前市面上有很多快速生成页面的工具或平台，可以实现零代码快速生成各种页面。但是其实现的方式都是预先开发好固定样式模板的页面，在快速生成页面时仅可对已提前开发好的固定模板进行选择生成，页面自由度很低，没办法做到随意增删页面元素及改变元素在页面的位置。要生成没有预先开发好模板的页面时，只能再重新对整个页面进行定制化开发，需要投入大量的时间及人力成本。

技术实现要素：

为解决上述问题，本发明提出了一种非模板化快速生成平台的实施方法。

本发明的技术方案如下：

一种非模板化快速生成平台的实施方法，包括以下步骤；

(1)根据需要生成的非模板化页面的用途及场景分析出中页面中所需存在的元素类型；例如在需要生成营销活动页面的非模板化快速生成平台中，所需存在的元素类型包括图片元素、文字元素、按钮元素、音频元素、大转盘抽奖元素、九宫格抽奖元素、刮刮卡等抽奖元素、我的奖品列表元素、中奖名单列表元素；此步骤需要根据需要生成的非模板化页面的用途及场景具体情况具体分析；

(2)将分析出来所需的各种类型的元素做成固定的元件，提前实现好各个元件生成时的样式；这里要根据各种元素给其定义好对应的属性配置项；例如以图片元素为例，做成元件所需的配置项包括图片的宽度、高度、xy坐标值；生成元件时根据用户拖拉的效果生成对应的配置值，再通过css样式对各个配置项进行赋值即可；

(3)将各个元件逐一添加到快速生成平台的元件库中，以供用户使用。在快速生成平台中，我们用一组js对象来存储元件库中所有的元件，每种不同的元件均对应一个特定的js对象，根据其包含的配置项设定对应的属性值；图片元件对应的属性值包括：图片id、父节点对象id、图片宽度、图片高度、图片所处位置的x坐标、图片所处位置的y坐标、图片的链接共七项。

(4)用户通过选择拖拽自己想要的页面元素到预览区，从而实现增删页面元素及改变其在页面的位置。用户添加的所有元件，我们会统一存放到一个数组里面，每个元素都存成一个对象，每个对象的基本属性都包含有自己唯一的id和其父节点对象的id，而这个数组就是由各个对象组成，各个对象之间以父与子的关系进行关联；

(5)用户通过使用元件库中不同的元件，实现整个非模板化页面的配置。此步骤可以按用户想要生成页面的样式进行配置，无具体的限制，所有元件库的元件都可以随意搭配重复添加使用，每个元件所处的位置也可以通过拖拉方式改变。在用户对元件进行拖拉时，快速生成平台通过改变元件的xy坐标的值从而实现元件位置的改变；元件的xy坐标值设置范围没有具体限制，但须设置大于0，否则元件在页面中会显示不全；用户通过重复步骤(4)实现将多个不同的元件添加到页面上，每添加一个元件到页面就会生成一个新的对象，最终将所有添加到页面的对象保存到一个js集合里面；

(6)用户通过点击快速生成平台的生成按钮，即可快速生成配置好的非模板化页面。当用户点击生成按钮时，快速生成平台会根据用户添加元件时保存下来的元件对象数组，生成对应配置的各个页面以及对配置的图片进行下载，最后生成一个包含页面html、images文件夹、js文件夹、css文件夹组成的html5页面文件压缩包，用户解压后可以直接打开其中的html文件浏览生成的非模板化页面。

进一步地，步骤(2)中固化元件时需要提前实现好该元件在页面上展现的形态样式，用户拖拉元件移动时，改变的是元件xy坐标值这两个配置项，在页面上展现时通过控制元素css样式的top和left属性实现元素位置的改变。用户拖拉元件放大缩小时，改变的是元件的宽高属性这两个配置项，在页面上展现时通过控制元素css样式的height和width属性实现元素大小的改变。在css样式中top、left是没有范围限制的，height和width是用来控制元素高度和宽度的，所以限制需要设置大于0。

进一步地，步骤(3)中元件库的每一个元件都包含不同的属性，其中元件id、父节点id、元件x坐标，元件y坐标为必须属性项，所有元件都必需包含这几个属性，其他包含高度、宽度、图片链接这些为非必须属性项，需要根据实际添加的元件是否拥有这些属性值进行判断是否需要设置这些属性项。

进一步地，当用户将一个元件拖拉到页面中某个位置时，此时页面中就会根据该元件新增一个对象，该对象包含一个随机生成的id，父节点id自动保存为该页面对象的id。此时用户可以通过对该对象进行拖拉改变其xy坐标值，通过拖拽其大小改变其宽高属性值。

进一步地，生成html5页面文件压缩包时，需要对步骤(5)形成的js集合进行解析转化，遍历集合里面的每一个元素对象，将其xy坐标值转化为css样式中的top和left属性，宽高属性值转化为css样式中的height和width属性，转化后形成一个css文件，从而通过css样式控制每个元素的位置和大小。

为了解决在生成页面时只能选择预先开发好的固定模板，不能随意增删页面元素及改变元素位置的问题，本方法通过将所有页面元素元件化的方式，实现了一个快速生成平台。在该平台中用户可以随意增删页面各种元素，对所有的页面元素进行拖拉改变其在页面的位置，从而实现了零开发快速生成非模板化页面的方法。运用本发明，可以通过快速生成平台零代码快速生成出任意样式的非模板化页面，不再需要预先开发出大量的固定化样式模板，节省了大量的人力成本和时间成本。

【附图说明】

图1为快速生成平台的操作流程图；

图2为快速生成平台部分功能页面展示图；

【具体实施方式】

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

一种非模板化快速生成平台的实施方法，包括以下步骤；

(1)根据需要生成的非模板化页面的用途及场景分析出中页面中所需存在的元素类型；

例如：在需要生成抽奖活动页面的非模板化快速生成平台中，所需存在的元素类型包括图片元素、文字元素、按钮元素、音频元素、大转盘抽奖元素、九宫格抽奖元素、刮刮卡等抽奖元素、我的奖品列表元素、中奖名单列表元素；在需要生成宣传海报页面的非模板化快速生成平台中，所需存在的元素类型包括图片元素、文字元素、宣传二维码元素；在需要生成拼图游戏页面的非模板化快速生成平台中，所需存在的元素类型包括按钮元素、图片元素、文字元素、拼图元素；此步骤需要根据需要生成的非模板化页面的用途及场景具体情况具体分析；

(2)将分析出来所需的各种类型的元素做成固定的元件，提前实现好各个元件生成时的样式；这里要根据各种元素给其定义好对应的属性配置项；

例如以图片元素为例，做成元件所需的配置项包括图片的宽度、高度、xy坐标值、图片的链接；以按钮元素为例，做成元件所需的配置项包括按钮的宽度、高度、xy坐标值、按钮的圆角度；以文字元素为例，做成元件所需的配置项包括文字的大小、xy坐标值、文字的字体颜色、文字的内容；以音频元素为例，做成元件所需的配置项包括音频符合的大小、xy坐标值、音频的链接；生成元件时根据用户拖拉的效果或输入的值生成对应的配置值，再通过css样式对各个配置项进行赋值即可；

(3)将各个元件逐一添加到快速生成平台的元件库中，以供用户使用。在快速生成平台中，我们用一组js对象来存储元件库中所有的元件，每种不同的元件均对应一个特定的js对象，根据其包含的配置项设定对应的属性值；

例如：图片元件对应的属性值包括：图片id、父节点对象id、图片宽度、图片高度、图片所处位置的x坐标、图片所处位置的y坐标、图片的链接共七项。按钮元件对应的属性值包括：按钮id、父节点对象id、按钮宽度、按钮高度、按钮所处位置的x坐标、按钮所处位置的y坐标、按钮的圆角度共七项。文字元件对应的属性值包括：文字id、父节点对象id、字体大小、字体颜色、文字所处位置的x坐标、文字所处位置的y坐标、文字的内容共七项。音频元件对应的属性值包括：音频id、父节点对象id、音频图标的宽度、音频图标的高度、音频图标所处位置的x坐标、音频图标所处位置的y坐标、音频的链接共七项。

(4)用户通过选择拖拽自己想要的页面元素到预览区，从而实现增删页面元素及改变其在页面的位置。用户添加的所有元件，我们会统一存放到一个数组里面，每个元素都存成一个对象，每个对象的基本属性都包含有自己唯一的id和其父节点对象的id，而这个数组就是由各个对象组成，各个对象之间以父与子的关系进行关联；

(5)用户通过使用元件库中不同的元件，实现整个非模板化页面的配置。此步骤可以按用户想要生成页面的样式进行配置，无具体的限制，所有元件库的元件都可以随意搭配重复添加使用，每个元件所处的位置也可以通过拖拉方式改变。在用户对元件进行拖拉时，快速生成平台通过改变元件的xy坐标的值从而实现元件位置的改变；元件的xy坐标值设置范围没有具体限制，但须设置大于0，否则元件在页面中会显示不全；用户通过重复步骤(4)实现将多个不同的元件添加到页面上，每添加一个元件到页面就会生成一个新的对象，最终将所有添加到页面的对象保存到一个js集合里面；

(6)用户通过点击快速生成平台的生成按钮，即可快速生成配置好的非模板化页面。当用户点击生成按钮时，快速生成平台会根据用户添加元件时保存下来的元件对象数组，生成对应配置的各个页面以及对配置的图片进行下载，最后生成一个包含页面html、images文件夹、js文件夹、css文件夹组成的html5页面文件压缩包，用户解压后可以直接打开其中的html文件浏览生成的非模板化页面。

进一步地，步骤(2)中固化元件时需要提前实现好该元件在页面上展现的形态样式，用户拖拉元件移动时，改变的是元件xy坐标值这两个配置项，在页面上展现时通过控制元素css样式的top和left属性实现元素位置的改变。用户拖拉元件放大缩小时，改变的是元件的宽高属性这两个配置项，在页面上展现时通过控制元素css样式的height和width属性实现元素大小的改变。在css样式中top、left是没有范围限制的，height和width是用来控制元素高度和宽度的，所以限制需要设置大于0。

进一步地，步骤(3)中元件库的每一个元件都包含不同的属性，其中元件id、父节点id、元件x坐标，元件y坐标为必须属性项，所有元件都必需包含这几个属性，其他包含高度、宽度、图片链接这些为非必须属性项，需要根据实际添加的元件是否拥有这些属性值进行判断是否需要设置这些属性项。

进一步地，当用户将一个元件拖拉到页面中某个位置时，此时页面中就会根据该元件新增一个对象，该对象包含一个随机生成的id，父节点id自动保存为该页面对象的id。此时用户可以通过对该对象进行拖拉改变其xy坐标值，通过拖拽其大小改变其宽高属性值。

进一步地，生成html5页面文件压缩包时，需要对步骤(5)形成的js集合进行解析转化，遍历集合里面的每一个元素对象，将其xy坐标值转化为css样式中的top和left属性，宽高属性值转化为css样式中的height和width属性，转化后形成一个css文件，从而通过css样式控制每个元素的位置和大小。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。