[发明专利]一种前端代码生成方法

权利要求书

1.一种前端代码生成方法，其特征在于：具体包含如下步骤；

步骤1，基于现有sketch中imgcook插件将设计原稿解析成为初始UI样式数据；

步骤2，根据预设的解析数据格式规则，对初始UI样式数据进行过滤筛选整合，进而获得与初始UI样式数据所对应的第二前端数据；

步骤3，依据生成的第二前端数据的结果，并基于预设的代码规则转换成与第二前端数据所对应的前端初始化代码；

步骤4，将前端初始化代码加载到用户配置界面；可加载成功的前端页面进行个性化配置；及界面功能的划分；根据个性化配置修改内容对第二前端数据进行重新整合成为最终前端数据；

步骤5，根据预设的代码规则转换成最终开发使用的前端代码。

2.根据权利要求1所述的一种前端代码生成方法，其特征在于：在一个优选的实施方式中，在步骤2中：所述初始UI样式数据的数据类型为初始UI样式数据中的类型数据和类型参数数据。

3.根据权利要求1所述的一种前端代码生成方法，其特征在于：在一个优选的实施方式中，所述步骤3具体如下：步骤3.1，获取预先定义好的代码模板，提供对第二前端数据进行转换的规则；

步骤3.2，输出最新的前端初始化代码；

其中，输出前端初始化代码方法包括：使用当前已有技术node中文件读写模块fs统一

进行代码生成到文件夹；代码风格使用现有前端插件perttier 进行代码格式化，实现代码风格统一；步骤3.3，根据生成的第二前端数据和获取预先定义好的代码模板提供对第二前端数据进行装换规则方法；

步骤3.4，进行匹配生成所需代码； 其中，生成代码方式；使用原生js 操作dom的API方法生成对应的dom节点代码,以及代码的css样式代码；并且在每一个生成的父级头部放入当前父级下面所有的子节点数据；子节点数据包括：节点的标签节点的展示的值；使用HTML的data-*属性放入父级头部。

4.根据权利要求1所述的一种前端代码生成方法，其特征在于：在一个优选的实施方式中，在步骤4中，用户进行个性化配置方法，具体如下：

步骤4.1，根据生成好的前端页面进行修改文案及个性化方案；

步骤4.2，点击生成页面的页面块；

步骤4.3，通过html getAttribute方法获取生成代码过程中放在父级头部的所有子节点数据；并且在用户可操作区域渲染操作区--渲染操作区使用提前定义好的操作区代码模板渲染操作区域；

步骤4.4，用户修改区域参数，进而获得当前代码块最新的数据参数。

5.根据权利要求1所述的一种前端代码生成方法，其特征在于：在一个优选的实施方式中，所述步骤5具体如下，

步骤5.1，获取用户修改区域最终数据；

步骤5.2，将步骤5.1获取的用户修改区域最终数据与步骤3中前端第二参数进行修改，生成最新的前端第二参数；

步骤5.3，使用步骤4生成代码规则输出最新的代码模块，进行实时刷新。