[发明专利]一种从视觉稿直接生成UI代码的方法及装置

权利要求书

1.一种从视觉稿直接生成UI代码的方法，其特征在于，包括以下流程：

S1，输入文件类型为SKETCH文件设计文档；

S2，通过解析SKETCH的图层信息，可以得到设计文稿中的，图层结构、模板结构、图层信息，以此来划分最小的不可切割的块；

S3，图层结构获取划分完毕后，需要根据图层的数据描述信息，坐标信息，进行图层布局的合并、布局拆分及布局的预测，解析生成相关的布局属性，为了进行多平台的布局适配，采用Flex布局，在这一步，会对图层的不可分割的最小块进行横向排列和纵向排列的循环递归，直到所有的块都能放在对应产生的“格子”里，在元素相互叠加的状态下，产生绝对布局，将相互叠加的元素放在叠加后识别的”格子”里；

S4，在已经初步布局识别的格栅中，根据视图结构信息和图层属性，进行布局的预测的修正，根据图层的结构和属性，判断图层的伸缩性以此选取合适的布局容器；通过对设计文档中的视图结构信息和图层属性读取和类型匹配，映射为对应的移动端的UI元素，提炼视图结构信息和图层属性，由于模板信息中有OVERRIDE属性描述、基础组件有预打标信息描述，填充UI元素的属性结构，在图层的遍历过程中，还可以获取到图层的依赖数据，作为资源、素材的导出依赖；

S5，查找当前图层依赖关系，重复S1-S4，直到当前图层及依赖的sketch的外部引用文件图层信息全部识别完成；进入修正阶段，由操作人员控制，修正解析图层、解析布局、解析属性的偏差；除此之外，对于非组件元素、异常的视图元素进行指定规则的元素转化或者抛弃；

S6，上述步骤完成后，整个视图树基本形成，以下步骤是语义化定义页面、定义内容，在语义化阶段会继续对视图树进行修改，在语义化阶段，会对视图树中的节点进行命名的分析、节点与节点之间的关系分析，还有对多状态组件进行语义定义，此项为数据依赖关系，节点命名等提供支撑；

S7，分析节点信息、修正信息及语义化信息，根据组件与数据规则，生成图片数据映射信息、文本数据映射信息和状态映射信息，其中还分成，静态数据和动态数据，数据依赖语义化分析和修正信息；

S8，在上述内容准备就绪后，即可以开始进行DSL的推导，生产成为标准语义的视图树、样式树以及对应的业务接口描述；

S9，DSL编译器可以通过对组件跟视图布局的配置，载入对应不同的编译器，生成对应不同平台的代码；

S10，合并代码到项目中，需要项目有对应的业务层支撑框架。