一种基于PSD图层生成前端界面的方法技术

本发明专利技术提供了一种基于图层生成前端界面的方法。本专利基于对PSD图层解析能力，提供给用户一个入口。将用户的设计文件进行封装。获取文件中的图层信息，位置大小等参数，解析并包装发送至后台进行页面生成。有效降低了公司内部页面开发的时间成本，人力成本。提高了产品上线时间和开发效率。本发明专利技术方法和系统包括PSD图层解析模块、图层上传模块、兼容性代码前端界面生成模块。端界面生成模块。

【技术实现步骤摘要】
一种基于PSD图层生成前端界面的方法


[0001]本专利技术涉及IT软件与开发，特别是一种基于PSD图层生成前端界面的方法和系统。

技术介绍

[0002]随着互联网的发展，网页、APP的编写需求也应运而生。但是由于技术门槛，导致开发进度过慢，页面无法与设计图一致等一系列问题。造成开发效率低下。在界面逻辑不复杂的情况下，需要去专门找人开发，由于技术水平参差不齐，效果也可能不好，成本也过高。本方法应用于此类需求。保持了提供服务的持久性和稳定性。节约了人力成本。

技术实现思路

[0003]本专利基于对PSD图层解析能力，提供给用户一个入口。将用户的设计文件进行封装。获取文件中的图层信息，位置大小等参数，解析并包装发送至后台进行页面生成。有效降低了公司内部页面开发的时间成本，人力成本。提高了产品上线时间和开发效率。
[0004]1本专利描述了一种基于PSD图层生成前端界面的方法；2本专利适用于设计、开发的各个阶段，简化代码开发复杂度，提高公司开发效率；3本专利实现了从整体到局部进行分析设计思想，可视化构建项目场景；4本专利实现可见即可得，通过设计一键生成代码。
附图说明
[0005]图1为一种基于PSD图层生成前端界面的方法。
具体实施方式
[0006]专利整体实现方法如下，包含图形化工具页面与核心模块：图形化工具页面：负责和用户进行交互，用户选择需要上传的PSD文件，并且标注各个界面之间的关系，用户可以在设计模板的基础上修改信息。
[0007]核心处理模块：负责将用户在页面中设计方案元素进行处理和保存，根据用户的设计一键生成对应的代码。
[0008]1.用户首先上传设计文件，前端代码根据PSD文件进行拆分，根据Adobe官网描述，整个PSD文件文件包含5个部分，这5个部分包含了整个设计文件中的基础信息，图片信息，PSD内容宽高深度，色彩模式和其他的信息。
[0009]2. 前端界面根据PSD中获取的图层参数进行数据储存，编写一个集合用来存放相关图层的图片信息，图片位置信息等图片相关信息。然后将图层文件进行转换为Image文件，利用该图层位置和宽高信息，在前端页面进行UI代码生成，生成初版的前端展示界面，用户可以在此界面上进行页面代码调整，增加动画、事件等操作。用户调整完毕之后点击上传发布进行发布审核流程。
[0010]3.后台对用户提交的代码版本进行兼容性编写和代码重构。重构后会生成界面文
件和界面地址等文件。同时也可以生成APK端的前端界面。
本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于对PSD图层解析能力，提供给用户一个入口。2.将用户的设计文件进行封装。3.获取文件中的图层信息，位置大小等参数，解析并包装发送至后台进行页面生成。4.有效降低了公司内部页面开发的时间成本，人力成本。5.提高了产品上线时间和开发效率。6.根据权利要求1所述一种基于对PSD图层解析能力，其特征在于：PSD图层解析模块：主要包括PSD文件图层解析。7.PSD文件图层解析，包括对用户提交...

【专利技术属性】
技术研发人员：李浩海，
申请(专利权)人：新国脉数字文化股份有限公司，
类型：发明
国别省市：